{# ========================================
   FORMULAIRE DE RÉSERVATION
   Tunnel de réservation en 3 étapes : créneau, personnes/options, compte client — récapitulatif live via JS
   ======================================== #}
{% extends 'base.twig' %}

{% block title %}Réservation - Nautiloc{% endblock %}

{% block content %}
<section class="mb-6 rounded-2xl border-4 border-abyss-900 bg-white p-5 shadow-[6px_6px_0_0_#041824]">
    <p class="text-xs font-black uppercase tracking-wider text-abyss-800">Réservation assistée</p>
    <h1 class="mt-1 text-3xl font-black uppercase">{{ boat.nom }}</h1>
    <p class="mt-1 text-sm font-semibold">{{ boat.port_nom }} · {{ boat.type_libelle }} · Capacité max {{ boat.capacite }} pers.</p>
</section>

{% if errors is not empty %}
    <section class="mb-6 rounded-xl border-4 border-red-700 bg-red-100 p-4">
        <p class="font-black uppercase">Corrige ces points :</p>
        <ul class="mt-2 list-disc pl-5 text-sm font-semibold">
            {% for error in errors %}
                <li>{{ error }}</li>
            {% endfor %}
        </ul>
    </section>
{% endif %}

<form method="post" class="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]" id="reservation-form">
    <div class="space-y-5">
        <section class="rounded-2xl border-4 border-abyss-900 bg-white p-5 shadow-[6px_6px_0_0_#041824]">
            <h2 class="text-lg font-black uppercase">1 · Choisis ton créneau</h2>
            <div class="mt-3 grid gap-3 md:grid-cols-2">
                <label class="text-xs font-black uppercase tracking-wider">Date de départ
                    <input type="date" name="date_depart" value="{{ old.date_depart|default('') }}" class="mt-1 w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" required>
                </label>
                <label class="text-xs font-black uppercase tracking-wider">Formule
                    <select name="id_formule" class="mt-1 w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" required>
                        <option value="">Choisir une formule</option>
                        {% for formule in formules %}
                            <option value="{{ formule.id_formule }}" data-price="{{ formule.prix }}" data-label="{{ formule.libelle }}" data-hours="{{ formule.duree_heures }}" {% if old.id_formule|default('') == formule.id_formule %}selected{% endif %}>{{ formule.libelle }} ({{ formule.duree_heures }}h) · {{ formule.prix|number_format(0, ',', ' ') }}€</option>
                        {% endfor %}
                    </select>
                </label>
            </div>
        </section>

        <section class="rounded-2xl border-4 border-abyss-900 bg-white p-5 shadow-[6px_6px_0_0_#041824]">
            <h2 class="text-lg font-black uppercase">2 · Personnes & options</h2>
            <div class="mt-3 grid gap-3 md:grid-cols-2">
                <label class="text-xs font-black uppercase tracking-wider md:col-span-2">Nombre de personnes
                    <input type="number" name="nb_personnes" min="1" max="{{ boat.capacite }}" value="{{ old.nb_personnes|default(2) }}" class="mt-1 w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" required>
                </label>
                {% for option in options %}
                    <label class="flex items-center justify-between rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold">
                        <span><input type="checkbox" name="options[]" value="{{ option.id_option }}" data-option-price="{{ option.prix }}" class="mr-2" {% if old.options is defined and option.id_option in old.options %}checked{% endif %}>{{ option.libelle }}</span>
                        <span class="font-black">+{{ option.prix|number_format(0, ',', ' ') }}€</span>
                    </label>
                {% endfor %}
            </div>
        </section>

        <section class="rounded-2xl border-4 border-abyss-900 bg-white p-5 shadow-[6px_6px_0_0_#041824]">
            <h2 class="text-lg font-black uppercase">3 · Compte client</h2>
            {% if client %}
                <div class="mt-3 rounded-lg border-2 border-abyss-900 bg-emerald-100 px-4 py-3 text-sm font-semibold">
                    Connecté avec {{ client.prenom }} {{ client.nom }} · {{ client.email }}
                    <a href="/client/logout" class="ml-2 font-black uppercase text-coral-600 hover:underline">Changer</a>
                </div>
            {% else %}
                <div class="mt-3 grid gap-3 md:grid-cols-2" data-account-fields>
                    <input type="email" name="email" placeholder="Email" value="{{ old.email|default('') }}" class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold md:col-span-2" required data-email-check>

                    <div class="hidden rounded-lg border-2 border-abyss-900 bg-amber-100 px-4 py-3 text-sm font-semibold md:col-span-2" data-account-login>
                        <p class="mb-3 font-black uppercase">Compte existant</p>
                        <input type="password" name="password" placeholder="Mot de passe" class="w-full rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 text-sm font-semibold" autocomplete="current-password" data-login-password>
                    </div>

                    <div class="hidden grid gap-3 md:col-span-2 md:grid-cols-2" data-account-create>
                        <input type="text" name="prenom" placeholder="Prénom" value="{{ old.prenom|default('') }}" class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" data-create-required>
                        <input type="text" name="nom" placeholder="Nom" value="{{ old.nom|default('') }}" class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" data-create-required>
                        <input type="tel" name="telephone" placeholder="Téléphone" value="{{ old.telephone|default('') }}" class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold">
                        <input type="password" name="password" placeholder="Mot de passe" minlength="6" class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" autocomplete="new-password" data-create-required>
                    </div>
                </div>
            {% endif %}
        </section>
    </div>

    {# ======== Récapitulatif dynamique (mis à jour par JS inline) ======== #}
    <aside class="space-y-5">
        <section class="rounded-2xl border-4 border-abyss-900 bg-abyss-900 p-5 text-sand-100 shadow-[6px_6px_0_0_#ff6b57]" id="reservation-recap">
            <h2 class="text-lg font-black uppercase">Récapitulatif direct</h2>
            <div class="mt-3 space-y-2 text-sm font-semibold">
                <p>Date : <span data-recap="date">-</span></p>
                <p>Formule : <span data-recap="formule">-</span></p>
                <p>Personnes : <span data-recap="people">{{ old.nb_personnes|default(2) }}</span></p>
                <p>Base : <span data-recap="base">0€</span></p>
                <p>Options : <span data-recap="options">0€</span></p>
                <p class="border-t border-sand-200/40 pt-2 text-base font-black">Total estimé : <span data-recap="total">0€</span></p>
            </div>
            <p class="mt-3 text-xs">Le prix réel est confirmé à l’étape de paiement fictif.</p>
        </section>
        <button type="submit" class="w-full rounded-xl border-4 border-abyss-900 bg-coral-500 px-4 py-4 text-sm font-black uppercase text-white shadow-[6px_6px_0_0_#041824] transition hover:-translate-y-1">Continuer vers paiement</button>
    </aside>
</form>
{% endblock %}

{% block scripts %}
{{ parent() }}
<script src="/assets/js/reservation.js"></script>
{% endblock %}