@extends('layouts.app')

@section('title', 'Edit Room ' . $room->no)
@section('page_title', 'Edit Room ' . $room->no)
@section('page_subtitle', $room->name . ' · ' . $room->type . ', Floor ' . $room->floor)

@section('nav_rooms', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')

<div class="max-w-3xl">

    <a href="{{ route('rooms.show', $room->id) }}"
       class="inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-600 text-sm mb-6 transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Room {{ $room->no }}
    </a>

    @if (session('success'))
    <div class="mb-4 px-4 py-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl text-teal-700 text-sm">
        {{ session('success') }}
    </div>
    @endif

    @if ($errors->any())
    <div class="mb-4 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-red-700 text-sm">
        <p class="font-semibold mb-1">Please fix the following errors:</p>
        <ul class="list-disc list-inside space-y-0.5">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ route('rooms.update', $room->id) }}" method="POST" class="space-y-4"
          data-confirm="Save changes to Room {{ $room->no }}?">
        @csrf
        @method('PATCH')

        {{-- 1. Room Identity --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">1</div>
                <h3 class="text-gray-800 font-semibold text-sm">Room Identity</h3>
            </div>
            <div class="p-6 grid grid-cols-1 sm:grid-cols-3 gap-4">

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Room Number <span class="text-red-400">*</span></label>
                    <input type="text" name="no" value="{{ old('no', $room->no) }}" required
                           class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400
                                  @error('no') border-red-300 @enderror">
                    @error('no') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="sm:col-span-2">
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">
                        Room Name
                        <span class="text-gray-300 font-normal ml-1">Internal name used by staff</span>
                    </label>
                    <input type="text" name="name" value="{{ old('name', $room->name) }}"
                           placeholder="e.g. Sunset Deluxe, Garden View, Penthouse Suite"
                           class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Floor <span class="text-red-400">*</span></label>
                    <select name="floor" required
                            class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                   focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        @for ($i = 1; $i <= 10; $i++)
                        <option value="{{ $i }}" @selected(old('floor', $room->floor) == $i)>Floor {{ $i }}</option>
                        @endfor
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Wing</label>
                    <select name="wing"
                            class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                   focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        @foreach (['A', 'B', 'C'] as $w)
                        <option value="{{ $w }}" @selected(old('wing', $room->wing) === $w)>Wing {{ $w }}</option>
                        @endforeach
                    </select>
                </div>

            </div>
        </div>

        {{-- 2. Room Type & Specs --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">2</div>
                <h3 class="text-gray-800 font-semibold text-sm">Room Type &amp; Specifications</h3>
            </div>
            <div class="p-6 space-y-4">

                {{-- Room Type --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5">Room Type <span class="text-red-400">*</span></label>
                    <select name="type" required
                            class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                   focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        <option value="">Select room type</option>
                        @foreach ([
                            'Economy Junior', 'Economy Twin', 'Economy Double',
                            'Ordinary Twin', 'Ordinary Double',
                            'Standard Twin', 'Standard Double',
                            'Junior Deluxe', 'Superior Deluxe',
                            'Deluxe Twin', 'Deluxe Double', 'Deluxe Trio',
                            'Family Room', 'Family Room 2',
                            'Executive Suite', 'Barkadahan',
                        ] as $t)
                        <option value="{{ $t }}" @selected(old('type', $room->type) === $t)>{{ $t }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Bed Type <span class="text-red-400">*</span></label>
                        <select name="beds"
                                class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                       focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            @foreach (['1 Single Bed', '1 Queen Bed', '1 King Bed', '2 Single Beds', '2 Queen Beds', '1 King + 1 Single'] as $b)
                            <option @selected(old('beds', $room->beds) === $b)>{{ $b }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Max Occupancy</label>
                        <div class="flex items-center border-[0.5px] border-gray-200 rounded-lg overflow-hidden"
                             x-data="{ pax: {{ old('max_pax', $room->max_pax) }} }">
                            <button type="button" @click="pax = Math.max(1, pax - 1)"
                                    class="px-3 py-2 text-gray-400 hover:text-gray-700 hover:bg-gray-50 transition-colors">−</button>
                            <input type="number" name="max_pax" x-model="pax" min="1" max="20"
                                   class="flex-1 text-center text-sm text-gray-700 py-2 focus:outline-none">
                            <button type="button" @click="pax = Math.min(20, pax + 1)"
                                    class="px-3 py-2 text-gray-400 hover:text-gray-700 hover:bg-gray-50 transition-colors">+</button>
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Room Size (m²)</label>
                        <input type="number" name="sqm" value="{{ old('sqm', $room->sqm) }}" min="1"
                               class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>

                </div>
            </div>
        </div>

        {{-- 3. Rate & Status --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">3</div>
                <h3 class="text-gray-800 font-semibold text-sm">Rate &amp; Status</h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Rate per Night (₱) <span class="text-red-400">*</span></label>
                        <div class="flex items-center border-[0.5px] border-gray-200 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-teal-500/20 focus-within:border-teal-400">
                            <span class="px-3 py-2 bg-gray-50 text-gray-500 text-sm border-r border-gray-200">₱</span>
                            <input type="number" name="rate" value="{{ old('rate', $room->rate) }}" min="0" step="1"
                                   class="flex-1 text-sm text-gray-700 px-3 py-2 focus:outline-none">
                        </div>
                        @error('rate') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Room Status</label>
                        <select name="status"
                                class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 bg-white
                                       focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            @foreach ([
                                'available'    => 'Available',
                                'occupied'     => 'Occupied',
                                'dirty'        => 'Dirty',
                                'clean'        => 'Clean',
                                'maintenance'  => 'Maintenance',
                                'out_of_order' => 'Out of Order',
                            ] as $val => $label)
                            <option value="{{ $val }}" @selected(old('status', $room->status) === $val)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        {{-- 4. Amenities --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
                <div class="w-6 h-6 bg-teal-600 text-white rounded-lg flex items-center justify-center text-xs font-bold">4</div>
                <h3 class="text-gray-800 font-semibold text-sm">Amenities</h3>
            </div>
            <div class="p-6">
                @php
                    $savedAmenities = old('amenities', $room->amenities ?? []);
                    $allAmenities = [
                        'Free Wi-Fi', 'Air Conditioning', 'Fan (non air conditioned)', 'Flat Screen TV', 'Hot Shower',
                        'Mini Refrigerator', 'In-room Safe', 'Coffee/Tea Maker', 'Direct Phone',
                        'Bathtub', 'Balcony', 'Living Area', 'Minibar',
                        'Dining Area', 'Kitchenette', 'Butler Service',
                    ];
                @endphp
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
                    @foreach ($allAmenities as $amenity)
                    <label class="flex items-center gap-2.5 cursor-pointer">
                        <input type="checkbox" name="amenities[]" value="{{ $amenity }}"
                               @checked(in_array($amenity, $savedAmenities))
                               class="rounded accent-teal-600">
                        <span class="text-gray-600 text-sm">{{ $amenity }}</span>
                    </label>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Notes --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
            <label class="block text-xs font-semibold text-gray-500 mb-1.5">
                Internal Notes
                <span class="text-gray-300 font-normal ml-1">(optional)</span>
            </label>
            <textarea name="notes" rows="2"
                      placeholder="e.g. Corner room, best sea view, connecting door to 102..."
                      class="w-full text-sm border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-gray-700 placeholder-gray-300
                             focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ old('notes', $room->notes) }}</textarea>
        </div>

        {{-- Actions --}}
        <div class="flex items-center justify-between">
            <p class="text-gray-400 text-xs">Room ID #{{ $room->id }} &mdash; last updated {{ $room->updated_at->format('M j, Y g:i A') }}</p>
            <div class="flex items-center gap-2">
                <a href="{{ route('rooms.show', $room->id) }}"
                   class="px-4 py-2 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors font-medium">
                    Cancel
                </a>
                <button type="submit"
                        class="px-5 py-2 text-sm text-white bg-teal-600 hover:bg-teal-700 rounded-lg transition-colors font-semibold">
                    Save Changes
                </button>
            </div>
        </div>

    </form>

</div>

@endsection