e-ticket/templates/account/index.html.twig

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

{% block title %}Mon compte - E-Ticket{% endblock %}

{% block body %}
<div class="page-container-lg">
    <div class="mb-8">
        <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Mon compte</h1>
        <p class="font-bold text-gray-500 italic">Bonjour {{ app.user.firstName }}, bienvenue sur votre espace.</p>
    </div>

    {% for message in app.flashes('success') %}
        <div class="flash-success">
            <p class="font-black text-sm">{{ message }}</p>
        </div>
    {% endfor %}
    {% for message in app.flashes('error') %}
        <div class="flash-error">
            <p class="font-black text-sm">{{ message }}</p>
        </div>
    {% endfor %}

    {% if isOrganizer and not app.user.approved %}
    <div class="card-brutal-warn p-8 text-center">
        <div class="text-4xl mb-4">&#9203;</div>
        <h2 class="text-xl font-black uppercase tracking-tighter italic mb-2">Compte en cours de validation</h2>
        <p class="font-bold text-gray-700 text-sm">Votre compte organisateur est en cours de validation par l'equipe E-Ticket. Vous recevrez un email une fois votre compte approuve.</p>
        <p class="text-gray-500 text-xs font-bold mt-4">Contactez <a href="mailto:contact@e-cosplay.fr" class="text-indigo-600 hover:underline">contact@e-cosplay.fr</a> pour toute question.</p>
    </div>

    {% else %}

    {% if isOrganizer %}
        {% if not app.user.stripeAccountId %}
        <div class="card-brutal-warn mb-8">
            <h2 class="text-sm font-black uppercase tracking-widest mb-2">Configuration Stripe requise
                <span class="bg-white border-2 border-gray-900 px-1.5 py-0.5 text-[10px] ml-2">Statut : non configure</span>
            </h2>
            <p class="text-sm font-bold text-gray-700 mb-4">Pour creer vos evenements, vendre des billets et recevoir vos paiements, vous devez creer votre compte vendeur via Stripe.</p>
            <a href="{{ path('app_account_stripe_connect') }}" class="btn-brutal font-black uppercase text-xs tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Creer mon compte Stripe</a>
        </div>

        {% elseif not app.user.stripeChargesEnabled and not app.user.stripePayoutsEnabled %}
        <div class="card-brutal-warn mb-8">
            <h2 class="text-sm font-black uppercase tracking-widest mb-2">Verification Stripe en cours
                <span class="bg-white border-2 border-gray-900 px-1.5 py-0.5 text-[10px] ml-2">Statut : {{ app.user.stripeStatus ?? 'en attente' }}</span>
            </h2>
            <p class="text-sm font-bold text-gray-700 mb-4">Votre compte Stripe est en cours de verification. Merci de patienter, vous serez notifie une fois la verification terminee.</p>
            <div class="flex gap-3 flex-wrap">
                <a href="{{ path('app_account_stripe_connect') }}" class="px-4 py-2 border-3 border-gray-900 bg-white inline-block font-black uppercase text-xs tracking-widest hover:bg-gray-100 transition-all">Completer ma verification</a>
                <form method="post" action="{{ path('app_account_stripe_cancel') }}" data-confirm="Etes-vous sur de vouloir annuler la creation de votre compte Stripe ?" class="inline">
                    <button type="submit" class="px-4 py-2 border-3 border-red-800 bg-red-600 text-white cursor-pointer font-black uppercase text-xs tracking-widest hover:bg-red-800 transition-all">Annuler la creation</button>
                </form>
            </div>
        </div>

        {% elseif app.user.stripeChargesEnabled and app.user.stripePayoutsEnabled %}
        <div class="card-brutal-green flex justify-between items-center flex-wrap gap-4 mb-8">
            <p class="font-black text-sm">Stripe Connect actif — Paiements et virements actives.
                <span class="bg-white border-2 border-gray-900 px-1.5 py-0.5 text-[10px] ml-2">Statut : {{ app.user.stripeStatus }}</span>
            </p>
            <div class="flex gap-2 flex-wrap">
                <a href="{{ path('app_account_stripe_dashboard') }}" target="_blank" class="px-3 py-1.5 border-2 border-gray-900 bg-white inline-block text-xs font-black uppercase tracking-widest hover:bg-gray-100 transition-all">Dashboard Stripe</a>
                <form method="post" action="{{ path('app_account_stripe_cancel') }}" data-confirm="Etes-vous sur de vouloir cloturer votre compte Stripe ? Vous ne pourrez plus recevoir de paiements." class="inline">
                    <button type="submit" class="px-3 py-1.5 border-2 border-red-800 bg-red-600 text-white cursor-pointer text-xs font-black uppercase tracking-widest hover:bg-red-800 transition-all">Cloturer</button>
                </form>
            </div>
        </div>

        {% else %}
        <div class="card-brutal-error mb-8">
            <h2 class="text-sm font-black uppercase tracking-widest mb-2 text-red-800">Compte Stripe refuse
                <span class="bg-white border-2 border-red-800 px-1.5 py-0.5 text-[10px] ml-2">Statut : {{ app.user.stripeStatus ?? 'refuse' }}</span>
            </h2>
            <p class="text-sm font-bold text-gray-700">Stripe a refuse votre compte vendeur. Vous ne pouvez pas utiliser nos services de vente pour le moment. Contactez <a href="mailto:contact@e-cosplay.fr" class="text-indigo-600 hover:underline">contact@e-cosplay.fr</a> pour plus d'informations.</p>
        </div>
        {% endif %}
    {% endif %}

    <div class="flex flex-wrap overflow-x-auto mb-8">
        {% if isOrganizer %}
            <a href="{{ path('app_account', {tab: 'events'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'events' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Evenements / Brocantes</a>
            <a href="{{ path('app_account', {tab: 'subaccounts'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'subaccounts' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Sous-comptes</a>
            <a href="{{ path('app_account', {tab: 'payouts'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'payouts' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Virements</a>
        {% endif %}
        <a href="{{ path('app_account', {tab: 'tickets'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'tickets' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Billets</a>
        <a href="{{ path('app_account', {tab: 'purchases'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'purchases' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Achats</a>
        <a href="{{ path('app_account', {tab: 'invoices'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'invoices' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Factures</a>
        <a href="{{ path('app_account', {tab: 'settings'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 {{ tab == 'settings' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Parametres</a>
    </div>

    {% if tab == 'tickets' %}
    <div class="card-brutal overflow-hidden">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Mes billets</h2>
        </div>
        {% if userTickets|length > 0 %}
        <div class="p-6">
            {% for ticket in userTickets %}
            {% set order = ticket.billetBuyer %}
            {% set evt = order.event %}
            <div class="border-2 border-gray-900 bg-white mb-4 overflow-hidden">
                <div class="flex flex-col md:flex-row">
                    <div class="flex-1 p-4">
                        <div class="flex flex-wrap items-center gap-3 mb-2">
                            <span class="font-black uppercase text-sm">{{ ticket.billetName }}</span>
                            {% if ticket.state == 'valid' %}
                                <span class="badge-green text-[10px] font-black uppercase">Actif</span>
                            {% elseif ticket.state == 'expired' %}
                                <span class="badge-yellow text-[10px] font-black uppercase">Expire</span>
                            {% else %}
                                <span class="badge-red text-[10px] font-black uppercase">{{ ticket.state == 'invalid' ? 'Annule' : ticket.state }}</span>
                            {% endif %}
                            {% if ticket.firstScannedAt %}
                                <span class="text-[10px] font-bold text-gray-400">Scanne le {{ ticket.firstScannedAt|date('d/m/Y H:i') }}</span>
                            {% endif %}
                        </div>

                        <div class="space-y-1 text-sm font-bold text-gray-600 mb-3">
                            <p class="font-black text-gray-900">{{ evt.title }}</p>
                            <p>{{ evt.startAt|date('d/m/Y') }} — {{ evt.startAt|date('H:i') }} a {{ evt.endAt|date('H:i') }}</p>
                            <p>{{ evt.address }}, {{ evt.zipcode }} {{ evt.city }}</p>
                        </div>

                        <div class="flex flex-wrap gap-4 text-xs font-bold text-gray-400">
                            <span>Ref: <span class="font-mono text-gray-600">{{ ticket.reference }}</span></span>
                            <span>Commande: <span class="text-gray-600">{{ order.orderNumber }}</span></span>
                            <span>Prix: <span class="text-indigo-600 font-black">{{ ticket.unitPriceHTDecimal|number_format(2, ',', ' ') }} &euro;</span></span>
                        </div>
                    </div>

                    <div class="flex items-center gap-2 p-4 border-t md:border-t-0 md:border-l border-gray-200">
                        <a href="{{ path('app_order_download_ticket', {orderNumber: order.orderNumber, token: order.accessToken, ticketReference: ticket.reference}) }}" class="px-3 py-2 border-2 border-gray-900 bg-white text-xs font-black uppercase hover:bg-indigo-600 hover:text-white transition-all" target="_blank">
                            Telecharger PDF
                        </a>
                        <a href="{{ path('app_order_public', {orderNumber: order.orderNumber, token: order.accessToken}) }}" class="px-3 py-2 border-2 border-gray-900 bg-white text-xs font-black uppercase hover:bg-gray-100 transition-all">
                            Commande
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucun billet pour le moment.</p>
        </div>
        {% endif %}
    </div>

    {% elseif tab == 'purchases' %}
    <div class="card-brutal overflow-hidden">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Mes achats</h2>
        </div>
        {% set filtered_orders = orders|filter(o => o.status != 'pending') %}
        {% if filtered_orders|length > 0 %}
        <div class="p-6">
            {% for order in filtered_orders %}
            <div class="border-2 border-gray-900 bg-white mb-4 p-4">
                <div class="flex flex-wrap items-center gap-3 mb-3">
                    <span class="font-black uppercase text-sm">{{ order.orderNumber }}</span>
                    {% if order.status == 'paid' %}
                        <span class="badge-green text-[10px] font-black uppercase">Payee</span>
                    {% elseif order.status == 'refunded' %}
                        <span class="badge-yellow text-[10px] font-black uppercase">Remboursee</span>
                    {% elseif order.status == 'cancelled' %}
                        <span class="badge-red text-[10px] font-black uppercase">Annulee</span>
                    {% endif %}
                    <span class="text-xs font-bold text-gray-400">{{ order.createdAt|date('d/m/Y H:i') }}</span>
                </div>

                <div class="space-y-1 text-sm font-bold text-gray-600 mb-3">
                    <p class="font-black text-gray-900">{{ order.event.title }}</p>
                    <p>{{ order.event.startAt|date('d/m/Y') }} — {{ order.event.startAt|date('H:i') }} a {{ order.event.endAt|date('H:i') }}</p>
                    <p>{{ order.event.address }}, {{ order.event.zipcode }} {{ order.event.city }}</p>
                </div>

                <div class="flex flex-wrap items-center gap-4 mb-3">
                    {% for item in order.items %}
                    <div class="text-xs font-bold text-gray-500">
                        {{ item.billetName }} x{{ item.quantity }} — {{ item.lineTotalHTDecimal|number_format(2, ',', ' ') }} &euro;
                    </div>
                    {% endfor %}
                </div>

                <div class="flex flex-wrap items-center justify-between gap-3">
                    <div class="flex flex-wrap gap-3 text-xs font-bold text-gray-400">
                        <span>Total: <span class="font-black text-indigo-600">{{ order.totalHTDecimal|number_format(2, ',', ' ') }} &euro;</span></span>
                        {% if order.paymentMethod %}
                            <span>{{ order.paymentMethod }}{% if order.cardBrand and order.cardLast4 %} — {{ order.cardBrand|upper }} **** {{ order.cardLast4 }}{% endif %}</span>
                        {% endif %}
                    </div>
                    <div class="flex gap-2">
                        {% if order.status == 'paid' %}
                        <a href="{{ path('app_order_invoice', {orderNumber: order.orderNumber, token: order.accessToken}) }}" class="px-3 py-2 border-2 border-gray-900 bg-white text-xs font-black uppercase hover:bg-gray-100 transition-all" target="_blank">
                            Facture
                        </a>
                        {% endif %}
                        <a href="{{ path('app_order_public', {orderNumber: order.orderNumber, token: order.accessToken}) }}" class="px-3 py-2 border-2 border-gray-900 bg-white text-xs font-black uppercase hover:bg-indigo-600 hover:text-white transition-all">
                            Commande
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucun achat pour le moment.</p>
        </div>
        {% endif %}
    </div>

    {% elseif tab == 'invoices' %}
    <div class="card-brutal overflow-hidden">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Mes factures</h2>
        </div>
        {% set paid_orders = orders|filter(o => o.status == 'paid') %}
        {% if paid_orders|length > 0 %}
        <div class="p-6">
            {% for order in paid_orders %}
            <div class="flex flex-wrap items-center gap-4 py-3 {{ not loop.last ? 'border-b border-gray-200' : '' }}">
                <div class="flex-1 min-w-0">
                    <p class="font-black uppercase text-sm">Facture {{ order.orderNumber }}</p>
                    <p class="text-xs font-bold text-gray-500">{{ order.event.title }} — {{ order.paidAt ? order.paidAt|date('d/m/Y') : order.createdAt|date('d/m/Y') }}</p>
                </div>
                <span class="font-black text-sm text-indigo-600">{{ order.totalHTDecimal|number_format(2, ',', ' ') }} &euro;</span>
                <a href="{{ path('app_order_invoice', {orderNumber: order.orderNumber, token: order.accessToken}) }}" class="px-3 py-2 border-2 border-gray-900 bg-white text-xs font-black uppercase hover:bg-indigo-600 hover:text-white transition-all" target="_blank">
                    Telecharger
                </a>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucune facture pour le moment.</p>
        </div>
        {% endif %}
    </div>

    {% elseif tab == 'events'  %}
    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
        <a href="{{ path('app_account_create_event') }}" class="btn-brutal font-black uppercase text-xs tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
            + Creer un evenement
        </a>
        <form method="get" action="{{ path('app_account') }}" class="flex gap-2">
            <input type="hidden" name="tab" value="events">
            <input type="text" name="q" value="{{ app.request.query.get('q', '') }}" class="form-input max-w-[300px]" placeholder="Rechercher un evenement...">
            <button type="submit" class="px-4 py-2 border-2 border-gray-900 bg-[#fabf04] font-black uppercase text-xs tracking-widest cursor-pointer hover:bg-indigo-600 hover:text-white transition-all">Rechercher</button>
        </form>
    </div>

    {% if isOrganizer and (not app.user.stripeChargesEnabled or not app.user.stripePayoutsEnabled) %}
    <div class="card-brutal-warn mb-6">
        <p class="font-black text-sm">Configuration Stripe ou validation est requise !</p>
    </div>
    {% endif %}

    <div class="card-brutal overflow-hidden">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Mes evenements / Brocantes / Reservations</h2>
        </div>
        {% if events|length > 0 %}
        <div class="overflow-x-auto">
        <table class="w-full border-collapse">
            <thead>
                <tr class="bg-gray-50 border-b-2 border-gray-200">
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Evenement</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Date</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Lieu</th>
                    <th class="px-6 py-3 text-center text-[10px] font-black uppercase tracking-widest text-gray-400">Statut</th>
                    <th class="px-6 py-3 text-right text-[10px] font-black uppercase tracking-widest text-gray-400">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for event in events %}
                <tr class="border-b border-gray-200 hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4">
                        <p class="font-black text-sm">{{ event.title }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-bold">{{ event.startAt|date('d/m/Y') }}</p>
                        <p class="text-xs text-gray-400 font-bold">{{ event.startAt|date('H:i') }} - {{ event.endAt|date('H:i') }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-bold">{{ event.city }}</p>
                        <p class="text-xs text-gray-400 font-bold">{{ event.zipcode }}</p>
                    </td>
                    <td class="px-6 py-4 text-center">
                        {% if event.online %}
                            <span class="badge-green text-xs font-black uppercase">En ligne</span>
                        {% else %}
                            <span class="badge-red text-xs font-black uppercase">Hors ligne</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex gap-2 justify-end">
                            <a href="{{ path('app_account_edit_event', {id: event.id}) }}" class="px-3 py-1 border-2 border-gray-900 bg-white text-xs font-black uppercase tracking-widest hover:bg-gray-100 transition-all">Modifier</a>
                            <form method="post" action="{{ path('app_account_delete_event', {id: event.id}) }}" data-confirm="Etes-vous sur de vouloir supprimer cet evenement ?" class="inline">
                                <button type="submit" class="px-3 py-1 border-2 border-red-800 bg-red-600 text-white text-xs font-black uppercase tracking-widest hover:bg-red-800 transition-all cursor-pointer">Supprimer</button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        {% else %}
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucun evenement pour le moment.</p>
        </div>
        {% endif %}
    </div>

    {% if events.getTotalItemCount > 10 %}
    <div class="mt-6">
        {{ knp_pagination_render(events) }}
    </div>
    {% endif %}

    {% elseif tab == 'subaccounts'  %}

    <div class="card-brutal p-6 mb-8">
        <h2 class="text-sm font-black uppercase tracking-widest mb-4">Creer un sous-compte</h2>
        <form method="post" action="{{ path('app_account_create_subaccount') }}" class="flex flex-col gap-4">
            <div class="flex flex-wrap gap-4">
                <div class="flex-1 min-w-[140px]">
                    <label for="sub_last_name" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Nom</label>
                    <input type="text" id="sub_last_name" name="last_name" required class="w-full px-3 py-2 border-2 border-gray-900 font-bold outline-none" placeholder="Dupont">
                </div>
                <div class="flex-1 min-w-[140px]">
                    <label for="sub_first_name" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Prenom</label>
                    <input type="text" id="sub_first_name" name="first_name" required class="w-full px-3 py-2 border-2 border-gray-900 font-bold outline-none" placeholder="Jean">
                </div>
                <div class="flex-[2] min-w-[200px]">
                    <label for="sub_email" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Email</label>
                    <input type="email" id="sub_email" name="email" required class="w-full px-3 py-2 border-2 border-gray-900 font-bold outline-none" placeholder="collaborateur@exemple.fr">
                </div>
            </div>
            <div>
                <p class="text-[10px] tracking-widest mb-2 font-black uppercase text-gray-400">Permissions</p>
                <div class="flex flex-wrap gap-4">
                    <label class="flex items-center gap-2 cursor-pointer text-sm font-bold">
                        <input type="checkbox" name="permissions[]" value="scanner" class="w-4 h-4"> Scanner (valider les billets)
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer text-sm font-bold">
                        <input type="checkbox" name="permissions[]" value="events" class="w-4 h-4"> Evenements (creer, modifier, supprimer)
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer text-sm font-bold">
                        <input type="checkbox" name="permissions[]" value="tickets" class="w-4 h-4"> Billets (invitations gratuites)
                    </label>
                </div>
            </div>
            <button type="submit" class="px-4 py-2 border-2 border-gray-900 bg-yellow-400 cursor-pointer self-start font-black uppercase text-xs tracking-widest hover:bg-green-500 hover:text-black transition-all">Creer</button>
        </form>
    </div>

    <div class="card-brutal">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Sous-comptes</h2>
        </div>
        {% if subAccounts|length > 0 %}
        <div class="overflow-x-auto">
        <table class="detail-table">
            <thead>
                <tr class="border-b-2 border-gray-200">
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Nom</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Email</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Permissions</th>
                    <th class="px-6 py-3 text-right text-[10px] font-black uppercase tracking-widest text-gray-400">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for sub in subAccounts %}
                <tr class="border-b border-gray-200 hover:bg-gray-50 transition-all">
                    <td class="px-6 py-3 font-bold text-sm">{{ sub.firstName }} {{ sub.lastName }}</td>
                    <td class="px-6 py-3 text-sm text-gray-600">{{ sub.email }}</td>
                    <td class="px-6 py-3">
                        {% for perm in sub.subAccountPermissions ?? [] %}
                            {% if perm == 'scanner' %}
                                <span class="bg-blue-100 border-2 border-gray-900 px-1.5 py-0.5 text-xs font-black uppercase">Scanner</span>
                            {% elseif perm == 'events' %}
                                <span class="bg-indigo-100 border-2 border-gray-900 px-1.5 py-0.5 text-xs font-black uppercase">Evenements</span>
                            {% elseif perm == 'tickets' %}
                                <span class="bg-amber-100 border-2 border-gray-900 px-1.5 py-0.5 text-xs font-black uppercase">Billets</span>
                            {% endif %}
                        {% endfor %}
                    </td>
                    <td class="px-6 py-3 text-right">
                        <div class="flex gap-2 justify-end">
                            <a href="{{ path('app_account_edit_subaccount_page', {id: sub.id}) }}" class="border-2 border-gray-900 px-2 py-1 bg-yellow-400 inline-block text-xs font-black uppercase tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Editer</a>
                            <form method="post" action="{{ path('app_account_delete_subaccount', {id: sub.id}) }}" data-confirm="Supprimer le sous-compte de {{ sub.firstName }} {{ sub.lastName }} ?" class="inline">
                                <button type="submit" class="border-2 border-red-800 px-2 py-1 bg-red-600 text-white cursor-pointer text-xs font-black uppercase tracking-widest hover:bg-red-800 transition-all">Supprimer</button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        {% else %}
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucun sous-compte pour le moment.</p>
        </div>
        {% endif %}
    </div>

    {% elseif tab == 'payouts'  %}
    <div class="card-brutal">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Mes virements</h2>
        </div>
        {% if isOrganizer and (not app.user.stripeChargesEnabled or not app.user.stripePayoutsEnabled) %}
        <div class="p-6 bg-amber-100 border-b-2 border-gray-200">
            <p class="font-black text-sm">Configuration Stripe ou validation est requise !</p>
        </div>
        {% endif %}
        {% if payouts|length > 0 %}
        <div class="overflow-x-auto">
        <table class="detail-table">
            <thead>
                <tr class="border-b-2 border-gray-200">
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">ID</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Montant</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Statut</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Destination</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Arrivee</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Date</th>
                    <th class="px-6 py-3 text-right text-[10px] font-black uppercase tracking-widest text-gray-400">Attestation</th>
                </tr>
            </thead>
            <tbody>
                {% for payout in payouts %}
                <tr class="border-b border-gray-200 hover:bg-gray-50 transition-all">
                    <td class="px-6 py-3 text-xs font-mono text-gray-500">{{ payout.stripePayoutId }}</td>
                    <td class="px-6 py-3 text-sm font-bold">{{ payout.amountDecimal|number_format(2, ',', ' ') }} {{ payout.currency|upper }}</td>
                    <td class="px-6 py-3">
                        {% if payout.status == 'paid' %}
                            <span class="bg-green-100 border-2 border-gray-900 px-2 py-0.5 text-xs font-black uppercase">{{ payout.status }}</span>
                        {% elseif payout.status == 'failed' or payout.status == 'canceled' %}
                            <span class="bg-red-100 border-2 border-gray-900 px-2 py-0.5 text-xs font-black uppercase">{{ payout.status }}</span>
                        {% else %}
                            <span class="bg-amber-100 border-2 border-gray-900 px-2 py-0.5 text-xs font-black uppercase">{{ payout.status }}</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-3 text-xs font-mono text-gray-500">{{ payout.destination ?? '—' }}</td>
                    <td class="px-6 py-3 text-sm text-gray-500">{{ payout.arrivalDate ? payout.arrivalDate|date('d/m/Y') : '—' }}</td>
                    <td class="px-6 py-3 text-sm text-gray-400">{{ payout.createdAt|date('d/m/Y H:i') }}</td>
                    <td class="px-6 py-3 text-right">
                        {% if payout.status == 'paid' %}
                            <a href="{{ path('app_account_payout_pdf', {id: payout.id}) }}" target="_blank" class="border-2 border-gray-900 px-2 py-1 bg-yellow-400 inline-block text-xs font-black uppercase tracking-widest hover:bg-indigo-600 hover:text-black transition-all">PDF</a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        {% else %}
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucun virement pour le moment.</p>
        </div>
        {% endif %}
    </div>

    {% elseif tab == 'settings' %}
    <div class="card-brutal p-6">
        <h2 class="text-sm font-black uppercase tracking-widest mb-4">Parametres du compte</h2>
        <form method="post" action="{{ path('app_account_settings') }}" enctype="multipart/form-data" class="form-col">
            <div class="form-row">
                <div class="form-group">
                    <label for="settings_last_name" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Nom</label>
                    <input type="text" id="settings_last_name" name="last_name" value="{{ app.user.lastName }}" required
                        class="form-input {{ isOrganizer ? 'bg-gray-100' : '' }}"
                        {{ isOrganizer ? 'disabled' : '' }}>
                </div>
                <div class="form-group">
                    <label for="settings_first_name" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Prenom</label>
                    <input type="text" id="settings_first_name" name="first_name" value="{{ app.user.firstName }}" required
                        class="form-input {{ isOrganizer ? 'bg-gray-100' : '' }}"
                        {{ isOrganizer ? 'disabled' : '' }}>
                </div>
            </div>

            <div>
                <label for="settings_email" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Email</label>
                <input type="email" id="settings_email" name="email" value="{{ app.user.email }}" required
                    class="form-input">
            </div>

            <div>
                <label for="settings_phone" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Telephone</label>
                <input type="tel" id="settings_phone" name="phone" value="{{ app.user.phone }}"
                    class="form-input">
            </div>

            {% if not isOrganizer %}
            <div>
                <label for="settings_address" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Adresse</label>
                <input type="text" id="settings_address" name="address" value="{{ app.user.address }}"
                    class="form-input">
            </div>

            <div class="form-row">
                <div class="flex-1 min-w-[120px]">
                    <label for="settings_postal" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Code postal</label>
                    <input type="text" id="settings_postal" name="postal_code" value="{{ app.user.postalCode }}" maxlength="5"
                        class="form-input">
                </div>
                <div class="flex-[2] min-w-[200px]">
                    <label for="settings_city" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Ville</label>
                    <input type="text" id="settings_city" name="city" value="{{ app.user.city }}"
                        class="form-input">
                </div>
            </div>
            {% endif %}

            {% if isOrganizer %}
            <div class="border-4 border-gray-900 bg-yellow-400 p-6">
                <h3 class="text-[10px] tracking-widest mb-4 font-black uppercase">Logo de l'organisation</h3>
                {% if app.user.logoName %}
                <div class="mb-4">
                    <img src="{{ ('/uploads/logos/' ~ app.user.logoName) | imagine_filter('organizer_logo') }}" alt="Logo" class="max-h-20 border-2 border-gray-900">
                </div>
                {% endif %}
                <input type="file" name="logo" accept="image/png,image/jpeg,image/webp"
                    class="p-2 border-2 border-gray-900 bg-white font-bold w-full">
                <p class="text-xs font-bold mt-2">PNG, JPEG ou WebP. Max 2 Mo.</p>
            </div>

            <div class="border-4 border-gray-900 bg-white p-6">
                <h3 class="text-[10px] tracking-widest mb-4 font-black uppercase text-gray-400">Reseaux sociaux & site internet</h3>
                <div class="flex flex-col gap-4">
                    <div>
                        <label for="settings_website" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Site internet</label>
                        <input type="url" id="settings_website" name="website" value="{{ app.user.website ?? '' }}"
                            class="w-full px-3 py-2 border-3 border-gray-900 font-bold outline-none"
                            placeholder="https://mon-association.fr">
                    </div>
                    <div class="flex flex-wrap gap-4">
                        <div class="flex-1 min-w-[200px]">
                            <label for="settings_facebook" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Facebook</label>
                            <input type="url" id="settings_facebook" name="facebook" value="{{ app.user.facebook ?? '' }}"
                                class="w-full px-3 py-2 border-3 border-gray-900 font-bold outline-none"
                                placeholder="https://facebook.com/...">
                        </div>
                        <div class="flex-1 min-w-[200px]">
                            <label for="settings_instagram" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Instagram</label>
                            <input type="url" id="settings_instagram" name="instagram" value="{{ app.user.instagram ?? '' }}"
                                class="w-full px-3 py-2 border-3 border-gray-900 font-bold outline-none"
                                placeholder="https://instagram.com/...">
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-4">
                        <div class="flex-1 min-w-[200px]">
                            <label for="settings_twitter" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">X (Twitter)</label>
                            <input type="url" id="settings_twitter" name="twitter" value="{{ app.user.twitter ?? '' }}"
                                class="w-full px-3 py-2 border-3 border-gray-900 font-bold outline-none"
                                placeholder="https://x.com/...">
                        </div>
                        <div class="flex-1 min-w-[200px]">
                            <label for="settings_tiktok" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">TikTok</label>
                            <input type="url" id="settings_tiktok" name="tiktok" value="{{ app.user.tiktok ?? '' }}"
                                class="w-full px-3 py-2 border-3 border-gray-900 font-bold outline-none"
                                placeholder="https://tiktok.com/@...">
                        </div>
                    </div>
                </div>
            </div>

            <div class="border-4 border-gray-900 bg-gray-50 px-6 py-4">
                <p class="text-xs font-bold text-gray-500">Les informations de votre organisation (raison sociale, SIRET, adresse) ne peuvent etre modifiees que par l'equipe E-Ticket. Contactez <a href="mailto:contact@e-cosplay.fr" class="text-indigo-600 hover:underline">contact@e-cosplay.fr</a> pour toute modification.</p>
            </div>
            {% endif %}

            <div>
                <button type="submit"
                    class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-green-500 hover:text-black transition-all">
                    Enregistrer
                </button>
            </div>
        </form>
    </div>
    {% endif %}
</div>
{% endif %}
{% endblock %}