{% extends 'admin/_layout.html.twig' %}

{% block title %}Evenements devis {{ devis.orderNumber.numOrder }} - Association E-Cosplay{% endblock %}

{% block admin_content %}
<div class="page-container">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold heading-page">Evenements DocuSeal</h1>
            <p class="text-xs text-gray-500 mt-1">Devis <span class="font-mono font-bold">{{ devis.orderNumber.numOrder }}</span></p>
        </div>
        <a href="{{ path('app_admin_clients_show', {id: devis.customer.id, tab: 'devis'}) }}" class="px-4 py-2 glass font-bold uppercase text-[10px] tracking-widest hover:bg-gray-900 hover:text-white transition-all">Retour</a>
    </div>

    {% if events|length > 0 %}
        <div class="glass overflow-x-auto overflow-hidden">
            <table class="w-full text-sm">
                <thead>
                    <tr class="glass-dark text-white">
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Date</th>
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Evenement</th>
                        <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Submission</th>
                        <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Submitter</th>
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Payload</th>
                    </tr>
                </thead>
                <tbody>
                    {% for e in events %}
                        <tr class="border-b border-white/20 hover:bg-white/50 align-top">
                            <td class="px-4 py-3 text-xs text-gray-500 whitespace-nowrap">{{ e.createdAt|date('d/m/Y H:i:s') }}</td>
                            <td class="px-4 py-3">
                                {% set eventType = e.eventType %}
                                {% if eventType == 'form.viewed' %}
                                    <span class="px-2 py-0.5 bg-blue-500/20 text-blue-700 font-bold uppercase text-[10px]">Vu</span>
                                {% elseif eventType == 'form.started' %}
                                    <span class="px-2 py-0.5 bg-yellow-500/20 text-yellow-700 font-bold uppercase text-[10px]">Demarre</span>
                                {% elseif eventType == 'form.completed' %}
                                    <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Signe</span>
                                {% elseif eventType == 'form.declined' %}
                                    <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[10px]">Refuse</span>
                                {% else %}
                                    <span class="px-2 py-0.5 bg-gray-100 text-gray-600 font-bold uppercase text-[10px]">{{ eventType }}</span>
                                {% endif %}
                            </td>
                            <td class="px-4 py-3 text-center text-xs font-mono">{{ e.submissionId ?? '—' }}</td>
                            <td class="px-4 py-3 text-center text-xs font-mono">{{ e.submitterId ?? '—' }}</td>
                            <td class="px-4 py-3">
                                {% if e.payload %}
                                    <details>
                                        <summary class="cursor-pointer text-[10px] text-gray-400 hover:text-gray-700">Voir payload</summary>
                                        <pre class="mt-2 p-2 bg-gray-50 text-[9px] font-mono overflow-x-auto max-w-2xl whitespace-pre-wrap">{{ e.payload }}</pre>
                                    </details>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <p class="mt-3 text-xs text-gray-400">{{ events|length }} evenement(s)</p>
    {% else %}
        <div class="glass p-8 text-center text-gray-400 font-bold">Aucun evenement pour ce devis.</div>
    {% endif %}
</div>
{% endblock %}
