@extends('layouts.site')

@section('title', 'Réserver - JavaPax au Moulleau')
@section('meta_description', 'Vérifiez les disponibilités en temps réel et envoyez votre demande de réservation pour l\'appartement de vacances 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>
        @include('partials.plateformes', ['titre' => 'Vous préférez réserver via une plateforme ?'])
    </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>
        {{-- Objectif de conversion Umami : demande de réservation envoyée. --}}
        @push('scripts')
        <script>
            (function fire(n){ if (window.umami) { umami.track('reservation-envoyee'); }
                else if (n < 40) { setTimeout(function(){ fire(n + 1); }, 250); } })(0);
        </script>
        @endpush
    @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>
            <div class="mb-4">
                <h2 class="text-xl font-bold text-navy">Votre demande de réservation</h2>
                <p class="text-sm text-stone-500 mt-1">Réponse rapide et sans engagement - nous confirmons la disponibilité et le tarif.</p>
            </div>
            @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 x-data="resaForm()" method="POST" action="{{ route('reservation.store') }}" class="bg-white rounded-2xl shadow-sm border border-stone-100 p-6 md:p-7 space-y-6">
                @csrf
                <input type="text" name="website" class="hidden" tabindex="-1" autocomplete="off">

                {{-- Votre séjour --}}
                <div class="space-y-4">
                    <p class="text-[11px] font-bold uppercase tracking-wider text-sea">Votre séjour</p>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-stone-700 mb-1">Arrivée <span class="text-rose-500">*</span></label>
                            <input type="date" name="checkin" x-model="checkin" min="{{ $today->format('Y-m-d') }}" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 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 <span class="text-rose-500">*</span></label>
                            <input type="date" name="checkout" x-model="checkout" min="{{ $today->copy()->addDay()->format('Y-m-d') }}" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                        </div>
                    </div>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-stone-700 mb-1">Voyageurs <span class="text-rose-500">*</span></label>
                            <input type="number" name="guests" x-model.number="guests" min="1" max="6" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                            <p class="text-[11px] text-stone-400 mt-1">Capacité : 6 personnes max.</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-stone-700 mb-1">dont adultes <span class="text-rose-500">*</span></label>
                            <input type="number" name="adults" x-model.number="adults" min="1" :max="guests" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                            <p class="text-[11px] text-stone-400 mt-1">≥ 18 ans - pour la taxe de séjour.</p>
                        </div>
                    </div>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-stone-700 mb-1">Vélos <span class="text-stone-400 font-normal">(facultatif, max 4)</span></label>
                            <input type="number" name="bikes" x-model.number="bikes" min="0" max="4"
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                            <p class="text-[11px] text-stone-400 mt-1">20 €/vélo sem. 1 · −50 % sem. 2 · offerts dès la sem. 3.</p>
                        </div>
                    </div>
                    <p class="text-[11px] text-stone-400">Séjour minimum : <strong>7 nuits</strong> en juillet-août (jusqu'à 3 semaines), <strong>5 nuits</strong> en mai-juin, <strong>3 nuits</strong> le reste de l'année. <span class="text-emerald-600 font-medium">Remise longue durée : −10 % dès 15 nuits, −15 % dès 21 nuits.</span></p>
                    {{-- Récapitulatif en direct --}}
                    <template x-if="nights > 0">
                        <div class="rounded-xl border border-stone-200 bg-stone-50/70 p-4 space-y-1.5 text-sm">
                            <p class="font-semibold text-navy first-letter:uppercase" x-text="frDate(checkin) + '  →  ' + frDate(checkout)"></p>
                            <div class="flex justify-between text-stone-500"><span x-text="guests + ' voyageur' + (guests>1?'s':'')"></span><span x-text="adults + ' adulte' + (adults>1?'s':'') + (children>0 ? ', ' + children + ' enfant' + (children>1?'s':'') : '')"></span></div>
                            <div class="flex justify-between"><span class="text-stone-500"><span x-text="nights"></span> nuit<span x-show="nights>1">s</span> <span class="text-stone-400" x-text="season ? '· '+season.name : ''"></span></span><span class="text-navy font-medium"><span x-text="eur(accommodation)"></span> €</span></div>
                            <template x-if="discount > 0"><div class="flex justify-between text-emerald-600"><span x-text="'Remise longue durée −'+(discountRate*100)+'%'"></span><span x-text="'−'+eur(discount)+' €'"></span></div></template>
                            <template x-if="discount === 0 && nights > 0 && nights < 15"><p class="text-[11px] text-emerald-600">💡 −10 % dès 15 nuits, −15 % dès 21 nuits.</p></template>
                            <template x-if="bikeCost > 0"><div class="flex justify-between"><span class="text-stone-500" x-text="bikes + ' vélo' + (bikes>1?'s':'') + (weeks>=3 ? ' · offerts dès sem. 3 🎁' : (weeks>=2 ? ' · sem. 2 −50 %' : ''))"></span><span class="text-navy font-medium" x-text="'+ '+eur(bikeCost)+' €'"></span></div></template>
                            <div class="flex justify-between"><span class="text-stone-500" x-text="'Taxe de séjour (' + adults + ' adulte' + (adults>1?'s':'') + (children>0 ? ' · enfants exonérés' : '') + ')'"></span><span class="text-navy font-medium"><span x-text="taxeStr"></span> €</span></div>
                            <div class="flex justify-between border-t border-stone-200 pt-1.5 mt-1"><span class="font-bold text-navy">Total estimé</span><span class="font-bold text-navy text-base"><span x-text="eur(Math.round(total))"></span> €</span></div>
                            <template x-if="busy"><p class="mt-1 rounded-lg bg-rose-50 px-2.5 py-1.5 text-rose-700 font-semibold">❌ Ces dates sont déjà réservées - vous pouvez tout de même nous envoyer votre demande, nous vous proposerons des dates proches.</p></template>
                            <template x-if="tooShort"><p class="mt-1 rounded-lg bg-amber-50 px-2.5 py-1.5 text-amber-700 font-semibold" x-text="'⚠️ Séjour minimum de '+minNights+' nuits sur cette période.'"></p></template>
                            <template x-if="tooLong"><p class="mt-1 rounded-lg bg-amber-50 px-2.5 py-1.5 text-amber-700 font-semibold">⚠️ En juillet-août, séjour limité à 3 semaines (21 nuits).</p></template>
                            <template x-if="!busy && !tooShort && !tooLong"><p class="mt-1 text-emerald-600 font-semibold">✅ Dates disponibles</p></template>
                        </div>
                    </template>
                </div>

                {{-- Vos coordonnées --}}
                <div class="space-y-4 pt-2 border-t border-stone-100">
                    <p class="text-[11px] font-bold uppercase tracking-wider text-sea pt-2">Vos coordonnées</p>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-stone-700 mb-1">Nom <span class="text-rose-500">*</span></label>
                            <input name="name" x-model="name" value="{{ old('name') }}" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-stone-700 mb-1">Email <span class="text-rose-500">*</span></label>
                            <input type="email" name="email" x-model="email" value="{{ old('email') }}" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 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" x-model="phone" value="{{ old('phone') }}"
                               class="w-full border border-stone-300 rounded-lg px-3 py-2.5 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" x-model="message"
                                  class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">{{ old('message') }}</textarea>
                    </div>
                </div>

                <button type="submit" class="glow-cta w-full bg-sea hover:bg-navy text-white font-semibold px-6 py-3.5 rounded-full shadow transition">
                    Envoyer ma demande de réservation
                </button>

                {{-- Séparateur --}}
                <div class="flex items-center gap-3 text-xs text-stone-400">
                    <span class="flex-1 h-px bg-stone-200"></span>ou réponse immédiate<span class="flex-1 h-px bg-stone-200"></span>
                </div>

                {{-- WhatsApp --}}
                <a :href="waLink" target="_blank" rel="noopener"
                   class="flex items-center justify-center gap-2.5 w-full bg-[#25D366] hover:bg-[#1da851] text-white font-semibold px-6 py-3.5 rounded-full shadow transition">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.945C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 018.413 3.488 11.824 11.824 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.51 5.26l-.999 3.648 3.978-1.207zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
                    Discuter sur WhatsApp
                </a>
                <p class="text-xs text-stone-400 text-center">Demande sans engagement - taxe de séjour : {{ number_format(config('javapax.taxe_sejour.avant'), 2, ',', ' ') }} €/adulte/nuit ({{ number_format(config('javapax.taxe_sejour.depuis'), 2, ',', ' ') }} € pour les séjours dès {{ config('javapax.taxe_sejour.annee') }}, meublé classé 3★).</p>

                <script>
                function resaForm () {
                    var BUSY = {};
                    @json(array_keys($unavailable)).forEach(function (d) { BUSY[d] = true; });
                    return {
                        checkin: '{{ old('checkin', request('checkin')) }}',
                        checkout: '{{ old('checkout', request('checkout')) }}',
                        guests: {{ (int) old('guests', 2) }},
                        adults: {{ (int) old('adults', 2) }},
                        bikes: {{ (int) old('bikes', 0) }},
                        name: @json(old('name', '')),
                        email: @json(old('email', '')),
                        phone: @json(old('phone', '')),
                        message: @json(old('message', '')),
                        taxeCfg: @json(config('javapax.taxe_sejour')),

                        // Taxe de séjour : taux selon l'année d'arrivée (1,90 € jusqu'à 2026, 2,45 € dès 2027).
                        get taxeRate () {
                            var y = this.checkin ? new Date(this.checkin + 'T12:00:00').getFullYear() : new Date().getFullYear();
                            return y >= this.taxeCfg.annee ? this.taxeCfg.depuis : this.taxeCfg.avant;
                        },
                        get taxeRateStr () { return this.taxeRate.toFixed(2).replace('.', ','); },

                        get nights () {
                            if (!this.checkin || !this.checkout) return 0;
                            var n = Math.round((new Date(this.checkout) - new Date(this.checkin)) / 86400000);
                            return n > 0 ? n : 0;
                        },
                        // Tarifs JavaPax (cf. page Tarifs).
                        seasonFor (m) {
                            if (m === 7 || m === 8) return { name: 'Haute saison', rate: 360 };
                            if (m === 4 || m === 5) return { name: 'Printemps',    rate: 220 };
                            if (m === 6 || m === 9) return { name: 'Estival',      rate: 280 };
                            return { name: 'Automne – Hiver', rate: 170 };
                        },
                        // Séjour min/max par mois : juil-août 7→21 nuits, mai-juin 5, reste 3.
                        minFor (m) { if (m === 7 || m === 8) return 7; if (m === 5 || m === 6) return 5; return 3; },
                        maxFor (m) { return (m === 7 || m === 8) ? 21 : null; },
                        get month () { return this.checkin ? new Date(this.checkin + 'T12:00:00').getMonth() + 1 : 0; },
                        get season () { return this.checkin ? this.seasonFor(this.month) : null; },
                        get minNights () { return this.checkin ? this.minFor(this.month) : 3; },
                        get maxNights () { return this.checkin ? this.maxFor(this.month) : null; },
                        get tooShort () { return this.nights > 0 && this.nights < this.minNights; },
                        get tooLong () { return this.maxNights && this.nights > this.maxNights; },
                        get children () { return Math.max(0, (this.guests || 0) - (this.adults || 0)); },
                        get accommodation () { return this.season ? this.nights * this.season.rate : 0; },
                        get discountRate () { if (this.nights >= 21) return 0.15; if (this.nights >= 15) return 0.10; return 0; },
                        get discount () { return Math.round(this.accommodation * this.discountRate); },
                        get location () { return this.accommodation - this.discount; },
                        // Vélos : 20 € sem. 1, −50 % sem. 2, offerts dès sem. 3 (max 4, par vélo).
                        get weeks () { return Math.ceil(this.nights / 7); },
                        bikeWeekRate (w) { if (w === 1) return 20; if (w === 2) return 10; return 0; },
                        get bikePerBike () { let p = 0; for (let w = 1; w <= this.weeks; w++) p += this.bikeWeekRate(w); return p; },
                        get bikeCost () { return this.bikes > 0 && this.nights > 0 ? this.bikes * this.bikePerBike : 0; },
                        get taxeNum () { return Math.round((this.adults || 0) * this.nights * this.taxeRate * 100) / 100; },
                        get taxeStr () { return this.taxeNum.toFixed(2).replace('.', ','); },
                        get total () { return this.location + this.taxeNum + this.bikeCost; },

                        // Une nuit de [checkin, checkout[ tombe-t-elle sur une date occupée ?
                        get busy () {
                            if (!this.checkin || !this.checkout || this.nights <= 0) return false;
                            var d = new Date(this.checkin), end = new Date(this.checkout);
                            while (d < end) { if (BUSY[d.toISOString().slice(0, 10)]) return true; d.setDate(d.getDate() + 1); }
                            return false;
                        },

                        eur (n) { return new Intl.NumberFormat('fr-FR').format(n); },
                        frDate (s) {
                            if (!s) return '';
                            return new Date(s + 'T12:00:00').toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
                        },

                        get waLink () {
                            var L = ['Bonjour Alexandre,', '', 'Voici ma demande pour l\'appartement JavaPax au Moulleau.', ''];
                            if (this.checkin && this.checkout) {
                                L.push('Dates : du ' + this.frDate(this.checkin) + ' au ' + this.frDate(this.checkout));
                                L.push('Durée : ' + this.nights + ' nuit' + (this.nights > 1 ? 's' : '') + (this.season ? ' (' + this.season.name + ')' : ''));
                                L.push('Disponibilité : ' + (this.busy ? 'dates déjà réservées (demande tout de même envoyée)' : 'dates disponibles'));
                                if (this.tooShort) L.push('Remarque : séjour minimum ' + this.minNights + ' nuits sur cette période');
                                if (this.tooLong) L.push('Remarque : juillet-août, 3 semaines maximum (21 nuits)');
                            }
                            L.push('Voyageurs : ' + this.guests + ' (' + this.adults + ' adulte' + (this.adults > 1 ? 's' : '') + (this.children > 0 ? ', ' + this.children + ' enfant' + (this.children > 1 ? 's' : '') : '') + ')');
                            if (this.bikes > 0) L.push('Vélos : ' + this.bikes);
                            if (this.nights > 0 && this.season) {
                                L.push('Location : ' + this.eur(this.location) + ' € (' + this.nights + ' × ' + this.season.rate + ' €' + (this.discount > 0 ? ' −' + (this.discountRate * 100) + '%' : '') + ')');
                                if (this.bikeCost > 0) L.push('Vélos : ' + this.eur(this.bikeCost) + ' € (' + this.bikes + ' vélo' + (this.bikes > 1 ? 's' : '') + ')');
                                L.push('Taxe de séjour : ' + this.taxeStr + ' € (' + this.adults + ' × ' + this.nights + ' × ' + this.taxeRateStr + ' €, enfants exonérés)');
                                L.push('Total estimé : ' + this.eur(Math.round(this.total)) + ' €');
                            }
                            L.push('');
                            if (this.name) L.push('Nom : ' + this.name);
                            if (this.email) L.push('Email : ' + this.email);
                            if (this.phone) L.push('Téléphone : ' + this.phone);
                            if (this.message) L.push('Message : ' + this.message);
                            return 'https://wa.me/33647353370?text=' + encodeURIComponent(L.join('\n'));
                        },
                    };
                }
                </script>
            </form>
        </div>
    </div>
@endsection