@extends('layouts.app')

@section('title', 'Add Room')
@section('page_title', 'Add Room')
@section('page_subtitle', 'Register a new room to the property')

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

@section('content')

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

    <a href="{{ route('rooms.index') }}"
       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 Rooms
    </a>

    <form action="{{ route('rooms.store') }}" method="POST" class="space-y-4">
        @csrf

        {{-- 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" placeholder="e.g. 101" required
                           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 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" 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">
                        <option value="">Select floor</option>
                        @for ($i = 1; $i <= 10; $i++)
                        <option value="{{ $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">
                        <option value="A">Wing A</option>
                        <option value="B">Wing B</option>
                        <option value="C">Wing C</option>
                    </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 }}">{{ $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">
                            <option>1 Single Bed</option>
                            <option>1 Queen Bed</option>
                            <option>1 King Bed</option>
                            <option>2 Single Beds</option>
                            <option>2 Queen Beds</option>
                            <option>1 King + 1 Single</option>
                        </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">
                            <button type="button" 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" value="2" min="1" max="10"
                                   class="flex-1 text-center text-sm text-gray-700 py-2 focus:outline-none">
                            <button type="button" 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" placeholder="e.g. 32"
                               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>

            </div>
        </div>

        {{-- 3. Rate --}}
        <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">Rack Rate</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" placeholder="0.00" min="0" step="0.01"
                                   class="flex-1 text-sm text-gray-700 px-3 py-2 focus:outline-none">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1.5">Initial 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">
                            <option value="available">Available</option>
                            <option value="maintenance">Maintenance</option>
                            <option value="out_of_order">Out of Order</option>
                        </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">
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
                    @foreach ([
                        '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',
                    ] as $amenity)
                    <label class="flex items-center gap-2.5 cursor-pointer">
                        <input type="checkbox" name="amenities[]" value="{{ $amenity }}"
                               @if (in_array($amenity, ['Free Wi-Fi', 'Air Conditioning', 'Flat Screen TV', 'Hot Shower'])) checked @endif
                               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">(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"></textarea>
        </div>

        {{-- Actions --}}
        <div class="flex items-center justify-end gap-2">
            <a href="{{ route('rooms.index') }}"
               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 Room
            </button>
        </div>

    </form>

</div>

@endsection