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

{% block title %}Prestataires - Administration - Association E-Cosplay{% endblock %}

{% block admin_content %}
<div class="page-container">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold heading-page">Prestataires</h1>
        <button type="button" data-modal-open="modal-create"
                class="btn-gold px-4 py-2 font-bold uppercase text-[10px] tracking-wider text-gray-900">
            Ajouter un prestataire
        </button>
    </div>

    {% for flash in app.flashes('success') %}
        <div class="mb-4 p-3 bg-green-500/20 text-green-700 font-bold text-xs">{{ flash }}</div>
    {% endfor %}
    {% for flash in app.flashes('error') %}
        <div class="mb-4 p-3 bg-red-500/20 text-red-700 font-bold text-xs">{{ flash }}</div>
    {% endfor %}

    {% if prestataires|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">Raison sociale</th>
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">SIRET</th>
                        <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Email</th>
                        <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Factures</th>
                        <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Statut</th>
                        <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in prestataires %}
                        <tr class="border-b border-white/20 hover:bg-white/50">
                            <td class="px-4 py-3 font-bold">{{ p.raisonSociale }}</td>
                            <td class="px-4 py-3 text-xs font-mono text-gray-500">{{ p.siret ?? '—' }}</td>
                            <td class="px-4 py-3 text-xs">{{ p.email ?? '—' }}</td>
                            <td class="px-4 py-3 text-center">
                                <span class="font-bold">{{ p.factures|length }}</span>
                            </td>
                            <td class="px-4 py-3 text-center">
                                {% if p.state == 'active' %}
                                    <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Actif</span>
                                {% else %}
                                    <span class="px-2 py-0.5 bg-gray-100 text-gray-500 font-bold uppercase text-[10px]">Inactif</span>
                                {% endif %}
                            </td>
                            <td class="px-4 py-3 text-center">
                                <a href="{{ path('app_admin_prestataires_show', {id: p.id}) }}"
                                   class="px-3 py-1 bg-gray-900 text-white hover:bg-[#fabf04] hover:text-gray-900 font-bold uppercase text-[10px] transition-all">
                                    Voir
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <p class="mt-3 text-xs text-gray-400">{{ prestataires|length }} prestataire(s)</p>
    {% else %}
        <div class="glass p-8 text-center text-gray-400 font-bold">Aucun prestataire enregistre.</div>
    {% endif %}
</div>

{# Modal creation #}
<div id="modal-create" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
    <div class="glass-heavy p-6 w-full max-w-lg">
        <h2 class="text-lg font-bold uppercase mb-4">Nouveau prestataire</h2>
        <form method="post" action="{{ path('app_admin_prestataires_create') }}">
            {# Recherche SIRET #}
            <div class="mb-4 p-3 bg-gray-50 border border-gray-200">
                <label for="siret-search-input" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Recherche par SIRET ou nom</label>
                <div class="flex gap-2 relative">
                    <input type="text" id="siret-search-input" placeholder="SIRET, nom ou raison sociale..." class="input-glass flex-1 px-3 py-2 text-xs font-bold">
                    <button type="button" id="siret-search-btn" class="px-4 py-2 bg-gray-900 text-white hover:bg-[#fabf04] hover:text-gray-900 font-bold uppercase text-[10px] tracking-wider transition-all">Rechercher</button>
                </div>
                <div id="siret-search-results" class="hidden absolute left-0 right-0 mt-1 glass-heavy border border-white/30 max-h-48 overflow-y-auto z-50"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4">
                <div class="md:col-span-2">
                    <label for="presta-create-raisonSociale" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Raison sociale *</label>
                    <input type="text" id="presta-create-raisonSociale" name="raisonSociale" required class="input-glass w-full px-3 py-2 text-xs font-bold">
                </div>
                <div>
                    <label for="presta-create-siret" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">SIRET</label>
                    <input type="text" id="presta-create-siret" name="siret" maxlength="14" class="input-glass w-full px-3 py-2 text-xs font-bold">
                </div>
                <div>
                    <label for="presta-create-email" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Email</label>
                    <input type="email" id="presta-create-email" name="email" class="input-glass w-full px-3 py-2 text-xs font-bold">
                </div>
                <div>
                    <label for="presta-create-phone" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Telephone</label>
                    <input type="text" id="presta-create-phone" name="phone" class="input-glass w-full px-3 py-2 text-xs font-bold">
                </div>
                <div>
                    <label for="presta-create-address" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Adresse</label>
                    <input type="text" id="presta-create-address" name="address" class="input-glass w-full px-3 py-2 text-xs font-bold">
                </div>
                <div>
                    <label for="presta-create-zipCode" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Code postal</label>
                    <input type="text" id="presta-create-zipCode" name="zipCode" maxlength="10" class="input-glass w-full px-3 py-2 text-xs font-bold">
                </div>
                <div>
                    <label for="presta-create-city" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Ville</label>
                    <input type="text" id="presta-create-city" name="city" class="input-glass w-full px-3 py-2 text-xs font-bold">
                </div>
            </div>
            <div class="flex justify-end gap-2">
                <button type="button" data-modal-close="modal-create"
                        class="px-4 py-2 glass font-bold uppercase text-[10px] tracking-widest">Annuler</button>
                <button type="submit" class="btn-gold px-4 py-2 font-bold uppercase text-[10px] tracking-wider text-gray-900">Creer</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}
