<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Attestation de virement - {{ payout.stripePayoutId }}</title>
    <style>
        @page { margin: 0; }
        body {
            font-family: 'DejaVu Sans', sans-serif;
            color: #111827;
            margin: 0;
            padding: 0;
            font-size: 10px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='297' viewBox='0 0 210 297'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23fabf04'/%3E%3Cstop offset='100%25' stop-color='%23f97316'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='210' height='297' fill='url(%23g)'/%3E%3C/svg%3E");
            background-size: 100% 100%;
        }
        .title-bar {
            background: #f97316;
            padding: 15px 0;
            text-align: center;
            margin-bottom: 20px;
        }
        .title-bar h1 {
            font-family: 'DejaVu Sans', sans-serif;
            font-size: 18px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: white;
            margin: 0;
        }
        .title-bar span {
            font-size: 8px;
            color: rgba(255,255,255,0.8);
            letter-spacing: 1px;
        }
        .page { padding: 0 25px 25px 25px; }
        .two-columns { width: 100%; margin-bottom: 12px; }
        .two-columns td { vertical-align: top; width: 50%; padding: 0; border: none; }
        .info-block { border: 2px solid #111827; padding: 10px; background: rgba(255,255,255,0.85); }
        .info-block-left { border: 2px solid #111827; padding: 10px; margin-right: 8px; background: rgba(255,255,255,0.85); }
        .info-block h3 { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; margin: 0 0 6px 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 3px; }
        .info-block p { margin: 2px 0; font-size: 9px; }
        .info-block .name { font-size: 11px; font-weight: 900; }
        .attestation { font-size: 9px; font-style: italic; color: #111827; margin-bottom: 10px; background: rgba(255,255,255,0.7); padding: 5px 8px; }
        .amount-block { border: 2px solid #111827; background: rgba(255,255,255,0.9); padding: 10px 15px; margin-bottom: 10px; }
        .amount-block .label { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
        .amount-block .amount { font-size: 22px; font-weight: 900; }
        table.details { width: 100%; border-collapse: collapse; margin-bottom: 8px; border: 2px solid #111827; }
        table.details th { background: #111827; color: white; padding: 5px 10px; text-align: left; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; font-weight: 900; }
        table.details td { padding: 5px 10px; border-bottom: 1px solid #e5e7eb; font-size: 10px; background: rgba(255,255,255,0.85); }
        .status-paid { background: #d1fae5; border: 1px solid #111827; padding: 1px 5px; font-weight: 900; font-size: 9px; text-transform: uppercase; }
        .status-failed { background: #fee2e2; border: 1px solid #111827; padding: 1px 5px; font-weight: 900; font-size: 9px; text-transform: uppercase; }
        .status-pending { background: #fef3c7; border: 1px solid #111827; padding: 1px 5px; font-weight: 900; font-size: 9px; text-transform: uppercase; }
        .legal { font-size: 7px; color: #111827; line-height: 1.4; }
        .footer { padding: 8px 12px; background: rgba(0,0,0,0.1); border-top: 2px solid #111827; font-size: 8px; font-weight: 700; }
        .footer p { margin: 1px 0; }
    </style>
</head>
<body>
    <div class="title-bar">
        <h1>Attestation de virement</h1>
        <span>N° {{ payout.stripePayoutId }}</span>
    </div>

    <div class="page">
        <!-- NOSONAR: layout table required by dompdf (no CSS flexbox support) -->
        <table class="two-columns">
            <thead><tr><th></th><th></th></tr></thead>
            <tr>
                <td>
                    <div class="info-block-left">
                        <h3>Emetteur</h3>
                        {% if logoBase64 %}
                            <img src="{{ logoBase64 }}" alt="E-Cosplay" style="height:25px;margin-bottom:5px;">
                        {% endif %}
                        <p class="name">E-Ticket</p>
                        <p>Association E-Cosplay</p>
                        <p>RNA : W022006988 — SIREN : 943121517</p>
                        <p>42 rue de Saint-Quentin, 02800 Beautor</p>
                        <p>contact@e-cosplay.fr</p>
                    </div>
                </td>
                <td>
                    <div class="info-block">
                        <h3>Beneficiaire</h3>
                        <p class="name">{{ payout.organizer.companyName ?? (payout.organizer.firstName ~ ' ' ~ payout.organizer.lastName) }}</p>
                        <p>{{ payout.organizer.firstName }} {{ payout.organizer.lastName }}</p>
                        {% if payout.organizer.siret %}<p>SIRET : {{ payout.organizer.siret }}</p>{% endif %}
                        {% if payout.organizer.address %}<p>{{ payout.organizer.address }}, {{ payout.organizer.postalCode }} {{ payout.organizer.city }}</p>{% endif %}
                        {% if payout.organizer.phone %}<p>Tel : {{ payout.organizer.phone }}</p>{% endif %}
                        <p>{{ payout.organizer.email }}</p>
                    </div>
                </td>
            </tr>
        </table>

        <p class="attestation">L'association E-Cosplay atteste les informations suivantes suite aux informations recues par Stripe.</p>

        <div class="amount-block">
            <div class="label">Montant du virement</div>
            <div class="amount">{{ payout.amountDecimal|number_format(2, ',', ' ') }} {{ payout.currency|upper }}</div>
        </div>

        <table class="details">
            <thead>
                <tr>
                    <th style="width:40%;">Detail</th>
                    <th>Valeur</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>Reference</strong></td>
                    <td style="font-family:monospace;">{{ payout.stripePayoutId }}</td>
                </tr>
                <tr>
                    <td><strong>Statut</strong></td>
                    <td>
                        {% if payout.status == 'paid' %}
                            <span class="status-paid">{{ payout.status }}</span>
                        {% elseif payout.status == 'failed' or payout.status == 'canceled' %}
                            <span class="status-failed">{{ payout.status }}</span>
                        {% else %}
                            <span class="status-pending">{{ payout.status }}</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td><strong>Destination bancaire</strong></td>
                    <td>{{ payout.destination ?? '—' }}</td>
                </tr>
                <tr>
                    <td><strong>Date d'arrivee estimee</strong></td>
                    <td>{{ payout.arrivalDate ? payout.arrivalDate|date('d/m/Y') : '—' }}</td>
                </tr>
                <tr>
                    <td><strong>Date de creation</strong></td>
                    <td>{{ payout.createdAt|date('d/m/Y H:i') }}</td>
                </tr>
                <tr>
                    <td><strong>Compte Stripe</strong></td>
                    <td style="font-family:monospace;">{{ payout.stripeAccountId ?? '—' }}</td>
                </tr>
            </tbody>
        </table>

        <!-- NOSONAR: layout table required by dompdf -->
        <table style="width:100%;margin-bottom:6px;">
            <thead><tr><th></th><th></th></tr></thead>
            <tr>
                <td style="vertical-align:top;width:70%;padding:0;border:none;">
                    <p style="font-size:9px;color:#111827;line-height:1.5;">L'association E-Cosplay ne pourra etre tenue responsable des erreurs de virement emises par Stripe. Les informations presentees dans ce document sont conformes aux Conditions Generales de Vente (CGV) du site E-Ticket consultables a l'adresse ticket.e-cosplay.fr/cgv.</p>
                    <p style="font-size:9px;color:#111827;font-weight:700;margin-top:5px;">Verifiez l'authenticite : {{ checkUrl }}</p>
                </td>
                <td style="vertical-align:top;text-align:right;padding:0;border:none;">
                    {% if qrBase64 %}
                        <img src="{{ qrBase64 }}" alt="QR Code" style="width:70px;height:70px;">
                    {% endif %}
                </td>
            </tr>
        </table>

        <div class="footer">
            <p>E-TICKET — Association E-Cosplay (RNA W022006988) — 42 rue de Saint-Quentin, 02800 Beautor — contact@e-cosplay.fr</p>
            <p style="color:#6b7280;font-size:7px;">Document genere le {{ "now"|date("d/m/Y a H:i") }}</p>
        </div>
    </div>
</body>
</html>
