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

{% block title %}Organisateurs{% endblock %}

{% block body %}
<div class="flex flex-wrap items-center justify-between gap-4 mb-8">
    <div>
        <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Organisateurs</h1>
        <p class="font-bold text-gray-500 italic">{{ organizers.getTotalItemCount }} organisateur{{ organizers.getTotalItemCount > 1 ? 's' : '' }}.</p>
    </div>
    <a href="{{ path('app_admin_invite_organizer') }}" class="btn-brutal font-black uppercase text-xs tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
        Inviter un organisateur
    </a>
</div>

<div class="admin-card mb-8">
    <h2 class="text-sm font-black uppercase tracking-widest mb-4">Rechercher</h2>
    <form method="get" action="{{ path('app_admin_organizers') }}" class="flex gap-4 items-end">
        <div class="flex-1">
            <input type="text" name="q" value="{{ query }}"
                class="admin-form-input"
                placeholder="Rechercher par nom, email, raison sociale, SIRET...">
        </div>
        <input type="hidden" name="tab" value="{{ tab }}">
        <button type="submit" class="admin-btn-search font-black uppercase text-xs tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Rechercher</button>
        {% if query %}
            <a href="{{ path('app_admin_organizers', {tab: tab}) }}" class="admin-btn-clear font-black uppercase text-xs tracking-widest hover:bg-gray-100 transition-all">Effacer</a>
        {% endif %}
    </form>
</div>

{% if not query %}
<div class="flex gap-0 mb-8">
    <a href="{{ path('app_admin_organizers', {tab: 'pending'}) }}" class="admin-tab admin-tab-first {{ tab == 'pending' ? 'admin-tab-active' : 'admin-tab-inactive' }} font-black uppercase text-sm tracking-widest transition-all">En attente</a>
    <a href="{{ path('app_admin_organizers', {tab: 'approved'}) }}" class="admin-tab {{ tab == 'approved' ? 'admin-tab-active' : 'admin-tab-inactive' }} font-black uppercase text-sm tracking-widest transition-all">Valides</a>
</div>
{% endif %}

<div class="admin-card !p-0">
    <table class="admin-table">
        <thead>
            <tr>
                <th class="text-[10px] font-black uppercase tracking-widest text-white">Organisateur</th>
                <th class="text-[10px] font-black uppercase tracking-widest text-white">Raison sociale</th>
                <th class="text-[10px] font-black uppercase tracking-widest text-white">SIRET</th>
                <th class="text-[10px] font-black uppercase tracking-widest text-white">Ville</th>
                <th class="text-[10px] font-black uppercase tracking-widest text-white">Offre</th>
                <th class="text-[10px] font-black uppercase tracking-widest text-white text-right">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for orga in organizers %}
            <tr class="hover:bg-gray-50 transition-all">
                <td>
                    <p class="font-bold text-sm">{{ orga.firstName }} {{ orga.lastName }}</p>
                    <p class="text-gray-400 text-xs">{{ orga.email }}</p>
                </td>
                <td class="text-sm text-gray-600">{{ orga.companyName }}</td>
                <td class="text-sm text-gray-600 font-mono">{{ orga.siret }}</td>
                <td class="text-sm text-gray-600">{{ orga.postalCode }} {{ orga.city }}</td>
                <td>
                    {% if orga.offer %}
                        <span class="admin-badge-indigo text-xs font-black uppercase">{{ orga.offer }}</span>
                    {% else %}
                        <span class="text-gray-400 text-xs">—</span>
                    {% endif %}
                </td>
                <td class="text-right">
                    {% if not orga.approved %}
                        <a href="{{ path('app_admin_siret_check', {id: orga.id}) }}" class="admin-btn-sm-yellow inline-block text-xs font-black uppercase tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Voir la demande</a>
                    {% else %}
                        <div class="flex gap-2 justify-end items-center flex-wrap">
                            {% if orga.suspended %}
                                <span class="admin-badge-red text-xs font-black uppercase">Suspendu</span>
                            {% else %}
                                <span class="admin-badge-green text-xs font-black uppercase">{{ orga.offer ?? '—' }} — {{ orga.commissionRate ?? '3' }}%</span>
                            {% endif %}
                            <a href="{{ path('app_admin_edit_organizer', {id: orga.id}) }}" class="admin-btn-sm-white inline-block text-xs font-black uppercase tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Modifier</a>
                            <form method="post" action="{{ path('app_admin_suspend_organizer', {id: orga.id}) }}" data-confirm="{{ orga.suspended ? 'Reactiver cet organisateur ?' : 'Suspendre cet organisateur ?' }}" class="inline">
                                <button type="submit" class="admin-btn-sm-white inline-block text-xs font-black uppercase tracking-widest {{ orga.suspended ? 'hover:bg-green-600' : 'hover:bg-red-600' }} hover:text-white transition-all">{{ orga.suspended ? 'Reactiver' : 'Suspendre' }}</button>
                            </form>
                        </div>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="6" class="!text-center !py-12 text-gray-400 font-bold text-sm">
                    {% if tab == 'pending' %}
                        Aucune demande en attente.
                    {% else %}
                        Aucun organisateur valide.
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if organizers.getTotalItemCount > 10 %}
<div class="flex justify-center gap-2 mt-6">
    {% for page in 1..organizers.getPageCount %}
        {% if page == organizers.getCurrentPageNumber %}
            <span class="admin-page-active text-xs font-black">{{ page }}</span>
        {% else %}
            <a href="{{ path('app_admin_organizers', {tab: tab, page: page}) }}" class="admin-page-link text-xs font-black hover:bg-gray-100 transition-all">{{ page }}</a>
        {% endif %}
    {% endfor %}
</div>
{% endif %}
{% endblock %}
