<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Attestation - {{ event.title }}</title>
    <style>
        @page { size: A4; margin: 25mm 20mm; }
        body {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 11px;
            color: #111;
            margin: 0;
            padding: 0;
        }

        .header {
            background: #111827;
            color: #fabf04;
            padding: 20px 24px;
            margin: -25mm -20mm 0 -20mm;
            width: calc(100% + 40mm);
            border-bottom: 4px solid #fabf04;
        }
        .header-title {
            font-size: 18px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #fabf04;
        }
        .header-sub {
            font-size: 10px;
            color: #fff;
            opacity: 0.7;
            margin-top: 4px;
        }

        h2 {
            font-size: 13px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #111827;
            border-bottom: 3px solid #fabf04;
            padding-bottom: 6px;
            margin: 24px 0 12px 0;
        }

        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 16px;
        }
        .info-table td {
            padding: 5px 8px;
            vertical-align: top;
        }
        .info-label {
            font-size: 8px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #999;
        }
        .info-value {
            font-size: 11px;
            font-weight: bold;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 16px;
        }
        .data-table th {
            background: #fabf04;
            color: #111827;
            padding: 8px 10px;
            font-size: 8px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: left;
        }
        .data-table th:last-child,
        .data-table th:nth-child(3),
        .data-table th:nth-child(4) {
            text-align: right;
        }
        .data-table td {
            padding: 7px 10px;
            font-size: 10px;
            border-bottom: 1px solid #e5e7eb;
        }
        .data-table td:last-child,
        .data-table td:nth-child(3),
        .data-table td:nth-child(4) {
            text-align: right;
            font-weight: bold;
        }
        .data-table tr:last-child td {
            border-bottom: 2px solid #111827;
        }
        .data-table .total-row td {
            background: #fffbeb;
            font-weight: bold;
            font-size: 11px;
            border-bottom: 3px solid #fabf04;
            border-top: 3px solid #fabf04;
        }

        .summary-box {
            border: 3px solid #fabf04;
            padding: 16px 20px;
            margin: 20px 0;
            background: #fffbeb;
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
        }

        .summary-table {
            width: 100%;
            border-collapse: collapse;
        }
        .summary-table td {
            padding: 5px 0;
        }
        .summary-table .label {
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #666;
        }
        .summary-table .value {
            text-align: right;
            font-size: 14px;
            font-weight: bold;
        }
        .summary-table .value-big {
            text-align: right;
            font-size: 18px;
            font-weight: bold;
            color: #111827;
        }

        .legal {
            margin-top: 30px;
            padding-top: 16px;
            border-top: 1px solid #e5e7eb;
        }
        .legal p {
            font-size: 9px;
            color: #666;
            line-height: 1.5;
            margin: 0 0 6px 0;
        }

        .footer {
            position: fixed;
            bottom: -15mm;
            left: -20mm;
            right: -20mm;
            background: #111827;
            color: #fabf04;
            padding: 10px 24px;
            font-size: 8px;
            border-top: 3px solid #fabf04;
        }
        .footer-table {
            width: 100%;
            border-collapse: collapse;
        }
        .footer-table td {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-title">Attestation</div>
        <div class="header-sub">{{ event.title }} — Generee le {{ generatedAt|date('d/m/Y a H:i') }}</div>
    </div>

    <div style="margin-top: 20px; padding: 16px 20px; border: 3px solid #fabf04; background: #fffbeb; font-size: 11px; line-height: 1.6;">
        {% if isSimple %}
        <p style="margin: 0;">Je soussigne, <strong>Serreau Jovann</strong>, president de l'association <strong>E-Cosplay</strong>, gestionnaire de la plateforme de billetterie <strong>E-Ticket</strong> (ticket.e-cosplay.fr), atteste par la presente que les chiffres fournis par la plateforme E-Ticket a l'organisateur mentionne ci-dessous sont valides et certifies conformes, dans le cadre de l'evenement <strong>{{ event.title }}</strong>.</p>
        <p style="margin: 8px 0 0 0;">Seuls les billets et votes ayant fait l'objet d'un paiement valide et confirme par Stripe sont pris en compte. Les invitations, accreditations staff et exposant ne sont pas comptabilises.</p>
        {% else %}
        <p style="margin: 0;">Je soussigne, <strong>Serreau Jovann</strong>, president de l'association <strong>E-Cosplay</strong>, gestionnaire de la plateforme de billetterie <strong>E-Ticket</strong> (ticket.e-cosplay.fr), atteste par la presente que les ventes ci-dessous ont ete realisees via notre plateforme pour le compte de l'organisateur mentionne, dans le cadre de l'evenement <strong>{{ event.title }}</strong>.</p>
        {% endif %}
    </div>

    <h2>Organisateur</h2>
    <table class="info-table">
        <tr>
            <td style="width: 50%;">
                <div class="info-label">Raison sociale</div>
                <div class="info-value">{{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }}</div>
            </td>
            <td>
                <div class="info-label">Email</div>
                <div class="info-value">{{ organizer.email }}</div>
            </td>
        </tr>
        <tr>
            {% if organizer.siret %}
            <td>
                <div class="info-label">SIRET</div>
                <div class="info-value">{{ organizer.siret }}</div>
            </td>
            {% endif %}
            {% if organizer.address %}
            <td>
                <div class="info-label">Adresse</div>
                <div class="info-value">{{ organizer.address }}{% if organizer.postalCode %}, {{ organizer.postalCode }}{% endif %}{% if organizer.city %} {{ organizer.city }}{% endif %}</div>
            </td>
            {% endif %}
        </tr>
    </table>

    <h2>Evenement</h2>
    <table class="info-table">
        <tr>
            <td style="width: 50%;">
                <div class="info-label">Nom</div>
                <div class="info-value">{{ event.title }}</div>
            </td>
            <td>
                <div class="info-label">Date</div>
                <div class="info-value">{{ event.startAt|date('d/m/Y H:i') }} — {{ event.endAt|date('d/m/Y H:i') }}</div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="info-label">Lieu</div>
                <div class="info-value">{{ event.address }}, {{ event.zipcode }} {{ event.city }}</div>
            </td>
            <td>
                {% if selectedCategories|length > 0 %}
                <div class="info-label">Categories selectionnees</div>
                <div class="info-value">{{ selectedCategories|join(', ') }}</div>
                {% endif %}
            </td>
        </tr>
    </table>

    {% if not isSimple %}
    <h2>Recapitulatif par type de billet</h2>
    <table class="data-table">
        <thead>
            <tr>
                <th>Categorie</th>
                <th>Billet</th>
                <th style="text-align: right;">Quantite</th>
            </tr>
        </thead>
        <tbody>
            {% for line in billetLines %}
            <tr>
                <td>{{ line.category }}</td>
                <td style="font-weight: bold;">{{ line.name }}</td>
                <td style="text-align: right;">{{ line.sold }}</td>
            </tr>
            {% endfor %}
            <tr class="total-row">
                <td colspan="2" style="text-align: right;">TOTAL</td>
                <td style="text-align: right;">{{ totalSold }}</td>
            </tr>
        </tbody>
    </table>

    {% if ticketDetails|length > 0 %}
    <h2>Liste des billets emis</h2>
    <table class="data-table">
        <thead>
            <tr>
                <th style="width: 5%;">#</th>
                <th>Reference</th>
                <th>Commande</th>
                <th>Billet</th>
                <th>Acheteur</th>
            </tr>
        </thead>
        <tbody>
            {% for ticket in ticketDetails %}
            <tr>
                <td>{{ loop.index }}</td>
                <td style="font-family: monospace; font-size: 8px;">{{ ticket.reference }}</td>
                <td style="font-family: monospace; font-size: 8px;">{{ ticket.orderNumber }}</td>
                <td style="font-weight: bold;">{{ ticket.billetName }}</td>
                <td>{{ ticket.buyerName }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}

    <div class="summary-box">
        <table class="summary-table">
            <tr>
                <td class="label">Total billets emis</td>
                <td class="value">{{ totalSold }}</td>
            </tr>
        </table>
    </div>
    {% endif %}

    <div style="margin-top: 20px; border: 2px solid #e5e7eb; padding: 16px; overflow: hidden;">
        <table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
            <tr>
                <td style="width: 170px; vertical-align: top; padding-right: 16px;">
                    {% if qrBase64 is defined and qrBase64 %}
                        <img src="{{ qrBase64 }}" alt="QR Verification" style="width: 150px; height: 150px;">
                        <div style="font-size: 7px; font-weight: bold; text-transform: uppercase; color: #999; text-align: center; margin-top: 4px;">Scannez pour verifier</div>
                    {% endif %}
                </td>
                <td style="vertical-align: top; overflow: hidden;">
                    <div style="font-size: 11px; color: #333; line-height: 1.6; overflow: hidden;">
                        <p style="margin: 0 0 6px; font-weight: bold;">Attestation enregistree et signee numeriquement.</p>
                        <p style="margin: 0 0 4px;"><strong>Reference :</strong> {{ attestationRef }}</p>
                        <p style="margin: 0 0 4px;"><strong>Signature :</strong> <span style="font-size: 8px; font-family: monospace;">{{ signatureHash|slice(0, 40) }}...</span></p>
                        <p style="margin: 0 0 4px;"><strong>Verification :</strong></p>
                        <p style="margin: 0 0 0; font-size: 10px; font-family: monospace; color: #4f46e5;">{{ verifyUrl }}</p>
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <div class="footer">
        <table class="footer-table">
            <tr>
                <td>E-Ticket — Plateforme de billetterie par E-Cosplay — ticket.e-cosplay.fr</td>
                <td style="text-align: right;">{{ attestationRef }}</td>
            </tr>
        </table>
    </div>
</body>
</html>
