{% extends 'emails/base_email.html.twig' %}

{% block body %}
    {% set primaryColor = '#72a333' %}
    
    <div style="text-align: center; margin-bottom: 20px;">
        <div style="display: inline-block; background-color: #f0fdf4; border-radius: 50%; padding: 20px;">
            <span style="font-size: 40px;">💰</span>
        </div>
    </div>

    <h1 style="color: #0f172a; font-size: 18px; font-weight: 600; margin-bottom: 10px; text-align: center;">
        Avoir généré avec succès !
    </h1>
    
    <p style="text-align: center; color: #64748b; font-size: 15px; margin-bottom: 30px;">
        Suite à votre changement de formule, vos crédits restants ont été reversés sur votre portefeuille.
    </p>

    <div style="color: #475569; font-size: 15px; line-height: 1.6;">
        <p>Bonjour <strong>{{ user.prenom }}</strong>,</p>
        
        <p>Nous avons crédité un total de <strong>{{ montant|number_format(0, ',', ' ') }} F.CFA</strong> sur votre compte. Voici le détail de cette opération :</p>
        
        <div style="background-color: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; margin: 20px 0;">
            <ul style="margin: 0; padding-left: 20px; color: #334155; font-size: 13px;">
                {% for item in details %}
                    <li style="margin-bottom: 5px;">{{ item }}</li>
                {% endfor %}
            </ul>
        </div>

        <p style="font-size: 14px;">
            Ce montant a été <strong>immédiatement utilisé</strong> pour payer tout ou partie de votre nouvel abonnement. Si un reliquat subsiste, il sera conservé pour vos prochaines factures.
        </p>
    </div>

    {# --- TABLEAU NOUVEAU SOLDE --- #}
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 30px 0;">
        <tr>
            <td style="padding: 20px; background-color: #f1f5f9; border-radius: 12px; text-align: center; border: 2px dashed #cbd5e1;">
                <span style="display: block; font-size: 11px; color: #64748b; text-transform: uppercase; font-weight: 700;">Votre nouveau solde disponible</span>
                <span style="display: block; font-size: 26px; color: {{ primaryColor }}; font-weight: 800;">
                    {{ entreprise.soldeCredit|number_format(0, ',', ' ') }} F.CFA
                </span>
            </td>
        </tr>
    </table>

    <div style="text-align: center; margin-top: 30px;">
        <a href="{{ url('app_entreprise_abonnement_index') }}" 
           style="background-color: {{ primaryColor }}; color: #ffffff; padding: 12px 30px; text-decoration: none; border-radius: 50px; font-weight: 700; font-size: 13px; display: inline-block;">
            VOIR MON HISTORIQUE
        </a>
    </div>
{% endblock %}