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

{% block title %}Validation du paiement - Ludikevent{% endblock %}

{% block body %}
    {# L'attribut data-auto-redirect contient l'URL de destination #}
    <div class="min-h-screen bg-slate-50 flex items-center justify-center py-12 px-4"
         id="payment-check-container"
         data-auto-redirect="{{ path('gestion_contrat_success', {'id': contrat.id}) }}">

        <div class="max-w-md w-full text-center">
            <div class="bg-white rounded-[3rem] p-10 shadow-2xl border border-slate-100 relative overflow-hidden">

                <div class="relative w-24 h-24 mx-auto mb-8">
                    <div class="absolute inset-0 border-4 border-blue-100 rounded-full"></div>
                    <div class="absolute inset-0 border-4 border-blue-600 rounded-full border-t-transparent animate-spin"></div>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>

                <h1 class="text-2xl font-black uppercase italic text-slate-900 leading-tight">
                    Paiement <span class="text-blue-600">en cours</span>
                </h1>

                <p class="mt-4 text-slate-500 font-medium italic text-sm leading-relaxed">
                    Nous vérifions la confirmation de votre banque auprès de Stripe. <br>
                    <span class="text-slate-900 font-bold uppercase text-[10px] tracking-widest mt-2 block">Merci de patienter quelques instants...</span>
                </p>

                <div class="mt-10 p-4 bg-blue-50 rounded-2xl border border-blue-100">
                    <p class="text-[10px] text-blue-700 font-black uppercase tracking-tighter">
                        Réservation #{{ contrat.numReservation }}
                    </p>
                </div>
            </div>

            <p class="mt-6 text-[10px] text-slate-400 font-bold uppercase tracking-widest italic">
                Redirection automatique dans quelques secondes
            </p>
        </div>
    </div>
{% endblock %}
