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

{% block title %}Verification facture {{ facture.invoiceNumber }} - Association E-Cosplay{% endblock %}

{% block body %}
<main class="max-w-2xl mx-auto px-4 py-16">
    <div class="glass p-10 text-center">
        <div class="mx-auto mb-6 w-20 h-20 bg-green-500/20 flex items-center justify-center">
            <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
            </svg>
        </div>

        <h1 class="text-2xl font-bold heading-page mb-2">Facture authentique</h1>
        <p class="text-xs text-green-600 font-bold uppercase tracking-widest mb-6">Document verifie par Association E-Cosplay</p>

        <div class="glass p-6 text-left mb-6">
            <div class="grid grid-cols-2 gap-4 text-xs">
                <div>
                    <span class="font-bold uppercase tracking-widest text-[10px] text-gray-400">Numero</span>
                    <p class="font-mono font-bold text-base mt-1">{{ facture.invoiceNumber }}</p>
                </div>
                <div>
                    <span class="font-bold uppercase tracking-widest text-[10px] text-gray-400">Date</span>
                    <p class="font-bold text-base mt-1">{{ facture.createdAt|date('d/m/Y') }}</p>
                </div>
                <div>
                    <span class="font-bold uppercase tracking-widest text-[10px] text-gray-400">Client</span>
                    <p class="font-bold mt-1">{{ customer ? customer.fullName : 'N/A' }}</p>
                    {% if customer and customer.raisonSociale %}
                        <p class="text-gray-500 text-[10px]">{{ customer.raisonSociale }}</p>
                    {% endif %}
                </div>
                <div>
                    <span class="font-bold uppercase tracking-widest text-[10px] text-gray-400">Total TTC</span>
                    <p class="font-mono font-bold text-base mt-1">{{ facture.totalTtc }} &euro;</p>
                </div>
                {% if facture.isPaid %}
                    <div class="col-span-2">
                        <span class="font-bold uppercase tracking-widest text-[10px] text-gray-400">Statut</span>
                        <p class="font-bold text-green-600 mt-1">Payee le {{ facture.paidAt|date('d/m/Y') }} par {{ facture.paidMethod }}</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="glass p-3 text-[9px] text-gray-400 font-mono break-all">
            HMAC-SHA256 : {{ facture.hmac }}
        </div>

        <p class="text-[10px] text-gray-400 uppercase tracking-widest mt-6">
            Emis par <strong>Association E-Cosplay</strong> &mdash; SIREN 943121517
        </p>
    </div>
</main>
{% endblock %}
