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

{% block body %}
    {% set isParticulier = (entreprise.typeCompte == 'PARTICULIER') %}
    {% set primaryColor = '#72a333' %}
    
    <h1 style="color: #0f172a; font-size: 18px; font-weight: 600; margin-bottom: 10px; text-align: center; font-family: 'Manrope', sans-serif;">
        {% if isRenouvellement %}
            Abonnement Prolongé ! 🚀
        {% else %}
            Félicitations pour votre nouveau pack ! 🏆
        {% endif %}
    </h1>
    
    <p style="text-align: center; color: #64748b; font-size: 15px; margin-bottom: 30px;">
        {% if isRenouvellement %}
            Votre accès aux services premium a été renouvelé avec succès.
        {% else %}
            Vous venez d'activer le <strong>{{ plan.titre }}</strong> pour votre gestion.
        {% endif %}
    </p>

    <div style="color: #475569; font-size: 15px; line-height: 1.6;">
        <p>Bonjour <strong>{{ user.prenom }}</strong>,</p>
        
        <p>
            Nous vous confirmons la prise en compte de votre abonnement. Grâce à cette souscription, vous continuez à bénéficier de toute la puissance de <strong>LOYER-EXPRESS</strong> pour sécuriser et automatiser votre gestion immobilière.
        </p>
    </div>

    {# --- RÉCAPITULATIF DE LA TRANSACTION --- #}
    <div style="margin: 30px 0; background-color: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden;">
        <div style="background-color: {{ primaryColor }}; color: #ffffff; padding: 12px 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;">
            Détails de l'abonnement
        </div>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding: 20px;">
            <tr>
                <td style="padding-bottom: 10px; font-size: 13px; color: #64748b;">Offre souscrite :</td>
                <td style="padding-bottom: 10px; font-size: 13px; color: #0f172a; text-align: right; font-weight: 700;">{{ plan.titre }}</td>
            </tr>
            <tr>
                <td style="padding-bottom: 10px; font-size: 13px; color: #64748b;">Référence :</td>
                <td style="padding-bottom: 10px; font-size: 13px; color: #0f172a; text-align: right; font-family: monospace;">{{ abonnement.reference }}</td>
            </tr>
            <tr>
                <td style="padding-bottom: 10px; font-size: 13px; color: #64748b;">Période de validité :</td>
                <td style="padding-bottom: 10px; font-size: 13px; color: #0f172a; text-align: right;">{{ abonnement.dateDebut|date('d/m/Y') }} au {{ abonnement.dateFin|date('d/m/Y') }}</td>
            </tr>
            <tr style="border-top: 1px solid #e2e8f0;">
                <td style="padding-top: 10px; font-size: 13px; color: #64748b; font-weight: 700;">Montant total :</td>
                <td style="padding-top: 10px; font-size: 15px; color: {{ primaryColor }}; text-align: right; font-weight: 800;">
                    {{ (abonnement.montantPaye + abonnement.montantViaCredit)|number_format(0, ',', ' ') }} F.CFA
                </td>
            </tr>
            {% if abonnement.montantViaCredit > 0 %}
            <tr>
                <td style="font-size: 11px; color: #94a3b8; font-style: italic;">(Dont avoir déduit :</td>
                <td style="font-size: 11px; color: #94a3b8; text-align: right; font-style: italic;">{{ abonnement.montantViaCredit|number_format(0, ',', ' ') }} F.CFA)</td>
            </tr>
            {% endif %}
        </table>
    </div>

    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 35px 0;">
        <tr>
            <td align="center">
                <a href="{{ url('app_entreprise_abonnement_index') }}" 
                   style="background-color: {{ primaryColor }}; color: #ffffff; padding: 14px 35px; text-decoration: none; border-radius: 50px; font-weight: 700; font-size: 13px; display: inline-block; text-transform: uppercase; letter-spacing: 1px;">
                    VOIR MON ABONNEMENT
                </a>
            </td>
        </tr>
    </table>

    <div style="margin-top: 40px; font-size: 14px; border-top: 1px solid #f1f5f9; padding-top: 20px; color: #475569;">
        <p style="margin-bottom: 5px;">Besoin d'aide concernant votre facturation ? Contactez notre support.</p>
        <p style="margin-top: 20px;">
            À très bientôt,<br>
            <strong style="color: {{ primaryColor }};">L'équipe LOYER-EXPRESS</strong>
        </p>
    </div>
{% endblock %}