@extends('layouts.site')

@section('title', 'Réserver — JavaPax au Moulleau')
@section('meta_description', 'Vérifiez les disponibilités et envoyez votre demande de réservation pour l\'appartement JavaPax au Moulleau, Arcachon.')

@section('content')
    <div class="text-center mb-10">
        <h1 class="text-3xl md:text-4xl font-bold text-navy">Réserver votre séjour</h1>
        <p class="mt-3 text-stone-600 max-w-2xl mx-auto">Consultez les disponibilités ci-dessous puis envoyez-nous votre demande. Nous vous répondons rapidement pour confirmer.</p>
    </div>

    @if(session('reserved'))
        <div class="max-w-2xl mx-auto bg-teal-50 border border-teal-200 text-teal-800 rounded-xl px-5 py-4 mb-8 text-center">
            ✅ Merci, votre demande de réservation a bien été envoyée ! Nous revenons vers vous très vite pour la confirmer.
        </div>
    @endif

    <div class="grid lg:grid-cols-2 gap-10">

        {{-- CALENDRIER --}}
        <div>
            <h2 class="text-xl font-bold text-navy mb-4">Disponibilités</h2>
            <div class="flex items-center gap-4 text-sm mb-4">
                <span class="inline-flex items-center gap-1.5"><span class="w-4 h-4 rounded bg-white border border-stone-300"></span> Libre</span>
                <span class="inline-flex items-center gap-1.5"><span class="w-4 h-4 rounded bg-red-200"></span> Occupé</span>
            </div>

            <div class="grid sm:grid-cols-2 gap-6">
                @foreach($months as $month)
                    @php
                        $first = $month->copy()->startOfMonth();
                        $daysInMonth = $month->daysInMonth;
                        $startWeekday = (int) $first->isoWeekday(); // 1=lundi
                    @endphp
                    <div class="bg-white rounded-xl shadow-sm p-4">
                        <div class="font-semibold text-navy text-center mb-2 capitalize">{{ $month->translatedFormat('F Y') }}</div>
                        <div class="grid grid-cols-7 gap-1 text-center text-[11px] text-stone-400 mb-1">
                            @foreach(['L','M','M','J','V','S','D'] as $d)<div>{{ $d }}</div>@endforeach
                        </div>
                        <div class="grid grid-cols-7 gap-1 text-center text-sm">
                            @for($i = 1; $i < $startWeekday; $i++)<div></div>@endfor
                            @for($day = 1; $day <= $daysInMonth; $day++)
                                @php
                                    $date = $first->copy()->day($day);
                                    $key = $date->format('Y-m-d');
                                    $isPast = $date->lt($today);
                                    $isBusy = isset($unavailable[$key]);
                                @endphp
                                @if($isPast)
                                    <div class="py-1 text-stone-300">{{ $day }}</div>
                                @elseif($isBusy)
                                    <div class="py-1 rounded bg-red-200 text-red-800">{{ $day }}</div>
                                @else
                                    <div class="py-1 rounded hover:bg-teal-50 text-stone-700">{{ $day }}</div>
                                @endif
                            @endfor
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- FORMULAIRE --}}
        <div>
            <h2 class="text-xl font-bold text-navy mb-4">Votre demande</h2>
            @if($errors->any())
                <div class="bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-3 mb-5 text-sm">
                    {{ $errors->first() }}
                </div>
            @endif
            <form method="POST" action="{{ route('reservation.store') }}" class="bg-white rounded-2xl shadow-sm p-6 space-y-5">
                @csrf
                <input type="text" name="website" class="hidden" tabindex="-1" autocomplete="off">

                <div class="grid sm:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-medium text-stone-700 mb-1">Arrivée *</label>
                        <input type="date" name="checkin" value="{{ old('checkin', request('checkin')) }}" min="{{ $today->format('Y-m-d') }}" required
                               class="w-full border border-stone-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-sea focus:border-sea">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-stone-700 mb-1">Départ *</label>
                        <input type="date" name="checkout" value="{{ old('checkout', request('checkout')) }}" min="{{ $today->copy()->addDay()->format('Y-m-d') }}" required
                               class="w-full border border-stone-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-sea focus:border-sea">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Nombre de voyageurs *</label>
                    <input type="number" name="guests" value="{{ old('guests', 2) }}" min="1" max="10" required
                           class="w-full border border-stone-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-sea focus:border-sea">
                </div>

                <div class="grid sm:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-medium text-stone-700 mb-1">Nom *</label>
                        <input name="name" value="{{ old('name') }}" required
                               class="w-full border border-stone-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-sea focus:border-sea">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-stone-700 mb-1">Email *</label>
                        <input type="email" name="email" value="{{ old('email') }}" required
                               class="w-full border border-stone-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-sea focus:border-sea">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Téléphone</label>
                    <input name="phone" value="{{ old('phone') }}"
                           class="w-full border border-stone-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-sea focus:border-sea">
                </div>

                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Message</label>
                    <textarea name="message" rows="3"
                              class="w-full border border-stone-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-sea focus:border-sea">{{ old('message') }}</textarea>
                </div>

                <button type="submit" class="w-full bg-sea hover:bg-navy text-white font-semibold px-6 py-3 rounded-full shadow transition">
                    Envoyer ma demande de réservation
                </button>
                <p class="text-xs text-stone-400 text-center">Demande sans engagement — nous confirmons la disponibilité et le tarif par retour.</p>
            </form>
        </div>
    </div>
@endsection