crm_ecosplay/templates/emails/echeancier_completed_client.html.twig

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

{% block content %}
<table width="600" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
    <tr>
        <td style="padding: 32px;">
            {% set greeting = customer.raisonSociale ? 'Chez ' ~ customer.raisonSociale : 'Bonjour ' ~ customer.firstName %}
            <h1 style="font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: 700; color: #111827; margin: 0 0 16px;">{{ greeting }},</h1>

            <div style="background: #f0fdf4; border: 1px solid #bbf7d0; padding: 16px; margin: 0 0 20px;">
                <p style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 700; color: #16a34a; margin: 0;">
                    Echeancier {{ echeancier.reference }} - Paiement termine
                </p>
            </div>

            <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #374151; line-height: 22px; margin: 0 0 16px;">
                Nous vous confirmons que l'integralite de votre echeancier de paiement a ete reglee. Voici l'attestation de fin de paiement :
            </p>

            <table width="100%" cellpadding="0" cellspacing="0" style="margin: 20px 0; border: 1px solid #e5e7eb;">
                <tr>
                    <td style="padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; background: #f9fafb; width: 35%;">Reference</td>
                    <td style="padding: 10px 16px; font-family: monospace; font-size: 13px; font-weight: 700;">{{ echeancier.reference }}</td>
                </tr>
                <tr>
                    <td style="padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; background: #f9fafb;">Motif</td>
                    <td style="padding: 10px 16px; font-size: 13px;">{{ echeancier.description }}</td>
                </tr>
                <tr>
                    <td style="padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; background: #f9fafb;">Creance initiale</td>
                    <td style="padding: 10px 16px; font-family: monospace; font-size: 13px;">{{ echeancier.totalAmountHt|number_format(2, ',', ' ') }} &euro;</td>
                </tr>
                <tr>
                    <td style="padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; background: #f9fafb;">Majoration (5%)</td>
                    <td style="padding: 10px 16px; font-family: monospace; font-size: 13px; color: #dc2626;">+ {{ echeancier.majoration|number_format(2, ',', ' ') }} &euro;</td>
                </tr>
                <tr>
                    <td style="padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; background: #f9fafb;">Total paye</td>
                    <td style="padding: 10px 16px; font-family: monospace; font-size: 16px; font-weight: 700; color: #16a34a;">{{ echeancier.totalPaid|number_format(2, ',', ' ') }} &euro;</td>
                </tr>
                <tr>
                    <td style="padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; background: #f9fafb;">Echeances</td>
                    <td style="padding: 10px 16px; font-size: 13px; font-weight: 700; color: #16a34a;">{{ echeancier.nbPaid }}/{{ echeancier.nbLines }} payees</td>
                </tr>
            </table>

            <h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; color: #111827; margin: 20px 0 10px;">Detail des echeances :</h2>

            <table width="100%" cellpadding="0" cellspacing="0" style="border: 1px solid #e5e7eb;">
                <tr>
                    <th style="padding: 8px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: #111827; text-align: left;">N</th>
                    <th style="padding: 8px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: #111827; text-align: left;">Date</th>
                    <th style="padding: 8px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: #111827; text-align: right;">Montant</th>
                    <th style="padding: 8px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: #111827; text-align: center;">Statut</th>
                </tr>
                {% for line in echeancier.lines %}
                    <tr style="background: {{ loop.index is odd ? '#f9fafb' : '#fff' }};">
                        <td style="padding: 8px 12px; font-size: 12px;">{{ line.position }}</td>
                        <td style="padding: 8px 12px; font-size: 12px;">{{ line.paidAt ? line.paidAt|date('d/m/Y') : line.scheduledAt|date('d/m/Y') }}</td>
                        <td style="padding: 8px 12px; font-size: 12px; font-weight: 700; text-align: right;">{{ line.amount|number_format(2, ',', ' ') }} &euro;</td>
                        <td style="padding: 8px 12px; font-size: 12px; text-align: center; color: #16a34a; font-weight: 700;">Paye</td>
                    </tr>
                {% endfor %}
            </table>

            <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #374151; line-height: 22px; margin: 20px 0;">
                Ce document fait office d'attestation de fin de paiement pour l'echeancier {{ echeancier.reference }}.
            </p>

            <p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #9ca3af; margin: 16px 0 0;">
                Pour toute question : <a href="mailto:client@e-cosplay.fr" style="color: #fabf04;">client@e-cosplay.fr</a>
            </p>
        </td>
    </tr>
</table>
{% endblock %}