crm_ecosplay/templates/eflex/setup_payment_done.html.twig

{% extends 'base.html.twig' %}

{% block title %}SEPA configure - {{ eflex.reference }} - Association E-Cosplay{% endblock %}

{% block body %}
<div class="min-h-screen flex items-center justify-center p-4" style="background: linear-gradient(135deg, #f5f5f0 0%, #e8e8e0 100%);">
    <div class="glass-heavy w-full max-w-2xl overflow-hidden">
        <div class="glass-dark text-white px-8 py-6">
            <div class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div>
                    <h1 class="text-lg font-bold uppercase tracking-widest">Mandat SEPA configure</h1>
                    <p class="text-xs text-white/60">{{ eflex.reference }}</p>
                </div>
            </div>
        </div>

        <div class="p-8">
            <div class="glass p-4 mb-6 flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>
                <div>
                    <p class="text-sm font-bold text-green-700">Prelevement SEPA actif</p>
                    <p class="text-xs text-gray-500 mt-1">IBAN **** {{ eflex.stripeSepaLast4 ?: '****' }} - Les echeances seront prelevees automatiquement.</p>
                </div>
            </div>

            <div class="grid grid-cols-3 gap-3 mb-6">
                <div class="glass p-3 text-center">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Total</p>
                    <p class="text-lg font-bold mt-1">{{ eflex.totalAmount|number_format(2, ',', ' ') }} &euro;</p>
                </div>
                <div class="glass p-3 text-center">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Mensualite</p>
                    <p class="text-lg font-bold mt-1" style="color: #fabf04;">{{ eflex.monthlyAmount|number_format(2, ',', ' ') }} &euro;</p>
                </div>
                <div class="glass p-3 text-center">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Progression</p>
                    <p class="text-lg font-bold mt-1">{{ eflex.nbPaid }}/{{ eflex.nbLines }}</p>
                </div>
            </div>

            {# Tableau echeances avec statut #}
            <div class="glass overflow-hidden mb-6">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="glass-dark text-white">
                            <th class="px-4 py-2 text-left font-bold uppercase text-[10px] tracking-widest">N</th>
                            <th class="px-4 py-2 text-left font-bold uppercase text-[10px] tracking-widest">Date</th>
                            <th class="px-4 py-2 text-right font-bold uppercase text-[10px] tracking-widest">Montant</th>
                            <th class="px-4 py-2 text-center font-bold uppercase text-[10px] tracking-widest">Statut</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for line in eflex.lines %}
                            <tr class="border-b border-white/20 {{ loop.index is odd ? 'bg-white/30' : '' }}">
                                <td class="px-4 py-2 font-bold">{{ line.position }}</td>
                                <td class="px-4 py-2 text-xs">{{ line.scheduledAt|date('d/m/Y') }}</td>
                                <td class="px-4 py-2 text-right font-bold">{{ line.amount|number_format(2, ',', ' ') }} &euro;</td>
                                <td class="px-4 py-2 text-center">
                                    {% if line.isPaid %}
                                        <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Paye</span>
                                    {% elseif line.isFailed %}
                                        <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[10px]">Echoue</span>
                                    {% else %}
                                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 font-bold uppercase text-[10px]">A prelever</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <p class="text-center text-xs text-gray-400 mt-6">Pour toute question : <a href="mailto:contact@e-cosplay.fr" class="font-bold" style="color: #fabf04;">contact@e-cosplay.fr</a></p>
        </div>
    </div>
</div>
{% endblock %}