crm_ecosplay/templates/echeancier/process.html.twig

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

{% block title %}Echeancier de paiement - 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">Echeancier de paiement</h1>
                    <p class="text-xs text-white/60">{{ echeancier.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 %},
                veuillez trouver ci-dessous le detail de votre echeancier de paiement.
            </p>

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

            {# Resume #}
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
                <div class="glass p-3 text-center">
                    <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Creance</p>
                    <p class="text-lg font-bold mt-1">{{ echeancier.totalAmountHt|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">Majoration 5%</p>
                    <p class="text-lg font-bold mt-1 text-red-500">+ {{ echeancier.majoration|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">Total a payer</p>
                    <p class="text-lg font-bold mt-1">{{ echeancier.totalWithMajoration|number_format(2, ',', ' ') }} &euro;</p>
                    <p class="text-[10px] text-gray-400">en {{ echeancier.nbLines }} mois</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;">{{ echeancier.monthlyAmount|number_format(2, ',', ' ') }} &euro;</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>
                        </tr>
                    </thead>
                    <tbody>
                        {% for line in echeancier.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>
                            </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>1. Le prelevement sera effectue automatiquement a chaque date prevue via Stripe.</p>
                <p>2. En cas d'echec de prelevement, une relance sera envoyee par email.</p>
                <p>3. Apres 2 echecs consecutifs, l'echeancier sera considere en defaut.</p>
                <p>4. Majoration de 5% du montant total conformement aux CGV (article 11).</p>
            </div>

            <p class="text-sm text-gray-600 mb-4">
                Une fois le contrat signe, un email vous sera envoye pour effectuer la configuration des prelevements automatiques.
            </p>

            <p class="text-xs text-gray-500 mb-6">
                Les prelevements seront effectues via <strong>Stripe</strong>, plateforme de paiement securisee. Vous recevrez un email de confirmation a chaque echeance.
            </p>

            {# Boutons signer / refuser #}
            {% if echeancier.submissionId %}
                <div class="flex justify-center gap-4 mb-6">
                    <a href="{{ path('app_echeancier_sign', {id: echeancier.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 l'echeancier
                    </a>
                    <a href="{{ path('app_echeancier_refuse', {id: echeancier.id}) }}"
                       class="px-6 py-3 bg-red-500/20 text-red-700 font-bold uppercase text-xs tracking-wider hover:bg-red-500 hover:text-white transition-all"
                       onclick="return confirm('Etes-vous sur de vouloir refuser cet echeancier ?')">
                        Refuser
                    </a>
                </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 %}