crm_ecosplay/templates/eflex/process.html.twig

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

{% block title %}E-Flex {{ 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">
                <img src="/logo.jpg" alt="E-Cosplay" class="h-10 w-auto">
                <div>
                    <h1 class="text-lg font-bold uppercase tracking-widest">Contrat E-Flex</h1>
                    <p class="text-xs text-white/60">{{ eflex.reference }} - Association E-Cosplay</p>
                </div>
            </div>
        </div>

        <div class="p-8">
            <p class="text-sm text-gray-600 mb-6">
                {% if customer.raisonSociale %}Chez {{ customer.raisonSociale }}{% else %}Bonjour {{ customer.firstName }}{% endif %},
                voici le detail de votre contrat de financement E-Flex.
            </p>

            {# Description #}
            <div class="glass p-4 mb-6">
                <h2 class="text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Service finance</h2>
                <p class="text-sm font-bold">{{ eflex.description }}</p>
            </div>

            {# Resume #}
            <div class="grid grid-cols-2 md: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">Montant 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">Echeances</p>
                    <p class="text-lg font-bold mt-1">{{ eflex.nbLines }} mois</p>
                </div>
            </div>

            {# Tableau echeances #}
            <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 prevue</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 payer</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {# Conditions #}
            <div class="text-xs text-gray-500 mb-6 space-y-1">
                <p class="font-bold uppercase text-[9px] tracking-wider text-gray-400 mb-2">Conditions</p>
                <p>E-Flex est une solution de financement sans frais supplementaires proposee par l'Association E-Cosplay.</p>
                <p>Les prelevements seront effectues automatiquement a chaque date prevue.</p>
            </div>

            {# Mention credit #}
            <div class="glass p-4 mb-6" style="border-left: 4px solid #ea580c;">
                <p class="text-xs text-orange-700 font-bold uppercase tracking-wider mb-1">Information importante</p>
                <p class="text-xs text-gray-600">Un credit vous engage et doit etre rembourse. Verifiez votre capacite de remboursement avant de vous engager.</p>
            </div>

            {# Boutons signer / refuser (si pas encore signe) #}
            {% if eflex.submissionId and eflex.state == 'draft' %}
                <div class="flex justify-center gap-4 mb-6">
                    <a href="{{ path('app_eflex_sign', {id: eflex.id}) }}"
                       class="px-6 py-3 bg-green-600 text-white font-bold uppercase text-xs tracking-wider hover:bg-green-700 transition-all">
                        Signer le contrat
                    </a>
                </div>
            {% endif %}

            {# Choix methode de paiement (si actif ou pending_setup) #}
            {% if eflex.state in ['active', 'pending_setup'] %}

                {# SEPA deja configure #}
                {% if eflex.stripePaymentMethodId %}
                    <div class="glass p-4 mb-6 flex items-center gap-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 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 configure</p>
                            <p class="text-xs text-gray-500">IBAN **** {{ eflex.stripeSepaLast4 ?: '****' }} - Les echeances seront prelevees automatiquement.</p>
                        </div>
                    </div>
                {% else %}
                    {# Choix de la methode #}
                    <div class="glass p-5 mb-6">
                        <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Comment souhaitez-vous payer ?</h2>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                            {# Virement bancaire #}
                            <div class="glass p-4 text-center hover:bg-white/80 transition-all">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                                </svg>
                                <p class="text-xs font-bold uppercase tracking-wider mb-2">Virement bancaire</p>
                                <p class="text-[10px] text-gray-500 mb-3">Payez a votre rythme par virement. Les coordonnees bancaires vous seront communiquees.</p>
                                <div class="glass p-3 text-left text-[10px] text-gray-600 mb-3">
                                    <p><strong>Titulaire :</strong> Association E-Cosplay</p>
                                    <p><strong>IBAN :</strong> FR76 XXXX XXXX XXXX XXXX XXXX XXX</p>
                                    <p><strong>Reference :</strong> {{ eflex.reference }}</p>
                                </div>
                                <p class="text-[9px] text-gray-400">Indiquez la reference <strong>{{ eflex.reference }}</strong> dans le motif du virement.</p>
                            </div>

                            {# Carte bancaire #}
                            <div class="glass p-4 text-center hover:bg-white/80 transition-all">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                                </svg>
                                <p class="text-xs font-bold uppercase tracking-wider mb-2">Carte bancaire</p>
                                <p class="text-[10px] text-gray-500 mb-3">Payez chaque echeance par carte bancaire via Stripe (paiement securise).</p>
                                {% set nextLine = null %}
                                {% for line in eflex.lines %}
                                    {% if (line.isPending or line.isFailed) and nextLine is null %}
                                        {% set nextLine = line %}
                                    {% endif %}
                                {% endfor %}
                                {% if nextLine %}
                                    <a href="{{ path('app_eflex_pay', {id: eflex.id, lineId: nextLine.id}) }}"
                                       class="inline-block px-4 py-2 bg-purple-600 text-white font-bold uppercase text-[10px] tracking-wider hover:bg-purple-700 transition-all">
                                        Payer echeance {{ nextLine.position }} ({{ nextLine.amount|number_format(2, ',', ' ') }} &euro;)
                                    </a>
                                {% endif %}
                            </div>

                            {# Prelevement SEPA #}
                            <div class="glass p-4 text-center hover:bg-white/80 transition-all" style="border: 2px solid #fabf04;">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2" style="color: #fabf04;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                </svg>
                                <p class="text-xs font-bold uppercase tracking-wider mb-2">Prelevement automatique</p>
                                <p class="text-[10px] text-gray-500 mb-3">Renseignez votre IBAN une seule fois. Les echeances sont prelevees automatiquement.</p>
                                <span class="inline-block px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider mb-3" style="background: #fabf04; color: #111;">Recommande</span>
                                <br>
                                <a href="{{ path('app_eflex_setup_payment', {id: eflex.id}) }}"
                                   class="inline-block px-4 py-2 text-white font-bold uppercase text-[10px] tracking-wider hover:opacity-90 transition-all" style="background: #fabf04; color: #111;">
                                    Configurer le prelevement SEPA
                                </a>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endif %}

            {% if eflex.nbPaid > 0 %}
                <div class="glass p-4 mb-6">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Progression</span>
                        <span class="text-sm font-bold">{{ eflex.nbPaid }}/{{ eflex.nbLines }}</span>
                    </div>
                    <div class="w-full bg-gray-200 h-2">
                        <div class="bg-green-500 h-2" style="width: {{ eflex.progress }}%"></div>
                    </div>
                </div>
            {% endif %}

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