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

{% block title %}Vos billets - {{ order.event.title }}{% endblock %}

{% block content %}
    {% if isInvitation|default(false) %}
    <h2>Votre invitation !</h2>
    <p>Bonjour {{ order.firstName }},</p>
    <p>Vous etes invite(e) a l'evenement <strong>{{ order.event.title }}</strong>.</p>
    {% else %}
    <h2>Vos billets sont prets !</h2>
    <p>Bonjour {{ order.firstName }},</p>
    <p>Merci pour votre commande <strong>{{ order.orderNumber }}</strong> pour l'evenement <strong>{{ order.event.title }}</strong>.</p>
    {% endif %}

    <table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
        <thead>
            <tr style="background: #111827; color: #fff;">
                <th style="padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;">Billet</th>
                <th style="padding: 10px 12px; text-align: center; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;">Qt</th>
                <th style="padding: 10px 12px; text-align: right; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;">Total</th>
            </tr>
        </thead>
        <tbody>
            {% for item in order.items %}
            <tr style="border-bottom: 1px solid #e5e7eb;">
                <td style="padding: 10px 12px; font-weight: 700; font-size: 14px;">{{ item.billetName }}</td>
                <td style="padding: 10px 12px; text-align: center; font-weight: 700;">{{ item.quantity }}</td>
                <td style="padding: 10px 12px; text-align: right; font-weight: 900; color: #4f46e5;">{{ item.lineTotalHTDecimal|number_format(2, ',', ' ') }} &euro;</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr style="border-top: 3px solid #111827;">
                <td colspan="2" style="padding: 10px 12px; font-weight: 900; text-transform: uppercase; font-size: 13px;">Total</td>
                <td style="padding: 10px 12px; text-align: right; font-weight: 900; font-size: 16px; color: #4f46e5;">{{ order.totalHTDecimal|number_format(2, ',', ' ') }} &euro;</td>
            </tr>
        </tfoot>
    </table>

    {% if tickets|length > 0 %}
    <p style="font-size: 13px; font-weight: 700; color: #6b7280;">Vos billets sont en piece jointe de cet email. Chaque billet contient un QR code unique a presenter a l'entree.</p>

    <table style="width: 100%; border-collapse: collapse; margin: 16px 0;">
        <thead>
            <tr style="background: #f3f4f6;">
                <th style="padding: 6px 0; text-align: left; font-size: 11px; font-weight: 900; text-transform: uppercase;">Billet</th>
                <th style="padding: 6px 0; text-align: right; font-size: 11px; font-weight: 900; text-transform: uppercase;">Reference</th>
            </tr>
        </thead>
        <tbody>
            {% for ticket in tickets %}
            <tr style="border-bottom: 1px solid #e5e7eb;">
                <td style="padding: 6px 0; font-size: 12px; font-weight: 700;">{{ ticket.billetName }}</td>
                <td style="padding: 6px 0; font-size: 11px; font-family: monospace; color: #6b7280; text-align: right;">{{ ticket.reference }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}

    <p style="text-align: center; margin: 24px 0;">
        <a href="{{ orderUrl }}" class="btn">Voir ma commande</a>
    </p>

    <p style="font-size: 12px; color: #9ca3af;">Evenement : {{ order.event.title }}<br>
    Date : {{ order.event.startAt|date('d/m/Y') }} de {{ order.event.startAt|date('H:i') }} a {{ order.event.endAt|date('H:i') }}<br>
    Lieu : {{ order.event.address }}, {{ order.event.zipcode }} {{ order.event.city }}</p>
{% endblock %}
