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

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

            <mj-image src="https://cdn-icons-png.flaticon.com/512/438/438526.png" width="60px" padding-bottom="20px" />

            <mj-text align="center" font-size="28px" font-weight="900" color="#0f172a" text-transform="uppercase" font-style="italic" padding-bottom="0px">
                {% if datas.payment.type == 'accompte' %}
                    Acompte <span color="#2563eb">Encaissé</span>
                {% elseif datas.payment.type == 'caution' %}
                    Caution <span color="#2563eb">Sécurisée</span>
                {% elseif datas.payment.type == 'solde' %}
                    Réservation <span color="#16a34a">Soldée</span>
                {% elseif datas.payment.type == 'solde_partiel' %}
                    Versement <span color="#4f46e5">Confirmé</span>
                {% endif %}
            </mj-text>

            <mj-text align="center" font-size="10px" font-weight="800" color="#64748b" letter-spacing="2px" text-transform="uppercase" padding-top="10px">
                Réservation #{{ datas.contrat.numReservation }}
            </mj-text>

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

            <mj-text font-size="15px" color="#334155" line-height="1.5">
                Bonjour <strong>{{ datas.customer.surname }}</strong>,
                <br /><br />
                {% if datas.payment.type == 'accompte' %}
                    Nous vous confirmons la réception de votre acompte. Votre matériel est désormais officiellement réservé pour votre événement.
                {% elseif datas.payment.type == 'caution' %}
                    L'empreinte bancaire pour votre caution a été validée avec succès. Aucune somme n'a été débitée de votre compte à ce jour.
                {% elseif datas.payment.type == 'solde' %}
                    Nous avons bien reçu le règlement final de votre commande. Votre dossier est désormais intégralement soldé. Merci pour votre confiance !
                {% elseif datas.payment.type == 'solde_partiel' %}
                    Nous vous confirmons la réception de votre paiement partiel. Ce montant a été déduit de votre solde restant.
                {% endif %}
            </mj-text>

            <mj-wrapper background-color="#f8fafc" border-radius="16px" padding="20px">
                <mj-section padding="0">
                    <mj-column width="50%">
                        <mj-text font-size="10px" font-weight="800" color="#94a3b8" text-transform="uppercase">Montant réglé</mj-text>
                        <mj-text font-size="20px" font-weight="900" font-style="italic" color="#0f172a" padding-top="5px">
                            {{ datas.payment.amount|number_format(2, ',', ' ') }}€
                        </mj-text>
                    </mj-column>
                    <mj-column width="50%">
                        <mj-text font-size="10px" font-weight="800" color="#94a3b8" text-transform="uppercase" align="right">Méthode</mj-text>
                        <mj-text font-size="12px" font-weight="700" color="#475569" align="right" padding-top="10px">
                            {% if datas.payment.card.type is defined and datas.payment.card.type  == "manuel" %}
                                Paiement effectuer par Ludikevent
                            {% else %}
                            {{ datas.payment.card.method_label|default('Carte Bancaire') }}
                            {% endif %}
                        </mj-text>
                    </mj-column>
                </mj-section>
            </mj-wrapper>

            <mj-text font-size="13px" color="#64748b" font-style="italic" padding-top="20px">
                ID Transaction : <span font-family="monospace" font-size="11px">{{ datas.payment.paymentId }}</span>
            </mj-text>

            <mj-button background-color="#0f172a" color="#ffffff" border-radius="12px" font-weight="800" text-transform="uppercase" font-size="12px" padding-top="30px" href="{{ datas.reservationLink }}">
                Gérer ma réservation
            </mj-button>

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