crm_ecosplay/templates/admin/eflex/show.html.twig

{% extends 'admin/_layout.html.twig' %}

{% block title %}E-Flex {{ eflex.reference }} - {{ customer.fullName }}{% endblock %}

{% block admin_content %}
<div class="page-container">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold heading-page">E-Flex {{ eflex.reference }}</h1>
            <p class="text-xs text-gray-400 mt-1">{{ eflex.reference }} - {{ customer.fullName }} - {{ eflex.description }}</p>
        </div>
        <div class="flex items-center gap-3">
            {% if eflex.state == 'active' %}
                <span class="px-3 py-1 bg-green-500/20 text-green-700 font-bold uppercase text-xs">Actif</span>
            {% elseif eflex.state == 'completed' %}
                <span class="px-3 py-1 bg-emerald-600 text-white font-bold uppercase text-xs">Termine</span>
            {% elseif eflex.state == 'cancelled' %}
                <span class="px-3 py-1 bg-red-500/20 text-red-700 font-bold uppercase text-xs">Annule</span>
            {% elseif eflex.state == 'draft' %}
                <span class="px-3 py-1 bg-yellow-100 text-yellow-800 font-bold uppercase text-xs">Brouillon</span>
            {% elseif eflex.state == 'pending_setup' %}
                <span class="px-3 py-1 bg-orange-500/20 text-orange-700 font-bold uppercase text-xs">En attente paiement</span>
            {% else %}
                <span class="px-3 py-1 bg-blue-500/20 text-blue-700 font-bold uppercase text-xs">{{ eflex.state }}</span>
            {% endif %}
            <a href="{{ path('app_admin_clients_show', {id: customer.id, tab: 'esyflex'}) }}" class="px-4 py-2 glass font-bold uppercase text-xs tracking-widest hover:bg-gray-900 hover:text-white transition-all">Retour</a>
        </div>
    </div>

    {# Resume #}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        <div class="glass p-4 text-center">
            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Montant total</p>
            <p class="text-xl font-bold mt-1">{{ eflex.totalAmount|number_format(2, ',', ' ') }} &euro;</p>
        </div>
        <div class="glass p-4 text-center">
            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Mensualite</p>
            <p class="text-xl font-bold mt-1" style="color: #fabf04;">{{ eflex.monthlyAmount|number_format(2, ',', ' ') }} &euro;</p>
        </div>
        <div class="glass p-4 text-center">
            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Progression</p>
            <p class="text-xl font-bold mt-1">{{ eflex.nbPaid }}/{{ eflex.nbLines }}</p>
            <div class="w-full bg-gray-200 h-2 mt-2"><div class="bg-green-500 h-2" style="width: {{ eflex.progress }}%"></div></div>
        </div>
        <div class="glass p-4 text-center">
            <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Methode</p>
            <p class="text-sm font-bold mt-1">{{ eflex.paymentMethodLabel }}</p>
        </div>
    </div>

    {# Description #}
    <div class="glass p-5 mb-6">
        <h2 class="text-sm font-bold uppercase tracking-wider mb-2">Description</h2>
        <p class="text-sm text-gray-600">{{ eflex.description }}</p>
    </div>

    {# Actions #}
    <div class="flex flex-wrap gap-2 mb-6">
        {% if eflex.state == 'draft' %}
            {% if eflex.pdfUnsigned %}
                <form method="post" action="{{ path('app_admin_eflex_generate_pdf', {id: eflex.id}) }}" data-confirm="Regenerer le PDF ?">
                    <button type="submit" class="px-4 py-2 bg-yellow-500/20 text-yellow-700 hover:bg-yellow-500 hover:text-white font-bold uppercase text-[10px] tracking-wider transition-all">Regenerer PDF</button>
                </form>
                <a href="{{ vich_uploader_asset(eflex, 'pdfUnsignedFile') }}" target="_blank" class="px-4 py-2 bg-gray-900 text-white font-bold uppercase text-[10px] tracking-wider hover:bg-[#fabf04] hover:text-gray-900 transition-all">Voir PDF</a>
                <form method="post" action="{{ path('app_admin_eflex_send_signature', {id: eflex.id}) }}" data-confirm="Envoyer le contrat E-Flex pour signature au client ?">
                    <button type="submit" class="px-4 py-2 bg-purple-500/20 text-purple-700 hover:bg-purple-500 hover:text-white font-bold uppercase text-[10px] tracking-wider transition-all">Envoyer pour signature</button>
                </form>
            {% else %}
                <form method="post" action="{{ path('app_admin_eflex_generate_pdf', {id: eflex.id}) }}">
                    <button type="submit" class="px-4 py-2 bg-gray-900 text-white font-bold uppercase text-[10px] tracking-wider hover:bg-[#fabf04] hover:text-gray-900 transition-all">Generer PDF</button>
                </form>
            {% endif %}
        {% endif %}
        {% if eflex.pdfSigned %}
            <a href="{{ vich_uploader_asset(eflex, 'pdfSignedFile') }}" target="_blank" class="px-4 py-2 bg-green-500/20 text-green-700 font-bold uppercase text-[10px] tracking-wider hover:bg-green-500 hover:text-white transition-all">Voir contrat signe</a>
        {% endif %}
        {% if eflex.pdfAudit %}
            <a href="{{ vich_uploader_asset(eflex, 'pdfAuditFile') }}" target="_blank" class="px-4 py-2 bg-blue-500/20 text-blue-700 font-bold uppercase text-[10px] tracking-wider hover:bg-blue-500 hover:text-white transition-all">Audit signature</a>
        {% endif %}
        {% if eflex.state in ['draft', 'active', 'pending_setup'] %}
            <form method="post" action="{{ path('app_admin_eflex_cancel', {id: eflex.id}) }}" data-confirm="Annuler ce contrat E-Flex ?">
                <button type="submit" class="px-4 py-2 bg-red-500/20 text-red-700 hover:bg-red-500 hover:text-white font-bold uppercase text-[10px] tracking-wider transition-all">Annuler</button>
            </form>
        {% endif %}
    </div>

    {# SEPA info #}
    {% if eflex.stripePaymentMethodId %}
        <div class="glass p-4 mb-6">
            <h3 class="text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-2">Mandat SEPA</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
                <div>
                    <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">IBAN</p>
                    <p class="font-mono font-bold mt-1">**** **** **** {{ eflex.stripeSepaLast4 ?: '****' }}</p>
                </div>
                {% if eflex.stripeSepaCountry %}
                    <div>
                        <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Pays</p>
                        <p class="font-bold mt-1">{{ eflex.stripeSepaCountry }}</p>
                    </div>
                {% endif %}
                <div>
                    <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400">Statut</p>
                    <p class="font-bold mt-1 text-green-600">Actif</p>
                </div>
            </div>
        </div>
    {% endif %}

    {# Echeances #}
    <h2 class="text-lg font-bold uppercase mb-4">Echeances</h2>
    <div class="glass overflow-x-auto overflow-hidden">
        <table class="w-full text-sm">
            <thead>
                <tr class="glass-dark text-white">
                    <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">N</th>
                    <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Date prevue</th>
                    <th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Montant</th>
                    <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Statut</th>
                    <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Paye le</th>
                    <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for line in eflex.lines %}
                    <tr class="border-b border-white/20 hover:bg-white/50">
                        <td class="px-4 py-3 font-bold">{{ line.position }}</td>
                        <td class="px-4 py-3 text-xs">{{ line.scheduledAt|date('d/m/Y') }}</td>
                        <td class="px-4 py-3 text-right font-bold text-xs">{{ line.amount|number_format(2, ',', ' ') }} &euro;</td>
                        <td class="px-4 py-3 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]">En attente</span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-500">
                            {{ line.paidAt ? line.paidAt|date('d/m/Y H:i') : '—' }}
                            {% if line.paidMethod %}<span class="text-gray-400 ml-1">({{ line.paidMethod }})</span>{% endif %}
                            {% if line.failureReason %}<span class="text-red-500 ml-1">{{ line.failureReason }}</span>{% endif %}
                        </td>
                        <td class="px-4 py-3 text-center">
                            {% if line.isPending and eflex.stripePaymentMethodId and not line.stripePaymentIntentId %}
                                <form method="post" action="{{ path('app_admin_eflex_force_payment', {id: eflex.id, lineId: line.id}) }}" class="inline" data-confirm="Forcer le prelevement de {{ line.amount|number_format(2, ',', ' ') }} EUR ?">
                                    <button type="submit" class="px-2 py-1 bg-orange-500/20 text-orange-700 hover:bg-orange-500 hover:text-white font-bold uppercase text-[9px] tracking-wider transition-all">Forcer</button>
                                </form>
                            {% endif %}
                            {% if (line.isPending or line.isFailed) and not line.stripePaymentIntentId %}
                                <form method="post" action="{{ path('app_admin_eflex_manual_payment', {id: eflex.id, lineId: line.id}) }}" class="inline" data-confirm="Marquer l'echeance {{ line.position }} comme payee manuellement ?">
                                    <select name="method" class="text-[9px] px-1 py-0.5 border">
                                        <option value="virement">Virement</option>
                                        <option value="cb_externe">CB externe</option>
                                        <option value="cheque">Cheque</option>
                                        <option value="especes">Especes</option>
                                    </select>
                                    <button type="submit" class="px-2 py-1 bg-green-500/20 text-green-700 hover:bg-green-500 hover:text-white font-bold uppercase text-[9px] tracking-wider transition-all">Paye</button>
                                </form>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}