@extends('layouts.app')

@section('content')
<div class="lg:grid lg:grid-cols-12 lg:gap-8 items-start">

    <aside class="hidden lg:block lg:col-span-5 lg:sticky lg:top-6 space-y-5">
        @if (file_exists(public_path('images/flyer-soiree-retro.jpg')))
        <div class="rounded-2xl overflow-hidden shadow-poster ring-4 ring-white/20">
            <img src="{{ asset('images/flyer-soiree-retro.jpg') }}"
                alt="Affiche Soirée Rétro 80 90 2000 — 26 septembre 2026, Salle des fêtes d'Esmans"
                class="w-full h-auto block">
        </div>
        @else
        <div class="text-center py-6">
            <h1 class="font-display font-extrabold text-3xl md:text-4xl title-neon">SOIRÉE RÉTRO</h1>
            <p class="font-slogan text-retro-yellow text-xl mt-2">80 • 90 • 2000</p>
        </div>
        @endif

        <div class="grid grid-cols-1 gap-3">
            <div class="info-pill rounded-2xl px-4 py-3 text-white text-center">
                <p class="font-display text-lg leading-tight">Samedi 26 septembre 2026</p>
                <p class="font-body text-sm font-semibold opacity-95">à partir de 19h30</p>
            </div>
            <div class="info-pill-cyan rounded-2xl px-4 py-3 text-retro-navy text-center">
                <p class="font-display text-base leading-tight">Salle des fêtes</p>
                <p class="font-body text-sm font-semibold">Esmans</p>
            </div>
        </div>

        <div class="rounded-2xl p-5 text-white bg-gradient-to-br from-retro-violet to-retro-navy border-2 border-white/15">
            <p class="font-slogan text-retro-yellow text-xl text-center">Un bon repas et une soirée de folie !</p>
            <div class="mt-4 grid grid-cols-2 gap-3 text-center">
                <div class="bg-white/10 rounded-xl px-3 py-3">
                    <p class="font-display text-2xl text-retro-yellow">20€</p>
                    <p class="font-body text-xs font-semibold">Adulte</p>
                </div>
                <div class="bg-white/10 rounded-xl px-3 py-3">
                    <p class="font-display text-2xl text-retro-cyan">5€</p>
                    <p class="font-body text-xs font-semibold">Enfant ≤ 12 ans</p>
                </div>
            </div>
            <ul class="mt-4 space-y-2 font-body text-sm">
                <li>Apéritif offert pour tous</li>
                <li>Vins à table inclus</li>
                <li>Soirée animée par un DJ</li>
                <li>Inscriptions avant le <strong>17 septembre 2026</strong></li>
            </ul>
        </div>
    </aside>

    <div class="lg:col-span-7">
        <div class="lg:hidden mb-5 space-y-3">
            <h1 class="font-display text-2xl title-neon text-center">SOIRÉE RÉTRO</h1>
            <p class="font-slogan text-retro-yellow text-center">80 • 90 • 2000</p>
            <div class="grid grid-cols-2 gap-2">
                <div class="info-pill rounded-xl px-3 py-2 text-white text-center text-sm font-semibold">26 sept. · 19h30</div>
                <div class="info-pill-cyan rounded-xl px-3 py-2 text-retro-navy text-center text-sm font-semibold">Salle des fêtes</div>
            </div>
        </div>

        <div class="form-card rounded-3xl shadow-card overflow-hidden">
            <div class="bg-gradient-to-r from-retro-pink to-retro-violet px-6 py-5 text-white">
                <h2 class="font-display text-2xl md:text-3xl">Inscription en ligne</h2>
                <p class="font-body text-sm text-white/85 mt-1">Réservez votre repas avant le 17 septembre 2026</p>
            </div>

            <div class="p-6 md:p-8">
                @if (session('success'))
                    <div class="mb-6 flex gap-3 items-start bg-emerald-50 border-2 border-emerald-200 text-emerald-800 px-4 py-4 rounded-2xl font-body">
                        <span class="text-2xl shrink-0">✓</span>
                        <p class="text-sm leading-relaxed">{{ session('success') }}</p>
                    </div>
                @endif

                @if (session('error'))
                    <div class="mb-6 bg-red-50 border-2 border-red-200 text-red-700 px-4 py-3 rounded-2xl font-body text-sm">
                        {{ session('error') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="mb-6 bg-red-50 border-2 border-red-200 text-red-700 px-4 py-4 rounded-2xl font-body text-sm">
                        <p class="font-bold mb-2">Veuillez corriger les points suivants :</p>
                        <ul class="list-disc list-inside space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form method="POST" action="{{ route('inscriptions.store') }}" class="space-y-8" id="inscription-form">
                    @csrf

                    <section class="section-card rounded-2xl p-5 md:p-6">
                        <h3 class="font-display text-lg text-retro-purple flex items-center gap-2 mb-5">
                            <span class="w-8 h-8 rounded-lg bg-retro-pink/15 text-retro-pink flex items-center justify-center text-base">1</span>
                            Vos coordonnées
                        </h3>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="nom" class="block text-sm font-bold text-slate-600 mb-1.5">Nom</label>
                                <input id="nom" type="text" name="nom" value="{{ old('nom') }}" required
                                    class="input-field @error('nom') input-error @enderror" autocomplete="family-name">
                            </div>
                            <div>
                                <label for="prenom" class="block text-sm font-bold text-slate-600 mb-1.5">Prénom</label>
                                <input id="prenom" type="text" name="prenom" value="{{ old('prenom') }}" required
                                    class="input-field @error('prenom') input-error @enderror" autocomplete="given-name">
                            </div>
                            <div class="sm:col-span-2">
                                <label for="adresse" class="block text-sm font-bold text-slate-600 mb-1.5">Adresse</label>
                                <input id="adresse" type="text" name="adresse" value="{{ old('adresse') }}" required
                                    class="input-field @error('adresse') input-error @enderror" autocomplete="street-address">
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-bold text-slate-600 mb-1.5">Email</label>
                                <input id="email" type="email" name="email" value="{{ old('email') }}" required
                                    class="input-field @error('email') input-error @enderror" autocomplete="email">
                            </div>
                            <div>
                                <label for="telephone" class="block text-sm font-bold text-slate-600 mb-1.5">Téléphone</label>
                                <input id="telephone" type="tel" name="telephone" value="{{ old('telephone') }}" required
                                    class="input-field @error('telephone') input-error @enderror" autocomplete="tel"
                                    placeholder="06 12 34 56 78">
                                <p class="mt-1 text-xs text-slate-500">Nécessaire pour l'envoi du lien de paiement par SMS</p>
                            </div>
                        </div>
                    </section>

                    <section class="section-card rounded-2xl p-5 md:p-6">
                        <h3 class="font-display text-lg text-retro-purple flex items-center gap-2 mb-5">
                            <span class="w-8 h-8 rounded-lg bg-retro-pink/15 text-retro-pink flex items-center justify-center text-base">2</span>
                            Participants
                        </h3>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-bold text-slate-600 mb-3 text-center">Adultes — 20€</label>
                                <div class="flex items-center justify-center gap-4">
                                    <button type="button" class="btn-step" data-step="-1" data-target="nb_adultes" aria-label="Retirer un adulte">−</button>
                                    <input id="nb_adultes" type="number" name="nb_adultes" min="0" max="30"
                                        value="{{ old('nb_adultes', 1) }}" required
                                        class="w-16 text-center text-3xl font-display text-retro-purple border-0 bg-transparent focus:outline-none focus:ring-0">
                                    <button type="button" class="btn-step" data-step="1" data-target="nb_adultes" aria-label="Ajouter un adulte">+</button>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-600 mb-3 text-center">Enfants ≤ 12 ans — 5€</label>
                                <div class="flex items-center justify-center gap-4">
                                    <button type="button" class="btn-step" data-step="-1" data-target="nb_enfants" aria-label="Retirer un enfant">−</button>
                                    <input id="nb_enfants" type="number" name="nb_enfants" min="0" max="30"
                                        value="{{ old('nb_enfants', 0) }}" required
                                        class="w-16 text-center text-3xl font-display text-retro-purple border-0 bg-transparent focus:outline-none focus:ring-0">
                                    <button type="button" class="btn-step" data-step="1" data-target="nb_enfants" aria-label="Ajouter un enfant">+</button>
                                </div>
                            </div>
                        </div>

                        <div id="montant-display" class="price-badge rounded-2xl px-6 py-4 text-center text-white mt-6">
                            <p class="font-body text-sm font-semibold uppercase tracking-wide opacity-90">Montant à régler</p>
                            <p class="font-display text-4xl mt-1"><span id="montant-value">20</span> €</p>
                            <p class="font-body text-xs opacity-80 mt-1" id="montant-detail">20 € × 1 adulte</p>
                        </div>
                    </section>

                    <section id="menus-adultes" class="section-card rounded-2xl p-5 md:p-6">
                        <h3 class="font-display text-lg text-retro-purple flex items-center gap-2 mb-2">
                            <span class="w-8 h-8 rounded-lg bg-retro-pink/15 text-retro-pink flex items-center justify-center text-base">3</span>
                            Menus adultes
                        </h3>
                        <p class="text-sm text-slate-500 mb-4">Choisissez un plat et un dessert par adulte. Apéritif buffet offert.</p>

                        <p class="text-xs font-bold uppercase tracking-wide text-slate-500 mb-2">Plats</p>
                        @php
                            $platsAdultes = [
                                'plat_volaille' => ['Suprême de volaille', 'Senteur de sous-bois, écrasé de pommes de terre aux herbes'],
                                'plat_jambon' => ['Jambon rôti aux herbes', 'Sauce au porto, pommes grenailles au sel de Guérande'],
                                'plat_cabillaud' => ['Dos de cabillaud rôti', 'Sauce au beurre blanc, farandole de légumes'],
                            ];
                        @endphp
                        <div class="space-y-2 mb-5" data-group="plats-adultes">
                            @foreach ($platsAdultes as $name => $info)
                            <div class="flex items-center gap-3 p-3 rounded-xl bg-white border border-retro-pink/10">
                                <div class="flex-1 min-w-0">
                                    <p class="font-bold text-sm text-slate-700">{{ $info[0] }}</p>
                                    <p class="text-xs text-slate-500">{{ $info[1] }}</p>
                                </div>
                                <div class="flex items-center gap-2 shrink-0">
                                    <button type="button" class="btn-step !w-9 !h-9 !text-base" data-step="-1" data-target="{{ $name }}">−</button>
                                    <input id="{{ $name }}" type="number" name="{{ $name }}" min="0" max="30"
                                        value="{{ old($name, 0) }}" class="qty-input w-10 text-center font-display text-lg text-retro-purple border-0 bg-transparent">
                                    <button type="button" class="btn-step !w-9 !h-9 !text-base" data-step="1" data-target="{{ $name }}">+</button>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <p class="text-sm font-semibold mb-5" id="recap-plats-adultes"></p>

                        <p class="text-xs font-bold uppercase tracking-wide text-slate-500 mb-2">Desserts</p>
                        @php
                            $dessertsAdultes = [
                                'dessert_tarte' => ['Tarte fine aux pommes', 'Cannelle et glace vanille'],
                                'dessert_chocolat' => ['Entremet chocolat', 'Croustillant praliné et crème anglaise'],
                            ];
                        @endphp
                        <div class="space-y-2" data-group="desserts-adultes">
                            @foreach ($dessertsAdultes as $name => $info)
                            <div class="flex items-center gap-3 p-3 rounded-xl bg-white border border-retro-pink/10">
                                <div class="flex-1 min-w-0">
                                    <p class="font-bold text-sm text-slate-700">{{ $info[0] }}</p>
                                    <p class="text-xs text-slate-500">{{ $info[1] }}</p>
                                </div>
                                <div class="flex items-center gap-2 shrink-0">
                                    <button type="button" class="btn-step !w-9 !h-9 !text-base" data-step="-1" data-target="{{ $name }}">−</button>
                                    <input id="{{ $name }}" type="number" name="{{ $name }}" min="0" max="30"
                                        value="{{ old($name, 0) }}" class="qty-input w-10 text-center font-display text-lg text-retro-purple border-0 bg-transparent">
                                    <button type="button" class="btn-step !w-9 !h-9 !text-base" data-step="1" data-target="{{ $name }}">+</button>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <p class="text-sm font-semibold mt-3" id="recap-desserts-adultes"></p>
                    </section>

                    <section id="menus-enfants" class="section-card rounded-2xl p-5 md:p-6">
                        <h3 class="font-display text-lg text-retro-purple flex items-center gap-2 mb-2">
                            <span class="w-8 h-8 rounded-lg bg-retro-cyan/20 text-retro-cyan-deep flex items-center justify-center text-base">4</span>
                            Menus enfants
                        </h3>
                        <p class="text-sm text-slate-500 mb-4">Choisissez un plat et un dessert par enfant (12 ans et moins).</p>

                        <p class="text-xs font-bold uppercase tracking-wide text-slate-500 mb-2">Plats</p>
                        @php
                            $platsEnfants = [
                                'plat_hamburger' => ['Hamburger', ''],
                                'plat_poulet' => ['Aiguillettes de poulet panées', 'Accompagnées de potatoes'],
                            ];
                        @endphp
                        <div class="space-y-2 mb-5" data-group="plats-enfants">
                            @foreach ($platsEnfants as $name => $info)
                            <div class="flex items-center gap-3 p-3 rounded-xl bg-white border border-retro-cyan/20">
                                <div class="flex-1 min-w-0">
                                    <p class="font-bold text-sm text-slate-700">{{ $info[0] }}</p>
                                    @if ($info[1] !== '')
                                        <p class="text-xs text-slate-500">{{ $info[1] }}</p>
                                    @endif
                                </div>
                                <div class="flex items-center gap-2 shrink-0">
                                    <button type="button" class="btn-step !w-9 !h-9 !text-base" data-step="-1" data-target="{{ $name }}">−</button>
                                    <input id="{{ $name }}" type="number" name="{{ $name }}" min="0" max="30"
                                        value="{{ old($name, 0) }}" class="qty-input w-10 text-center font-display text-lg text-retro-purple border-0 bg-transparent">
                                    <button type="button" class="btn-step !w-9 !h-9 !text-base" data-step="1" data-target="{{ $name }}">+</button>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <p class="text-sm font-semibold mb-5" id="recap-plats-enfants"></p>

                        <p class="text-xs font-bold uppercase tracking-wide text-slate-500 mb-2">Desserts</p>
                        @php
                            $dessertsEnfants = [
                                'dessert_mousse' => ['Mousse au chocolat', ''],
                                'dessert_tarte_enfant' => ['Tarte aux pommes', ''],
                            ];
                        @endphp
                        <div class="space-y-2" data-group="desserts-enfants">
                            @foreach ($dessertsEnfants as $name => $info)
                            <div class="flex items-center gap-3 p-3 rounded-xl bg-white border border-retro-cyan/20">
                                <div class="flex-1 min-w-0">
                                    <p class="font-bold text-sm text-slate-700">{{ $info[0] }}</p>
                                </div>
                                <div class="flex items-center gap-2 shrink-0">
                                    <button type="button" class="btn-step !w-9 !h-9 !text-base" data-step="-1" data-target="{{ $name }}">−</button>
                                    <input id="{{ $name }}" type="number" name="{{ $name }}" min="0" max="30"
                                        value="{{ old($name, 0) }}" class="qty-input w-10 text-center font-display text-lg text-retro-purple border-0 bg-transparent">
                                    <button type="button" class="btn-step !w-9 !h-9 !text-base" data-step="1" data-target="{{ $name }}">+</button>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <p class="text-sm font-semibold mt-3" id="recap-desserts-enfants"></p>
                    </section>

                    <section class="section-card rounded-2xl p-5 md:p-6">
                        <h3 class="font-display text-lg text-retro-purple flex items-center gap-2 mb-5">
                            <span class="w-8 h-8 rounded-lg bg-retro-pink/15 text-retro-pink flex items-center justify-center text-base">5</span>
                            Paiement
                        </h3>

                        <div class="space-y-3">
                            <label class="payment-card flex items-start gap-3 p-4 rounded-2xl cursor-pointer">
                                <input type="radio" name="paiement" value="en_ligne" class="mt-1"
                                    {{ old('paiement', 'en_ligne') === 'en_ligne' ? 'checked' : '' }} required>
                                <span>
                                    <span class="block font-bold text-slate-800">Paiement en ligne</span>
                                    <span class="block text-sm text-slate-500 mt-0.5">Un lien de paiement vous sera envoyé par SMS.</span>
                                </span>
                            </label>
                            <label class="payment-card flex items-start gap-3 p-4 rounded-2xl cursor-pointer">
                                <input type="radio" name="paiement" value="domicile" class="mt-1"
                                    {{ old('paiement') === 'domicile' ? 'checked' : '' }}>
                                <span>
                                    <span class="block font-bold text-slate-800">Paiement à domicile</span>
                                    <span class="block text-sm text-slate-500 mt-0.5">18 rue Brette ou 8 rue de Canne — CB, chèque ou espèces.</span>
                                </span>
                            </label>
                        </div>

                        <div id="paiement-sms" class="mt-4 rounded-xl bg-retro-cyan/10 border border-retro-cyan/40 px-4 py-3 text-sm text-slate-700">
                            Après validation, un SMS contenant le lien de paiement sera envoyé au numéro indiqué.
                        </div>
                        <div id="paiement-domicile" class="mt-4 space-y-4 hidden">
                            <div>
                                <p class="text-sm font-bold text-slate-600 mb-2">Lieu de règlement</p>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                    <label class="payment-card flex items-center gap-3 p-3 rounded-xl cursor-pointer">
                                        <input type="radio" name="paiement_lieu" value="rue_brette" class="shrink-0"
                                            {{ old('paiement_lieu') === 'rue_brette' ? 'checked' : '' }}>
                                        <span class="font-semibold text-slate-800">18 rue Brette</span>
                                    </label>
                                    <label class="payment-card flex items-center gap-3 p-3 rounded-xl cursor-pointer">
                                        <input type="radio" name="paiement_lieu" value="rue_canne" class="shrink-0"
                                            {{ old('paiement_lieu') === 'rue_canne' ? 'checked' : '' }}>
                                        <span class="font-semibold text-slate-800">8 rue de Canne</span>
                                    </label>
                                </div>
                            </div>
                            <div>
                                <p class="text-sm font-bold text-slate-600 mb-2">Mode de règlement</p>
                                <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                                    <label class="payment-card flex items-center gap-3 p-3 rounded-xl cursor-pointer">
                                        <input type="radio" name="paiement_moyen" value="cb" class="shrink-0"
                                            {{ old('paiement_moyen') === 'cb' ? 'checked' : '' }}>
                                        <span class="font-semibold text-slate-800">CB</span>
                                    </label>
                                    <label class="payment-card flex items-center gap-3 p-3 rounded-xl cursor-pointer">
                                        <input type="radio" name="paiement_moyen" value="cheque" class="shrink-0"
                                            {{ old('paiement_moyen') === 'cheque' ? 'checked' : '' }}>
                                        <span class="font-semibold text-slate-800">Chèque</span>
                                    </label>
                                    <label class="payment-card flex items-center gap-3 p-3 rounded-xl cursor-pointer">
                                        <input type="radio" name="paiement_moyen" value="especes" class="shrink-0"
                                            {{ old('paiement_moyen') === 'especes' ? 'checked' : '' }}>
                                        <span class="font-semibold text-slate-800">Espèces</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </section>

                    <div class="rounded-2xl border-2 border-dashed border-retro-pink/40 bg-retro-pink/5 p-4">
                        <p class="text-sm text-slate-600 font-body leading-relaxed">
                            <strong class="text-retro-pink-deep">Le paiement est obligatoire pour réserver.</strong>
                            Aucune réservation ne sera prise en compte sans règlement.
                        </p>
                    </div>

                    <button type="submit"
                        class="w-full bg-gradient-to-r from-retro-pink to-retro-violet text-white py-4 rounded-2xl font-display text-xl
                        shadow-lg hover:shadow-neon hover:brightness-105 focus:outline-none focus:ring-4 focus:ring-retro-pink/40
                        transition-all duration-200 active:scale-[0.99]">
                        Valider mon inscription
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
const PRIX_ADULTE = 20;
const PRIX_ENFANT = 5;
const MIN = 0;
const MAX = 30;

const platsAdultes = ['plat_volaille', 'plat_jambon', 'plat_cabillaud'];
const dessertsAdultes = ['dessert_tarte', 'dessert_chocolat'];
const platsEnfants = ['plat_hamburger', 'plat_poulet'];
const dessertsEnfants = ['dessert_mousse', 'dessert_tarte_enfant'];

function val(id) {
    return parseInt(document.getElementById(id).value, 10) || 0;
}

function setVal(id, value) {
    document.getElementById(id).value = Math.min(MAX, Math.max(MIN, value));
}

function sum(ids) {
    return ids.reduce((total, id) => total + val(id), 0);
}

function recap(elId, current, expected, label) {
    const el = document.getElementById(elId);
    const ok = current === expected;
    el.className = 'text-sm font-semibold ' + (ok ? 'qty-ok' : 'qty-ko');
    el.textContent = current + ' / ' + expected + ' ' + label + (ok ? ' — c’est bon' : ' à sélectionner');
}

function updateForm() {
    const adultes = val('nb_adultes');
    const enfants = val('nb_enfants');
    const montant = (adultes * PRIX_ADULTE) + (enfants * PRIX_ENFANT);

    document.getElementById('montant-value').textContent = montant;

    const parts = [];
    if (adultes > 0) parts.push(PRIX_ADULTE + ' € × ' + adultes + ' adulte' + (adultes > 1 ? 's' : ''));
    if (enfants > 0) parts.push(PRIX_ENFANT + ' € × ' + enfants + ' enfant' + (enfants > 1 ? 's' : ''));
    document.getElementById('montant-detail').textContent = parts.join(' + ') || 'Aucun participant';

    document.getElementById('menus-adultes').classList.toggle('hidden', adultes === 0);
    document.getElementById('menus-enfants').classList.toggle('hidden', enfants === 0);

    if (adultes === 0) {
        platsAdultes.concat(dessertsAdultes).forEach((id) => setVal(id, 0));
    }
    if (enfants === 0) {
        platsEnfants.concat(dessertsEnfants).forEach((id) => setVal(id, 0));
    }

    recap('recap-plats-adultes', sum(platsAdultes), adultes, 'plat(s)');
    recap('recap-desserts-adultes', sum(dessertsAdultes), adultes, 'dessert(s)');
    recap('recap-plats-enfants', sum(platsEnfants), enfants, 'plat(s)');
    recap('recap-desserts-enfants', sum(dessertsEnfants), enfants, 'dessert(s)');

    const enLigne = document.querySelector('input[name="paiement"]:checked')?.value === 'en_ligne';
    document.getElementById('paiement-sms').classList.toggle('hidden', !enLigne);
    document.getElementById('paiement-domicile').classList.toggle('hidden', enLigne);
    document.querySelectorAll('input[name="paiement_lieu"], input[name="paiement_moyen"]').forEach((input) => {
        input.required = !enLigne;
        if (enLigne) {
            input.checked = false;
        }
    });
}

document.querySelectorAll('[data-step][data-target]').forEach((btn) => {
    btn.addEventListener('click', () => {
        const id = btn.dataset.target;
        setVal(id, val(id) + parseInt(btn.dataset.step, 10));
        updateForm();
    });
});

['nb_adultes', 'nb_enfants', ...platsAdultes, ...dessertsAdultes, ...platsEnfants, ...dessertsEnfants].forEach((id) => {
    document.getElementById(id).addEventListener('input', updateForm);
});

document.querySelectorAll('input[name="paiement"]').forEach((input) => {
    input.addEventListener('change', updateForm);
});

document.getElementById('inscription-form').addEventListener('submit', (event) => {
    const adultes = val('nb_adultes');
    const enfants = val('nb_enfants');

    if (adultes + enfants < 1) {
        event.preventDefault();
        alert('Indiquez au moins un participant.');
        return;
    }

    if (sum(platsAdultes) !== adultes || sum(dessertsAdultes) !== adultes) {
        event.preventDefault();
        alert('Les choix de menus adultes doivent correspondre au nombre d’adultes.');
        return;
    }

    if (sum(platsEnfants) !== enfants || sum(dessertsEnfants) !== enfants) {
        event.preventDefault();
        alert('Les choix de menus enfants doivent correspondre au nombre d’enfants.');
    }
});

updateForm();
</script>
@endsection