{% extends 'mails/base.twig' %}

{% block content %}
    <mj-section padding="20px">
        <mj-column background-color="#ffffff" border-radius="24px" padding="30px" css-class="shadow" border="2px solid #f1f5f9">

            {# Badge de statut selon le type #}
            <mj-text align="right" padding="0">
                {% if datas.payment.type == 'solde' %}
                    <span style="background-color: #dcfce7; color: #166534; padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase;">Finalisé</span>
                {% else %}
                    <span style="background-color: #fef9c3; color: #854d0e; padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase;">En cours</span>
                {% endif %}
            </mj-text>

            <mj-text font-size="24px" font-weight="900" color="#0f172a" padding-top="10px">
                Nouveau paiement reçu 💳
            </mj-text>

            <mj-text font-size="14px" color="#64748b" padding-bottom="20px">
                Une transaction vient d'être confirmée via Stripe pour <strong>Ludikevent</strong>.
            </mj-text>

            <mj-divider border-width="1px" border-color="#f1f5f9" />

            {# DETAILS DE LA TRANSACTION #}
            <mj-table padding="20px 0">
                <tr style="text-align:left;padding:15px 0;">
                    <th style="font-size:12px; color:#94a3b8; text-transform:uppercase; padding-bottom:8px;">Type</th>
                    <th style="font-size:12px; color:#94a3b8; text-transform:uppercase; padding-bottom:8px;">Montant</th>
                </tr>
                <tr>
                    <td style="font-size:16px; font-weight:800; color:#0f172a; padding-top:5px;">
                        {{ datas.payment.type|replace({'_': ' '})|upper }}
                    </td>
                    <td style="font-size:22px; font-weight:900; color:#2563eb; font-style:italic; padding-top:5px;">
                        {{ datas.payment.amount|number_format(2, ',', ' ') }}€
                    </td>
                </tr>
            </mj-table>

            {# INFOS CLIENT & CONTRAT #}
            <mj-wrapper background-color="#f8fafc" border-radius="16px" padding="20px">
                <mj-section padding="0">
                    <mj-column>
                        <mj-text font-size="11px" font-weight="800" color="#94a3b8" text-transform="uppercase" padding-bottom="5px">Détails Client</mj-text>
                        <mj-text font-size="14px" color="#0f172a" font-weight="700">
                            {{ datas.customer.surname }} {{ datas.customer.name }}
                        </mj-text>
                        <mj-text font-size="13px" color="#64748b">
                            Contrat #{{ datas.contrat.numReservation }}
                        </mj-text>
                    </mj-column>
                </mj-section>
            </mj-wrapper>

            {# BOUTON VERS L'INTRANET #}
            <mj-button background-color="#2563eb" color="#ffffff" border-radius="12px" font-weight="800" text-transform="uppercase" font-size="12px" padding-top="30px" href="{{ datas.reservationLink }}">
                Ouvrir dans l'Intranet
            </mj-button>

            <mj-text align="center" font-size="11px" color="#cbd5e1" padding-top="20px">
                ID Stripe: {{ datas.payment.paymentId }}
            </mj-text>

        </mj-column>
    </mj-section>
{% endblock %}
