{# ========================================
   PAIEMENT FICTIF
   Formulaire de paiement simulé + récapitulatif de la réservation
   ======================================== #}
{% extends 'base.twig' %}

{% block title %}Paiement fictif - Nautiloc{% endblock %}

{% block content %}
<section class="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
    <div class="rounded-2xl border-4 border-abyss-900 bg-white p-6 shadow-[6px_6px_0_0_#041824]">
        <p class="text-xs font-black uppercase tracking-wider text-abyss-800">Étape paiement</p>
        <h1 class="mt-1 text-3xl font-black uppercase">Paiement fictif</h1>
        <p class="mt-2 text-sm font-semibold">On simule un tunnel réaliste, sans débiter de vraie carte.</p>

        {% if errors is not empty %}
            <div class="mt-4 rounded-lg border-2 border-red-700 bg-red-100 px-4 py-3 text-sm font-semibold">
                {% for error in errors %}
                    <p>{{ error }}</p>
                {% endfor %}
            </div>
        {% endif %}

        <form method="post" class="mt-5 space-y-4">
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Nom sur la carte</label>
                <input type="text" name="card_holder" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" placeholder="Moussaillon Dupont">
            </div>
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Numéro de carte (fictif)</label>
                <input type="text" name="card_number" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" placeholder="4242 4242 4242 4242">
            </div>
            <div class="grid gap-3 sm:grid-cols-2">
                <div>
                    <label class="mb-1 block text-xs font-black uppercase tracking-wider">Expiration</label>
                    <input type="text" name="expiration" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" placeholder="12/29">
                </div>
                <div>
                    <label class="mb-1 block text-xs font-black uppercase tracking-wider">CVV</label>
                    <input type="text" name="cvv" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" placeholder="123">
                </div>
            </div>
            <button type="submit" class="w-full rounded-xl border-4 border-abyss-900 bg-coral-500 px-4 py-3 text-sm font-black uppercase text-white shadow-[6px_6px_0_0_#041824]">Payer (fictif)</button>
        </form>
    </div>

    <aside class="rounded-2xl border-4 border-abyss-900 bg-abyss-900 p-6 text-sand-100 shadow-[6px_6px_0_0_#ff6b57]">
        <h2 class="text-lg font-black uppercase">Récapitulatif</h2>
        <dl class="mt-4 space-y-2 text-sm">
            <div class="flex justify-between"><dt class="font-semibold">Réservation</dt><dd class="font-black">{{ reservation.numero }}</dd></div>
            <div class="flex justify-between"><dt class="font-semibold">Bateau</dt><dd>{{ reservation.bateau_nom }}</dd></div>
            <div class="flex justify-between"><dt class="font-semibold">Formule</dt><dd>{{ reservation.formule_libelle }}</dd></div>
            <div class="flex justify-between"><dt class="font-semibold">Départ</dt><dd>{{ reservation.date_depart|date('d/m/Y') }}</dd></div>
            <div class="flex justify-between"><dt class="font-semibold">Prix base</dt><dd>{{ reservation.prix_base|number_format(0, ',', ' ') }}€</dd></div>
            <div class="flex justify-between"><dt class="font-semibold">Options</dt><dd>{{ reservation.prix_options|default(0)|number_format(0, ',', ' ') }}€</dd></div>
            <div class="mt-3 flex justify-between border-t border-sand-200/50 pt-3 text-base"><dt class="font-black uppercase">Total</dt><dd class="font-black">{{ reservation.prix_total|number_format(0, ',', ' ') }}€</dd></div>
        </dl>
    </aside>
</section>
{% endblock %}