@extends('layouts.app')

@section('title', 'Que voulez-vous réserver ?')

@section('content')
    <!-- =======================
         Reservation Page – multi-préselection + reCAPTCHA v3
         ======================= -->

    {{-- reCAPTCHA v3 (programmatique) --}}
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}" async defer></script>

    {{-- =========================================================
    Détermination du formulaire actif
    Priorités :
    1. old('type') après validation (préserve erreurs)
    2. query ?type=... ou ?preselect=...
    3. défaut = 'diner' (Table d’hôte gastronomique)
    Types valides : diner | cocktail | location | wecandoo
    ========================================================= --}}
    @php
        $validTypes = ['diner', 'cocktail', 'location', 'wecandoo'];
        $oldType = old('type');
        $queryType = request()->query('type') ?? request()->query('preselect');
        $activeType = 'diner'; // défaut = diner

        if ($oldType && in_array($oldType, $validTypes, true)) {
            $activeType = $oldType;
        } elseif ($queryType && in_array($queryType, $validTypes, true)) {
            $activeType = $queryType;
        }

        // Helpers d'état bouton + collapse
        $isActive = fn(string $t) => $activeType === $t;
        $btnExpanded = fn(string $t) => $isActive($t) ? 'true' : 'false';
        $btnCollapsedClass = fn(string $t) => $isActive($t) ? '' : ' collapsed';
        $collapseShowClass = fn(string $t) => $isActive($t) ? ' show' : '';

        $tableCardImages = config('offers.table_cards');
        $servicesCards = config('offers.services_cards');
    @endphp

    <section class="min-vh-100 pt-xl-9 pb-0 mb-0">
        <div class="container pt-5">

            {{-- ================= Hero Intro ================= --}}
            <div class="row align-items-center">
                <div class="col-xl-6">
                    <img src="{{ asset('img/about/fraise.svg') }}" style="max-width:100px;" alt="fraise décorative">
                    <h2 class="text-green">Que voulez-vous réserver ?</h2>
                </div>
                <div class="col-xl-6">
                    <img class="my-3 border-round-md" src="{{ asset('img/booking/privatisation.jpeg') }}"
                         alt="Justine Piluso - Réservation">
                </div>
            </div>

            {{-- Intro texte --}}
            <div class="row align-items-center">
                <div class="col-md-12">
                    <p class="mt-xl-5">
                        Choisissez votre formule : table d’hôte privée, cocktail sur-mesure, location du lieu… on construit
                        ensemble l’expérience qui vous ressemble. Quelques infos suffisent, on vous répond vite !
                    </p>
                </div>
            </div>

            {{-- ================= Cartes options (triggers collapse) ================= --}}
            <div class="row g-4 mt-5 mb-3">

                {{-- DINER TABLE D’HÔTE --}}
                <div class="col-md-6 col-xl-3 d-flex justify-content-center">
                    <button type="button"
                            class="card card-hover-shadow border-round-md shadow card-lieu w-100 text-center border-0 p-0{{ $btnCollapsedClass('diner') }}"
                            data-bs-toggle="collapse" data-bs-target="#collapse-diner"
                            aria-expanded="{{ $btnExpanded('diner') }}" aria-controls="collapse-diner">
                        <span class="card-lieu-img-wrap">
                            <img src="{{ asset($servicesCards['diner'] ?? $tableCardImages['invitation'] ?? 'img/reservation/r1.jpeg') }}"
                                 alt="Table d’hôte gastronomique"
                                 class="card-lieu-img">
                        </span>
                        <div class="card-body card-lieu-body">
                            <h5 class="mb-2">Table d’hôte gastronomique</h5>
                            <p class="small-exerge mb-0">Lieu privatisé<br>Déjeuner ou dîner<br>8 à 14 personnes</p>
                        </div>
                    </button>
                </div>

                {{-- COCKTAIL --}}
                <div class="col-md-6 col-xl-3 d-flex justify-content-center">
                    <button type="button"
                            class="card card-hover-shadow border-round-md shadow card-lieu w-100 text-center border-0 p-0{{ $btnCollapsedClass('cocktail') }}"
                            data-bs-toggle="collapse" data-bs-target="#collapse-cocktail"
                            aria-expanded="{{ $btnExpanded('cocktail') }}" aria-controls="collapse-cocktail">
                        <span class="card-lieu-img-wrap">
                            <img src="{{ asset($servicesCards['cocktail'] ?? 'img/reservation/r2.png') }}"
                                 alt="Cocktail"
                                 class="card-lieu-img">
                        </span>
                        <div class="card-body card-lieu-body">
                            <h5 class="mb-2">Cocktail</h5>
                            <p class="small-exerge mb-0">Personnalisation du lieu<br>Pièces cocktail &amp; cooking show<br>15 à 60 personnes</p>
                        </div>
                    </button>
                </div>

                {{-- LOCATION --}}
                <div class="col-md-6 col-xl-3 d-flex justify-content-center">
                    <button type="button"
                            class="card card-hover-shadow border-round-md shadow card-lieu w-100 text-center border-0 p-0{{ $btnCollapsedClass('location') }}"
                            data-bs-toggle="collapse" data-bs-target="#collapse-location"
                            aria-expanded="{{ $btnExpanded('location') }}" aria-controls="collapse-location">
                        <span class="card-lieu-img-wrap">
                            <img src="{{ asset($servicesCards['location'] ?? 'img/reservation/r3.jpeg') }}"
                                 alt="Location"
                                 class="card-lieu-img">
                        </span>
                        <div class="card-body card-lieu-body">
                            <h5 class="mb-2">Location</h5>
                            <p class="small-exerge mb-0">Tournage, shooting<br>Événement / séminaire<br>Location cuisine</p>
                        </div>
                    </button>
                </div>

                {{-- COURS DE CUISINE (Wecandoo) --}}
                <div class="col-md-6 col-xl-3 d-flex justify-content-center">
                    <button type="button"
                            class="card card-hover-shadow border-round-md shadow card-lieu w-100 text-center border-0 p-0{{ $btnCollapsedClass('wecandoo') }}"
                            data-bs-toggle="collapse" data-bs-target="#collapse-wecandoo"
                            aria-expanded="{{ $btnExpanded('wecandoo') }}" aria-controls="collapse-wecandoo">
                        <span class="card-lieu-img-wrap">
                            <img src="{{ asset($servicesCards['class'] ?? 'img/reservation/r4.jpeg') }}"
                                 alt="Cours de cuisine"
                                 class="card-lieu-img">
                        </span>
                        <div class="card-body card-lieu-body">
                            <h5 class="mb-2">Cours de cuisine</h5>
                            <p class="small-exerge mb-0">Moment privilégié avec Justine<br>Pâte fraîche &amp; ravioli<br>5 à 9 personnes</p>
                        </div>
                    </button>
                </div>

            </div>

            {{-- ================= Accordéon des formulaires ================= --}}
            <div id="reservation-collapse-group" class="my-2 mt-0">

                {{-- ====== DINER ====== --}}
                <div id="collapse-diner" class="collapse{{ $collapseShowClass('diner') }}"
                     data-bs-parent="#reservation-collapse-group">
                    <div class="card px-3 px-xl-8 py-5 my-7 border border-green border-round-sm">
                        <h6 class="text-green mb-4">Réservation de la table d’hôte gastronomique</h6>

                        {{-- erreurs ciblées --}}
                        @if ($errors->any() && old('type') === 'diner')
                            <div class="alert alert-danger">
                                <ul class="mb-0 small">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form class="row" action="{{ route('reservation.send') }}" method="POST" id="form-diner" novalidate>
                            @csrf
                            <input type="hidden" name="type" value="diner">
                            <input type="hidden" name="g-recaptcha-response">

                            {{-- Nom / Prénom --}}
                            <div class="col-12 col-md-6">
                                <input type="text" name="name" value="{{ old('name') }}"
                                       class="form-control my-2 border border-dark border-round-sm"
                                       placeholder="Nom / Prénom *" required>
                            </div>

                            {{-- Entreprise --}}
                            <div class="col-12 col-md-6">
                                <input type="text" name="company" value="{{ old('company') }}"
                                       class="form-control my-2 border border-dark border-round-sm" placeholder="Entreprise">
                            </div>

                            {{-- Email --}}
                            <div class="col-12 col-md-6">
                                <input type="email" name="email" value="{{ old('email') }}"
                                       class="form-control my-2 border border-dark border-round-sm" placeholder="Email *"
                                       required>
                            </div>

                            {{-- Téléphone --}}
                            <div class="col-12 col-md-6">
                                <input type="tel" name="telephone" value="{{ old('telephone') }}"
                                       class="form-control my-2 border border-dark border-round-sm" placeholder="Téléphone">
                            </div>

                            {{-- Date --}}
                            <div class="col-12 col-md-6">
                                <input type="date" name="date[]"
                                       class="form-control my-2 border border-dark border-round-sm" required>
                            </div>

                            {{-- Heure --}}
                            <div class="col-6">
                                <input type="text" name="hour" value="{{ old('hour') }}"
                                       class="form-control my-2 border border-dark border-round-sm" placeholder="Heure *"
                                       required>
                            </div>

                            {{-- Convives --}}
                            <div class="col-6">
                                <input id="convives-diner" type="number" name="guests" value="{{ old('guests') }}"
                                       class="form-control my-2 border border-dark border-round-sm"
                                       placeholder="Nombre de convives" required>
                            </div>

                            {{-- Date flexible --}}
                            <div class="col-6 d-flex align-items-center">
                                <div class="form-check my-2">
                                    <input class="form-check-input" type="checkbox" name="flexible" value="1"
                                           id="flexible-diner" @checked(old('flexible'))>
                                    <label class="form-check-label small" for="flexible-diner">Date flexible</label>
                                </div>
                            </div>

                            {{-- Message --}}
                            <div class="col-12">
                                <textarea name="message" class="form-control my-2 border border-dark border-round-sm"
                                          placeholder="Autre chose à nous dire" rows="3">{{ old('message') }}</textarea>
                            </div>

                            {{-- Submit --}}
                            <div class="col-12 d-flex pt-3 justify-content-center">
                                <button type="submit" class="btn btn-sm btn-primary p-3">
                                    Envoyer la demande
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- ====== COCKTAIL ====== --}}
                <div id="collapse-cocktail" class="collapse{{ $collapseShowClass('cocktail') }}"
                     data-bs-parent="#reservation-collapse-group">
                    <div class="card px-3 px-xl-8 py-5 my-7 border border-green border-round-sm">
                        <h6 class="text-green mb-4">Réservation du cocktail dînatoire</h6>

                        @if ($errors->any() && old('type') === 'cocktail')
                            <div class="alert alert-danger" role="alert" id="errors-cocktail">
                                <ul class="mb-0 small">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form class="row" action="{{ route('reservation.send') }}" method="POST" id="form-cocktail" novalidate @if ($errors->any() && old('type') === 'cocktail') aria-describedby="errors-cocktail" @endif>
                            @csrf
                            <input type="hidden" name="type" value="cocktail">
                            <input type="hidden" name="g-recaptcha-response">

                            {{-- Nom / Prénom --}}
                            <div class="col-12 col-md-6">
                                <input type="text" name="name" value="{{ old('name') }}"
                                       class="form-control my-2 border border-dark border-round-sm"
                                       placeholder="Nom / Prénom *" required>
                            </div>

                            {{-- Entreprise --}}
                            <div class="col-12 col-md-6">
                                <input type="text" name="company" value="{{ old('company') }}"
                                       class="form-control my-2 border border-dark border-round-sm" placeholder="Entreprise">
                            </div>

                            {{-- Email --}}
                            <div class="col-12 col-md-6">
                                <input type="email" name="email" value="{{ old('email') }}"
                                       class="form-control my-2 border border-dark border-round-sm" placeholder="Email *"
                                       required>
                            </div>

                            {{-- Téléphone --}}
                            <div class="col-12 col-md-6">
                                <input type="tel" name="telephone" value="{{ old('telephone') }}"
                                       class="form-control my-2 border border-dark border-round-sm" placeholder="Téléphone">
                            </div>

                            {{-- Date --}}
                            <div class="col-12 col-md-6">
                                <input type="date" name="date[]"
                                       class="form-control my-2 border border-dark border-round-sm" required>
                            </div>

                            {{-- Heure --}}
                            <div class="col-6 col-md-3">
                                <input type="text" name="hour" value="{{ old('hour') }}"
                                       class="form-control my-2 border border-dark border-round-sm" placeholder="Heure *"
                                       required>
                            </div>

                            {{-- Date flexible --}}
                            <div class="col-6 col-md-3 d-flex align-items-center">
                                <div class="form-check my-2">
                                    <input class="form-check-input" type="checkbox" name="flexible" value="1"
                                           id="flexible-cocktail" @checked(old('flexible'))>
                                    <label class="form-check-label small" for="flexible-cocktail">Date flexible</label>
                                </div>
                            </div>

                            {{-- Convives (15-60) --}}
                            <div class="col-12 col-md-6">
                                <input id="convives-cocktail" type="number" name="guests" value="{{ old('guests') }}"
                                       class="form-control my-2 border border-dark border-round-sm" min="15" max="60" step="1"
                                       required placeholder="Nombre de convives (15 à 60)">
                            </div>

                            {{-- Message --}}
                            <div class="col-12">
                                <textarea name="message" class="form-control my-2 border border-dark border-round-sm"
                                          rows="3" placeholder="Autre chose à nous dire">{{ old('message') }}</textarea>
                            </div>

                            {{-- Submit --}}
                            <div class="col-12 d-flex pt-3 justify-content-center">
                                <button type="submit" class="btn btn-sm btn-primary p-3">
                                    Envoyer la demande
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- ========== LOCATION ========== --}}
                <div id="collapse-location" class="collapse{{ $collapseShowClass('location') }}"
                     data-bs-parent="#reservation-collapse-group">
                    <div class="card px-3 px-xl-8 py-5 my-7 border border-green border-round-sm">
                        <h6 class="text-green mb-4">Location du lieu</h6>

                        @if ($errors->any() && old('type') === 'location')
                            <div class="alert alert-danger">
                                <ul class="mb-0 small">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form class="row" action="{{ route('reservation.send') }}" method="POST" id="form-location" novalidate>
                            @csrf
                            <input type="hidden" name="type" value="location">
                            <input type="hidden" name="g-recaptcha-response">

                            {{-- Nom / Prénom --}}
                            <div class="col-12 col-md-6">
                                <input type="text" name="name" value="{{ old('name') }}"
                                       class="form-control my-2 border border-dark border-round-sm"
                                       placeholder="Nom / Prénom *" required>
                            </div>

                            {{-- Entreprise --}}
                            <div class="col-12 col-md-6">
                                <input type="text" name="company" value="{{ old('company') }}"
                                       class="form-control my-2 border border-dark border-round-sm" placeholder="Entreprise">
                            </div>

                            {{-- Email --}}
                            <div class="col-12 col-md-6">
                                <input type="email" name="email" value="{{ old('email') }}"
                                       class="form-control my-2 border border-dark border-round-sm" placeholder="Email *"
                                       required>
                            </div>

                            {{-- Téléphone --}}
                            <div class="col-12 col-md-6">
                                <input type="tel" name="telephone" value="{{ old('telephone') }}"
                                       class="form-control my-2 border border-dark border-round-sm"
                                       placeholder="Téléphone (ex : +33 6 12 34 56 78)" pattern="^(\+?\d{1,3}\s?)?0?\d{9}$">
                            </div>

                            <span>Vous pouvez proposer plusieurs dates</span>
                            {{-- Dates multiples --}}
                            <div class="col-12 col-md-4">
                                <input type="date" name="date[]" value="{{ old('date.0') }}"
                                       class="form-control my-2 border border-dark border-round-sm" required>
                            </div>
                            <div class="col-12 col-md-4">
                                <input type="date" name="date[]" value="{{ old('date.1') }}"
                                       class="form-control my-2 border border-dark border-round-sm">
                            </div>
                            <div class="col-12 col-md-4">
                                <input type="date" name="date[]" value="{{ old('date.2') }}"
                                       class="form-control my-2 border border-dark border-round-sm">
                            </div>

                            {{-- Date flexible --}}
                            <div class="col-12 col-md-3 d-flex align-items-center">
                                <div class="form-check my-2">
                                    <input class="form-check-input" type="checkbox" name="flexible" value="1"
                                           id="flexible-location" @checked(old('flexible'))>
                                    <label class="form-check-label small" for="flexible-location">Dates flexibles</label>
                                </div>
                            </div>

                            {{-- Horaires --}}
                            <div class="col-12 col-md-3">
                                <input type="text" name="hours" value="{{ old('hours') }}"
                                       class="form-control my-2 border border-dark border-round-sm"
                                       placeholder="Horaires * (ex : 09h-18h)" required pattern="^\d{2}h-\d{2}h$">
                            </div>

                            {{-- Nombre de personnes (optionnel) --}}
                            <div class="col-12 col-md-6">
                                <input id="convives-location" type="number" name="guests" value="{{ old('guests') }}"
                                       class="form-control my-2 border border-dark border-round-sm"
                                       placeholder="Nb de personnes (si pertinent)">
                            </div>

                            {{-- Message --}}
                            <div class="col-12">
                                <textarea name="message" class="form-control my-2 border border-dark border-round-sm"
                                          placeholder="Ajouter un message à votre envoi" rows="3">{{ old('message') }}</textarea>
                            </div>

                            {{-- Submit --}}
                            <div class="col-12 d-flex pt-3 justify-content-center">
                                <button type="submit" class="btn btn-sm btn-primary p-3">
                                    Envoyer la demande
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- ====== COURS DE CUISINE (Wecandoo) ====== --}}
                <div id="collapse-wecandoo" class="collapse{{ $collapseShowClass('wecandoo') }}"
                     data-bs-parent="#reservation-collapse-group">
                    <div class="card px-3 px-xl-8 py-5 my-7 border border-green border-round-sm">
                        <h6 class="text-green mb-4">
                            Réservation d’un cours de cuisine avec Justine (Wecandoo)
                        </h6>

                        {{-- Iframe desktop --}}
                        <div class="ratio ratio-16x9 d-none d-md-block">
                            <iframe id="wecandoo-widget"
                                    title="Réalisez vos pâtes fraîches avec Justine Piluso - Wecandoo"
                                    src="https://booking.wecandoo.com/artisans/b3d2370a-e6ec-4be4-bfb4-45994ed5fc40/workshops/1b66fd4c-cd88-4a9c-b30f-bab92e13fcf6/book"
                                    loading="lazy" allowfullscreen style="border:0;"></iframe>
                        </div>

                        {{-- Iframe mobile --}}
                        <div class="d-md-none">
                            <iframe id="wecandoo-widget-mobile"
                                    title="Réalisez vos pâtes fraîches avec Justine Piluso - Wecandoo (mobile)"
                                    src="https://booking.wecandoo.com/artisans/b3d2370a-e6ec-4be4-bfb4-45994ed5fc40/workshops/1b66fd4c-cd88-4a9c-b30f-bab92e13fcf6/book"
                                    loading="lazy" height="600" width="100%" allowfullscreen style="border:0;"></iframe>
                        </div>

                        <noscript class="small d-block mt-3">
                            JavaScript est désactivé. Accédez à la réservation :
                            <a href="https://www.wecandoo.fr/atelier/bordeaux-cuisine-pates-justine-piluso" target="_blank" rel="noopener">
                                Page Wecandoo
                            </a>.
                        </noscript>
                    </div>
                </div>

            </div>{{-- /#reservation-collapse-group --}}

            {{-- Flash succès global --}}
            @if(session('success'))
                <div class="alert alert-success mt-4">{{ session('success') }}</div>
            @endif

        </div>
    </section>

    <section>
        @include('layouts.what')
    </section>

    {{-- ================= JS comportement : scroll + pré-ouverture ================= --}}
    <script>
        (function () {
            function getHeaderOffset() {
                const fixedHeader = document.querySelector('.navbar, header.sticky-top, .site-header');
                return fixedHeader ? fixedHeader.offsetHeight : 0;
            }
            function scrollToCollapse(el) {
                if (!el) return;
                const margin = 16;
                const headerOffset = getHeaderOffset();
                const y = el.getBoundingClientRect().top + window.pageYOffset - headerOffset - margin;
                window.scrollTo({ top: y, behavior: 'smooth' });
            }
            document.addEventListener('shown.bs.collapse', function (e) {
                const target = e.target;
                if (target.id) {
                    history.replaceState(null, '', '#' + target.id);
                }
                scrollToCollapse(target);
            });
            function openCollapseById(id) {
                const el = document.getElementById(id);
                if (!el) return false;
                if (!el.classList.contains('show')) {
                    const collapse = bootstrap.Collapse.getOrCreateInstance(el, { toggle: true });
                    collapse.show();
                } else {
                    scrollToCollapse(el);
                }
                return true;
            }
            function getQueryParam(name) {
                const params = new URLSearchParams(window.location.search);
                return params.get(name);
            }
            document.addEventListener('DOMContentLoaded', function () {
                // 1. Hash prioritaire
                const hash = window.location.hash;
                if (hash) {
                    const id = hash.replace('#', '');
                    if (openCollapseById(id)) return;
                }
                // 2. ?type= ou ?preselect=
                const type = getQueryParam('type') || getQueryParam('preselect');
                if (type) {
                    const map = {
                        'diner': 'collapse-diner',
                        'cocktail': 'collapse-cocktail',
                        'location': 'collapse-location',
                        'wecandoo': 'collapse-wecandoo'
                    };
                    if (map[type]) {
                        if (openCollapseById(map[type])) return;
                    }
                }
                // 3. Fallback : collapse actif (côté serveur)
                const shown = document.querySelector('#reservation-collapse-group .collapse.show');
                if (shown) scrollToCollapse(shown);
            });
        })();
    </script>

    {{-- ================= reCAPTCHA v3 – binding par formulaire ================= --}}
    <script>
        (function () {
            const siteKey = "{{ config('services.recaptcha.site_key') }}";

            function bindRecaptcha(formId, actionName) {
                const form = document.getElementById(formId);
                if (!form) return;

                const submitBtn = form.querySelector('button[type="submit"]');
                const field = form.querySelector('input[name="g-recaptcha-response"]');

                form.addEventListener('submit', function (e) {
                    // Évite double clics / soumissions
                    if (submitBtn) submitBtn.disabled = true;

                    e.preventDefault();
                    if (!window.grecaptcha) {
                        // Si reCAPTCHA pas encore chargé, réessaye rapidement
                        if (submitBtn) submitBtn.disabled = false;
                        return;
                    }

                    grecaptcha.ready(function () {
                        grecaptcha.execute(siteKey, { action: actionName }).then(function (token) {
                            if (field) field.value = token;
                            form.submit();
                        }).catch(function () {
                            if (submitBtn) submitBtn.disabled = false;
                        });
                    });
                });
            }

            // Bind pour chaque formulaire
            document.addEventListener('DOMContentLoaded', function () {
                bindRecaptcha('form-diner', 'reservation_diner');
                bindRecaptcha('form-cocktail', 'reservation_cocktail');
                bindRecaptcha('form-location', 'reservation_location');
            });
        })();
    </script>
@endsection