{# ========================================
   MES RÉSERVATIONS
   Espace client — connexion/déconnexion + liste des réservations avec actions (payer, annuler, rembourser)
   ======================================== #}
{% extends 'base.twig' %}

{% block title %}Mes réservations - Nautiloc{% endblock %}

{% block content %}
<section class="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
    <div class="rounded-2xl border-4 border-abyss-900 bg-white p-6 shadow-[6px_6px_0_0_#041824]">
        <h1 class="text-2xl font-black uppercase">Mes réservations</h1>

        {% if client %}
            <p class="mt-2 text-sm font-semibold">Connecté avec {{ client.prenom }} {{ client.nom }} · {{ client.email }}</p>
            <a href="/client/logout" class="mt-5 inline-flex rounded-lg border-2 border-abyss-900 bg-white px-4 py-2 text-sm font-black uppercase shadow-[4px_4px_0_0_#041824]">Déconnexion</a>
        {% else %}
            <p class="mt-2 text-sm font-semibold">Connecte-toi avec ton email et ton mot de passe.</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">Email</label>
                    <input type="email" name="email" value="{{ old.email|default('') }}" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" required>
                </div>
                <div>
                    <label class="mb-1 block text-xs font-black uppercase tracking-wider">Mot de passe</label>
                    <input type="password" name="password" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold" required>
                </div>
                <button type="submit" class="w-full rounded-lg border-2 border-abyss-900 bg-coral-500 px-4 py-2 text-sm font-black uppercase text-white shadow-[4px_4px_0_0_#041824]">Connexion</button>
            </form>
        {% endif %}
    </div>

    {# ======== Liste des réservations du client ======== #}
    <div class="space-y-4">
        {% if not client %}
            <div class="rounded-2xl border-4 border-abyss-900 bg-white p-6 shadow-[6px_6px_0_0_#041824]">
                <p class="text-sm font-semibold">Connecte-toi pour afficher tes réservations.</p>
            </div>
        {% elseif results is empty %}
            <div class="rounded-2xl border-4 border-abyss-900 bg-white p-6 shadow-[6px_6px_0_0_#041824]">
                <p class="text-sm font-semibold">Aucune réservation à afficher pour le moment.</p>
            </div>
        {% else %}
            {% for reservation in results %}
                <article class="rounded-2xl border-4 border-abyss-900 bg-white p-5 shadow-[6px_6px_0_0_#041824]">
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <h2 class="text-lg font-black">{{ reservation.numero }}</h2>
                        <span class="rounded-full border-2 border-abyss-900 px-2 py-1 text-xs font-black uppercase {% if reservation.statut == 'confirmee' %}bg-emerald-200{% elseif reservation.statut == 'en_attente' %}bg-amber-200{% elseif reservation.statut == 'remboursee' %}bg-sky-200{% else %}bg-red-200{% endif %}">{{ reservation.statut|replace({'_': ' '}) }}</span>
                    </div>
                    <div class="mt-3 grid gap-2 text-sm font-semibold md:grid-cols-2">
                        <p><span class="font-black">Bateau :</span> {{ reservation.bateau_nom }}</p>
                        <p><span class="font-black">Port :</span> {{ reservation.port_nom }}</p>
                        <p><span class="font-black">Date :</span> {{ reservation.date_depart|date('d/m/Y') }}</p>
                        <p><span class="font-black">Formule :</span> {{ reservation.formule_libelle }}</p>
                    </div>

                    {% if reservation.statut == 'en_attente' %}
                        <div class="mt-4 flex flex-wrap gap-3">
                            <a href="/paiement/{{ reservation.id_reservation }}" class="rounded-lg border-2 border-abyss-900 bg-coral-500 px-4 py-2 text-xs font-black uppercase text-white shadow-[3px_3px_0_0_#041824]">Payer</a>
                            <form method="post" action="/mes-reservations/{{ reservation.id_reservation }}/annuler">
                                <button type="submit" class="rounded-lg border-2 border-abyss-900 bg-white px-4 py-2 text-xs font-black uppercase shadow-[3px_3px_0_0_#041824]">Annuler</button>
                            </form>
                        </div>
                    {% elseif reservation.statut == 'confirmee' %}
                        <div class="mt-4">
                            <form method="post" action="/mes-reservations/{{ reservation.id_reservation }}/rembourser">
                                <button type="submit" class="rounded-lg border-2 border-abyss-900 bg-white px-4 py-2 text-xs font-black uppercase shadow-[3px_3px_0_0_#041824]">Rembourser</button>
                            </form>
                        </div>
                    {% endif %}
                </article>
            {% endfor %}
        {% endif %}
    </div>
</section>
{% endblock %}