@extends('public.layouts.guest')

@section('title', 'Book Your Stay — ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO'))

@section('content')

<div class="bg-gradient-to-br from-teal-700 to-teal-900 py-16">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 text-center">
        <p class="text-teal-300 text-xs font-semibold tracking-[0.2em] uppercase mb-2">Reservations</p>
        <h1 class="text-4xl font-bold text-white">Book Your Stay</h1>
        <p class="text-teal-200 mt-3 text-sm">Select your dates to check room availability.</p>
    </div>
</div>

<div class="min-h-screen py-16 bg-gray-50">
    <div class="max-w-xl mx-auto px-4 sm:px-6">

        @if(!$enabled)
        <div class="bg-amber-50 border-[0.5px] border-amber-200 rounded-2xl p-8 text-center">
            <svg class="w-12 h-12 text-amber-400 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
            </svg>
            <h3 class="font-bold text-gray-800 mb-2">Online Booking Unavailable</h3>
            <p class="text-gray-500 text-sm mb-5">Online booking is temporarily unavailable. Please contact us directly to make a reservation.</p>
            <a href="{{ route('public.contact') }}" class="inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white font-semibold px-5 py-2.5 rounded-xl text-sm transition-colors">
                Contact Us
            </a>
        </div>
        @else

        <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 shadow-sm p-8">
            <h2 class="font-bold text-gray-900 text-lg mb-6">Check Availability</h2>

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

            @if($errors->any())
            <div class="mb-5 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-sm text-red-700">
                {{ $errors->first() }}
            </div>
            @endif

            <form action="{{ route('public.book') }}" method="GET" class="space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wide">Check-in Date</label>
                    <input type="date" name="check_in" value="{{ old('check_in', $checkIn) }}"
                           min="{{ date('Y-m-d') }}" required
                           class="w-full border-[0.5px] border-gray-200 rounded-xl px-3 py-3 text-sm
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 transition-colors">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wide">Check-out Date</label>
                    <input type="date" name="check_out" value="{{ old('check_out', $checkOut) }}"
                           min="{{ date('Y-m-d', strtotime('+1 day')) }}" required
                           class="w-full border-[0.5px] border-gray-200 rounded-xl px-3 py-3 text-sm
                                  focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 transition-colors">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wide">Number of Guests</label>
                    <select name="guests" class="w-full border-[0.5px] border-gray-200 rounded-xl px-3 py-3 text-sm
                                                 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        @for($i = 1; $i <= 8; $i++)
                        <option value="{{ $i }}" {{ $guests == $i ? 'selected' : '' }}>{{ $i }} {{ $i===1?'Guest':'Guests' }}</option>
                        @endfor
                    </select>
                </div>
                <button type="submit"
                        class="w-full bg-teal-600 hover:bg-teal-700 text-white font-bold py-3.5 rounded-xl transition-colors text-sm mt-2">
                    Search Available Rooms
                </button>
            </form>
        </div>

        <div class="mt-6 text-center text-xs text-gray-400">
            Need help? <a href="{{ route('public.contact') }}" class="text-teal-600 hover:text-teal-800 font-medium">Contact us</a>
        </div>
        @endif
    </div>
</div>

@endsection