{% extends 'revervation/base.twig' %}

{% block title %}Paiement Validé - Ludikevent{% endblock %}

{% block body %}
    <div class="min-h-screen bg-slate-50 flex items-center justify-center py-12 px-4">
        <div class="max-w-md w-full">
            <div class="bg-white rounded-[3rem] p-10 shadow-2xl border border-slate-100 text-center relative overflow-hidden">

                {# Effet de fond vert subtil #}
                <div class="absolute -top-10 -right-10 w-32 h-32 bg-green-50 rounded-full blur-3xl"></div>

                {# Icône Succès Animée #}
                <div class="relative w-24 h-24 mx-auto mb-8">
                    <div class="absolute inset-0 bg-green-100 rounded-full scale-110 animate-ping opacity-20"></div>
                    <div class="relative w-24 h-24 bg-green-500 rounded-3xl flex items-center justify-center text-white shadow-lg shadow-green-200">
                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                        </svg>
                    </div>
                </div>

                <h1 class="text-3xl font-black uppercase italic text-slate-900 leading-tight">
                    Paiement <span class="text-green-600">Accepté !</span>
                </h1>

                <p class="mt-4 text-slate-500 font-medium italic text-sm leading-relaxed">
                    Votre {{ type }} a été validé avec succès. Votre réservation <span class="text-slate-900 font-bold">#{{ contrat.numReservation }}</span> est désormais confirmée et le matériel vous est réservé.
                </p>

                <div class="mt-8 p-5 bg-slate-50 rounded-2xl border border-slate-100 flex items-center justify-between">
                    <div class="text-left">
                        <p class="text-[8px] font-black uppercase text-slate-400 tracking-widest">Référence</p>
                        <p class="text-xs font-black text-slate-900 uppercase italic">#{{ contrat.numReservation }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-[8px] font-black uppercase text-slate-400 tracking-widest">Statut</p>
                        <p class="text-[10px] font-black text-green-600 uppercase italic">Confirmé</p>
                    </div>
                </div>

                <div class="mt-10">
                    {# BOUTON RETOUR GESTION DU CONTRAT #}
                    <a href="{{ path('gestion_contrat_view', {'num': contrat.numReservation}) }}"
                       class="group flex items-center justify-center gap-3 bg-slate-900 text-white px-8 py-5 rounded-2xl font-black uppercase italic hover:bg-blue-600 transition-all shadow-xl shadow-slate-200">
                        <span class="text-sm">Gérer ma réservation</span>
                        <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                        </svg>
                    </a>
                </div>
            </div>

            <p class="mt-8 text-center text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] italic">
                Merci de votre confiance — Ludikevent
            </p>
        </div>
    </div>
{% endblock %}
