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

{% block title %}{{ customer.fullName }} - Client - 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">{{ customer.fullName }}</h1>
            {% if customer.raisonSociale %}
                <p class="text-xs text-gray-400 mt-1">{{ customer.raisonSociale }} — {{ customer.codeComptable ?? 'N/A' }}</p>
            {% endif %}
        </div>
        <div class="flex items-center gap-3">
            {% if trustStatus.status == 'confiant' %}
                <span class="px-3 py-1 bg-green-500/20 text-green-700 font-bold uppercase text-xs" title="{{ trustStatus.reason }}">Confiant</span>
            {% elseif trustStatus.status == 'attention' %}
                <span class="px-3 py-1 bg-yellow-500/20 text-yellow-700 font-bold uppercase text-xs" title="{{ trustStatus.reason }}">Attention</span>
            {% elseif trustStatus.status == 'danger' %}
                <span class="px-3 py-1 bg-red-600 text-white font-bold uppercase text-xs animate-pulse" title="{{ trustStatus.reason }}">Danger</span>
            {% endif %}
            {% if customer.state == 'active' %}
                <span class="px-3 py-1 bg-green-500/20 text-green-700 font-bold uppercase text-xs">Actif</span>
            {% elseif customer.state == 'suspended' %}
                <span class="px-3 py-1 bg-red-900 text-white font-bold uppercase text-xs animate-pulse">Suspendu</span>
            {% elseif customer.state == 'pending_delete' %}
                <span class="px-3 py-1 bg-red-500/20 text-red-700 font-bold uppercase text-xs animate-pulse">Suppression</span>
            {% else %}
                <span class="px-3 py-1 bg-yellow-100 text-yellow-800 font-bold uppercase text-xs">{{ customer.state }}</span>
            {% endif %}
            <a href="{{ path('app_admin_clients_index') }}" class="px-4 py-2 glass font-bold uppercase text-xs tracking-widest hover:bg-gray-900 hover:text-white transition-all">Retour</a>
        </div>
    </div>

    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="mb-4 p-4 glass font-medium text-sm {{ type == 'success' ? 'border-green-300 text-green-800' : 'border-red-300 text-red-800' }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endfor %}

    {# Tabs #}
    {% set tabs = {
        'info': 'Information globale',
        'contacts': 'Contacts',
        'factures': 'Factures',
        'avis': 'Avis de Paiement',
        'devis': 'Devis',
        'impayes': 'Impayes',
        'echeancier': 'Echeancier',
        'contrats': 'Contrats',
        'ndd': 'Noms de domaine',
        'esyflex': 'E-Flex',
        'sites': 'Sites Internet',
        'services': 'Services',
        'securite': 'Securite'
    } %}
    {% if is_granted('ROLE_ROOT') %}
        {% set tabs = tabs|merge({'controle': 'Controle'}) %}
    {% endif %}

    <div class="flex flex-wrap gap-1 mb-6">
        {% for key, label in tabs %}
            <a href="{{ path('app_admin_clients_show', {id: customer.id, tab: key}) }}"
               class="px-4 py-2 font-bold uppercase text-[10px] tracking-wider transition-all {{ tab == key ? 'glass-dark text-white' : 'glass text-gray-600 hover:bg-white/80' }}"
               >
                {{ label }}
            </a>
        {% endfor %}
    </div>

    {# Tab: Information globale #}
    {% if tab == 'info' %}
        <form method="post" action="{{ path('app_admin_clients_show', {id: customer.id, tab: 'info'}) }}" class="flex flex-col gap-6">
            <section class="glass p-6">
                <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Identite</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="firstName" class="block text-xs font-bold uppercase tracking-wider mb-2">Prenom *</label>
                        <input type="text" id="firstName" name="firstName" value="{{ customer.firstName }}" required class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    <div>
                        <label for="lastName" class="block text-xs font-bold uppercase tracking-wider mb-2">Nom *</label>
                        <input type="text" id="lastName" name="lastName" value="{{ customer.lastName }}" required class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    <div>
                        <label for="email" class="block text-xs font-bold uppercase tracking-wider mb-2">Email *</label>
                        <input type="email" id="email" name="email" value="{{ customer.email ?? customer.user.email }}" required class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div>
                        <label for="phone" class="block text-xs font-bold uppercase tracking-wider mb-2">Telephone</label>
                        <input type="tel" id="phone" name="phone" value="{{ customer.phone }}" class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    <div>
                        <label for="typeCompany" class="block text-xs font-bold uppercase tracking-wider mb-2">Type</label>
                        <select id="typeCompany" name="typeCompany" class="w-full px-4 py-3 glass text-sm font-bold">
                            <option value="">— Selectionner —</option>
                            {% for val in ['particulier','association','auto-entrepreneur','sas','sarl','eurl','sa','sci'] %}
                                <option value="{{ val }}" {{ customer.typeCompany == val ? 'selected' }}>{{ val|capitalize }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </section>

            <section class="glass p-6">
                <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Entreprise</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="raisonSociale" class="block text-xs font-bold uppercase tracking-wider mb-2">Raison sociale</label>
                        <input type="text" id="raisonSociale" name="raisonSociale" value="{{ customer.raisonSociale }}" class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    <div>
                        <label for="siret" class="block text-xs font-bold uppercase tracking-wider mb-2">SIRET</label>
                        <input type="text" id="siret" name="siret" value="{{ customer.siret }}" maxlength="14" class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    <div>
                        <label for="rcs" class="block text-xs font-bold uppercase tracking-wider mb-2">RCS</label>
                        <input type="text" id="rcs" name="rcs" value="{{ customer.rcs }}" class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    <div>
                        <label for="numTva" class="block text-xs font-bold uppercase tracking-wider mb-2">N° TVA</label>
                        <input type="text" id="numTva" name="numTva" value="{{ customer.numTva }}" class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    <div>
                        <label for="ape" class="block text-xs font-bold uppercase tracking-wider mb-2">Code APE / NAF</label>
                        <input type="text" id="ape" name="ape" value="{{ customer.ape }}" maxlength="10" class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    <div>
                        <label for="rna" class="block text-xs font-bold uppercase tracking-wider mb-2">RNA</label>
                        <input type="text" id="rna" name="rna" value="{{ customer.rna }}" maxlength="20" class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    <div>
                        <label for="revendeurCode" class="block text-xs font-bold uppercase tracking-wider mb-2">Code revendeur</label>
                        <input type="text" id="revendeurCode" name="revendeurCode" value="{{ customer.revendeurCode }}" maxlength="10" placeholder="EC-XXXX" class="w-full px-4 py-3 input-glass text-sm font-medium font-mono">
                    </div>
                </div>
            </section>

            <section class="glass p-6">
                <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Adresse</h2>
                <div class="flex flex-col gap-4">
                    <div>
                        <label for="address" class="block text-xs font-bold uppercase tracking-wider mb-2">Adresse</label>
                        <input type="text" id="address" name="address" value="{{ customer.address }}" class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    <div>
                        <label for="address2" class="block text-xs font-bold uppercase tracking-wider mb-2">Complement</label>
                        <input type="text" id="address2" name="address2" value="{{ customer.address2 }}" class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="zipCode" class="block text-xs font-bold uppercase tracking-wider mb-2">Code postal</label>
                            <input type="text" id="zipCode" name="zipCode" value="{{ customer.zipCode }}" class="w-full px-4 py-3 input-glass text-sm font-medium">
                        </div>
                        <div>
                            <label for="city" class="block text-xs font-bold uppercase tracking-wider mb-2">Ville</label>
                            <input type="text" id="city" name="city" value="{{ customer.city }}" class="w-full px-4 py-3 input-glass text-sm font-medium">
                        </div>
                    </div>
                    <input type="hidden" name="geoLat" value="{{ customer.geoLat }}">
                    <input type="hidden" name="geoLong" value="{{ customer.geoLong }}">
                </div>
            </section>

            <section class="glass p-6">
                <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Informations systeme</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-xs">
                    <div>
                        <span class="text-gray-400 font-bold uppercase text-[9px] block">Code comptable</span>
                        <span class="font-mono font-bold">{{ customer.codeComptable ?? '—' }}</span>
                    </div>
                    <div>
                        <span class="text-gray-400 font-bold uppercase text-[9px] block">Stripe ID</span>
                        <span class="font-mono font-bold">{{ customer.stripeCustomerId ?? '—' }}</span>
                    </div>
                    <div>
                        <span class="text-gray-400 font-bold uppercase text-[9px] block">Cree le</span>
                        <span class="font-bold">{{ customer.createdAt|date('d/m/Y H:i') }}</span>
                    </div>
                    <div>
                        <span class="text-gray-400 font-bold uppercase text-[9px] block">Modifie le</span>
                        <span class="font-bold">{{ customer.updatedAt ? customer.updatedAt|date('d/m/Y H:i') : '—' }}</span>
                    </div>
                    <div>
                        <span class="text-gray-400 font-bold uppercase text-[9px] block">Revendeur</span>
                        <span class="font-mono font-bold">{{ customer.revendeurCode ?? '—' }}</span>
                    </div>
                </div>

                {% if customer.user.hasTempPassword %}
                    <div class="mt-4 p-4 bg-indigo-50 border border-indigo-200 flex items-center justify-between">
                        <div>
                            <span class="text-xs font-bold uppercase text-indigo-700">Espace client</span>
                            <p class="text-[10px] text-indigo-500 mt-0.5">Le client n'a pas encore active son compte. Vous pouvez renvoyer l'email de bienvenue.</p>
                        </div>
                        <div class="flex gap-2"></div>
                    </div>
                {% else %}
                    <div class="mt-4 p-4 bg-green-50 border border-green-200">
                        <span class="text-xs font-bold uppercase text-green-700">Espace client active</span>
                        <p class="text-[10px] text-green-500 mt-0.5">Le client a active son compte et peut se connecter sur client.e-cosplay.fr</p>
                    </div>
                {% endif %}
            </section>

            <div class="flex items-center gap-3">
                <button type="submit" class="px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">Enregistrer</button>
                {% if customer.user.hasTempPassword %}
                </form>
                <form method="post" action="{{ path('app_admin_clients_resend_welcome', {id: customer.id}) }}">
                    <button type="submit" class="px-6 py-3 glass text-indigo-600 text-sm font-bold uppercase tracking-wider hover:bg-indigo-600 hover:text-white transition-all">Renvoyer email bienvenue</button>
                </form>
                {% else %}
                </form>
                {% endif %}
            </div>

    {# Tab: Contacts #}
    {% elseif tab == 'contacts' %}
        <section class="glass p-6 mb-6">
            <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Ajouter un contact</h2>
            <form method="post" action="{{ path('app_admin_clients_show', {id: customer.id, tab: 'contacts'}) }}" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <input type="hidden" name="contact_action" value="create">
                <div>
                    <label for="contact_firstName" class="block text-xs font-bold uppercase tracking-wider mb-2">Prenom *</label>
                    <input type="text" id="contact_firstName" name="contact_firstName" required class="w-full px-4 py-3 input-glass text-sm font-medium" placeholder="Prenom">
                </div>
                <div>
                    <label for="contact_lastName" class="block text-xs font-bold uppercase tracking-wider mb-2">Nom *</label>
                    <input type="text" id="contact_lastName" name="contact_lastName" required class="w-full px-4 py-3 input-glass text-sm font-medium" placeholder="Nom">
                </div>
                <div>
                    <label for="contact_email" class="block text-xs font-bold uppercase tracking-wider mb-2">Email</label>
                    <input type="email" id="contact_email" name="contact_email" class="w-full px-4 py-3 input-glass text-sm font-medium" placeholder="email@entreprise.fr">
                </div>
                <div>
                    <label for="contact_phone" class="block text-xs font-bold uppercase tracking-wider mb-2">Telephone</label>
                    <input type="tel" id="contact_phone" name="contact_phone" class="w-full px-4 py-3 input-glass text-sm font-medium" placeholder="06 12 34 56 78">
                </div>
                <div>
                    <label for="contact_role" class="block text-xs font-bold uppercase tracking-wider mb-2">Role</label>
                    <input type="text" id="contact_role" name="contact_role" class="w-full px-4 py-3 input-glass text-sm font-medium" placeholder="Gerant, Comptable...">
                </div>
                <div class="flex items-end gap-3">
                    <label for="contact_isBilling" class="flex items-center gap-2 cursor-pointer pb-3">
                        <input type="checkbox" id="contact_isBilling" name="contact_isBilling" value="1" class="accent-[#fabf04]">
                        <span class="text-xs font-bold">Email facturation</span>
                    </label>
                    <button type="submit" class="px-5 py-3 btn-gold text-xs font-bold uppercase tracking-wider text-gray-900 mb-0.5">Ajouter</button>
                </div>
            </form>
        </section>

        {% if contacts|length > 0 %}
            <div class="glass 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">Nom</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-left font-bold uppercase text-xs tracking-widest">Telephone</th>
                            <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Role</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Facturation</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for contact in contacts %}
                            <tr class="border-b border-white/20 hover:bg-white/50">
                                <td class="px-4 py-3 font-bold">{{ contact.fullName }}</td>
                                <td class="px-4 py-3 text-xs font-mono">{{ contact.email ?? '—' }}</td>
                                <td class="px-4 py-3 text-xs">{{ contact.phone ?? '—' }}</td>
                                <td class="px-4 py-3 text-xs">{{ contact.role ?? '—' }}</td>
                                <td class="px-4 py-3 text-center">
                                    {% if contact.isBillingEmail %}
                                        <span class="text-green-600 font-bold">&#10003;</span>
                                    {% else %}
                                        <span class="text-gray-300">&#10007;</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <form method="post" action="{{ path('app_admin_clients_show', {id: customer.id, tab: 'contacts'}) }}" data-confirm="Supprimer le contact {{ contact.fullName }} ?">
                                        <input type="hidden" name="contact_action" value="delete">
                                        <input type="hidden" name="contact_id" value="{{ contact.id }}">
                                        <button type="submit" class="px-2 py-1 border-2 border-red-600 bg-white text-red-600 font-bold uppercase text-[10px] tracking-widest hover:bg-red-600 hover:text-white transition-all">Supprimer</button>
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <p class="mt-3 text-xs text-gray-400">{{ contacts|length }} contact(s)</p>
        {% else %}
            <div class="glass p-8 text-center text-gray-400 font-bold">Aucun contact.</div>
        {% endif %}

    {# Tab: Noms de domaine #}
    {% elseif tab == 'ndd' %}
        <section class="glass p-6 mb-6">
            <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Ajouter un nom de domaine</h2>
            <form method="post" action="{{ path('app_admin_clients_show', {id: customer.id, tab: 'ndd'}) }}" class="flex flex-wrap items-end gap-4">
                <input type="hidden" name="domain_action" value="create">
                <div class="flex-1 min-w-[200px]">
                    <label for="domain_fqdn" class="block text-xs font-bold uppercase tracking-wider mb-2">Nom de domaine *</label>
                    <input type="text" id="domain_fqdn" name="domain_fqdn" required placeholder="exemple.fr" class="w-full px-4 py-3 input-glass text-sm font-medium font-mono">
                </div>
                <div class="w-48">
                    <label for="domain_registrar" class="block text-xs font-bold uppercase tracking-wider mb-2">Registrar</label>
                    <select id="domain_registrar" name="domain_registrar" class="w-full px-4 py-3 glass text-sm font-bold">
                        <option value="">Auto-detection</option>
                        <option value="OVH">OVH</option>
                        <option value="Gandi">Gandi</option>
                        <option value="Cloudflare">Cloudflare</option>
                        <option value="Autre">Autre</option>
                    </select>
                </div>
                <button type="submit" class="px-5 py-3 btn-gold text-xs font-bold uppercase tracking-wider text-gray-900">Ajouter</button>
            </form>
            <p class="text-[10px] text-gray-400 mt-2">Le domaine sera automatiquement verifie sur OVH et Cloudflare. Si detecte : gestion et facturation actives, date d'expiration synchronisee.</p>
        </section>

        {% if domains|length > 0 %}
            <div class="glass 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">Domaine</th>
                            <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Registrar</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Cloudflare</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Gestion</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Facturation</th>
                            <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Expiration</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for domain in domains %}
                            {% set dInfo = domainsInfo[domain.id] ?? {} %}
                            <tr class="hover:bg-white/50">
                                <td class="px-4 pt-3 pb-1 font-bold font-mono">{{ domain.fqdn }}</td>
                                <td class="px-4 pt-3 pb-1 text-xs">{{ domain.registrar ?? '—' }}</td>
                                <td class="px-4 pt-3 pb-1 text-center">
                                    {% if domain.zoneIdCloudflare %}
                                        <span class="px-2 py-0.5 bg-orange-500/20 text-orange-700 font-bold uppercase text-[10px]">{{ domain.zoneCloudflare ?? 'Lie' }}</span>
                                    {% else %}
                                        <span class="text-gray-300">—</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 pt-3 pb-1 text-center">
                                    {% if domain.isGestion %}<span class="text-green-600 font-bold">&#10003;</span>{% else %}<span class="text-gray-300">&#10007;</span>{% endif %}
                                </td>
                                <td class="px-4 pt-3 pb-1 text-center">
                                    {% if domain.isBilling %}<span class="text-green-600 font-bold">&#10003;</span>{% else %}<span class="text-gray-300">&#10007;</span>{% endif %}
                                </td>
                                <td class="px-4 pt-3 pb-1 text-xs">
                                    {% if domain.expiredAt %}
                                        <span class="{{ domain.isExpired ? 'text-red-600 font-bold' : (domain.isExpiringSoon ? 'text-yellow-600 font-bold' : 'text-gray-500') }}">
                                            {{ domain.expiredAt|date('d/m/Y') }}
                                        </span>
                                    {% else %}
                                        <span class="text-gray-300">—</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 pt-3 pb-1 text-center">
                                    <form method="post" action="{{ path('app_admin_clients_show', {id: customer.id, tab: 'ndd'}) }}" data-confirm="Supprimer le domaine {{ domain.fqdn }} ?">
                                        <input type="hidden" name="domain_action" value="delete">
                                        <input type="hidden" name="domain_id" value="{{ domain.id }}">
                                        <button type="submit" class="px-2 py-1 border-2 border-red-600 bg-white text-red-600 font-bold uppercase text-[10px] tracking-widest hover:bg-red-600 hover:text-white transition-all">Supprimer</button>
                                    </form>
                                </td>
                            </tr>
                            <tr class="border-b border-white/20">
                                <td colspan="7" class="px-4 pb-3 pt-0">
                                    <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-[10px]">
                                        <span class="font-bold" title="E-Mail (boites mail)">
                                            E-Mail
                                            {% if dInfo.esyMail ?? false %}
                                                <span class="text-green-600">&#10003;</span>
                                                <span class="text-gray-400">({{ dInfo.emailCount ?? 0 }})</span>
                                            {% else %}
                                                <span class="text-red-500">&#10007;</span>
                                            {% endif %}
                                        </span>
                                        <span class="text-gray-300">|</span>
                                        <span class="font-bold" title="E-Mailer (newsletter/mailing)">
                                            E-Mailer
                                            {% if dInfo.esyMailer ?? false %}
                                                <span class="text-green-600">&#10003;</span>
                                            {% else %}
                                                <span class="text-red-500">&#10007;</span>
                                            {% endif %}
                                        </span>
                                        <span class="text-gray-300">|</span>
                                        <span class="text-gray-300">|</span>
                                        <span class="font-bold" title="Configuration DNS E-Mail (MX, SPF, DKIM, DMARC pour reception)">
                                            Config E-Mail
                                            {% if dInfo.configDnsEsyMail ?? false %}
                                                <span class="px-1.5 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase">OK</span>
                                            {% else %}
                                                <span class="px-1.5 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase">KO</span>
                                            {% endif %}
                                        </span>
                                        <span class="text-gray-300">|</span>
                                        <span class="font-bold" title="Configuration DNS E-Mailer (SPF, DKIM SES, MAIL FROM pour envoi)">
                                            Config E-Mailer
                                            {% if dInfo.configDnsEsyMailer ?? false %}
                                                <span class="px-1.5 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase">OK</span>
                                            {% else %}
                                                <span class="px-1.5 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase">KO</span>
                                            {% endif %}
                                        </span>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <p class="mt-3 text-xs text-gray-400">{{ domains|length }} domaine(s)</p>
        {% else %}
            <div class="glass p-8 text-center text-gray-400 font-bold">Aucun nom de domaine.</div>
        {% endif %}

    {# Tab: Sites Internet #}
    {% elseif tab == 'sites' %}
        {% if websites|length > 0 %}
            <div class="glass 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">Nom</th>
                            <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">UUID</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Type</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-left font-bold uppercase text-xs tracking-widest">Cree le</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for site in websites %}
                            <tr class="border-b border-white/20 hover:bg-white/50">
                                <td class="px-4 py-3 font-bold">{{ site.name }}</td>
                                <td class="px-4 py-3 text-xs font-mono text-gray-500">{{ site.uuid }}</td>
                                <td class="px-4 py-3 text-center">
                                    {% if site.type == 'ecommerce' %}
                                        <span class="px-2 py-0.5 bg-purple-500/20 text-purple-700 font-bold uppercase text-[10px]">E-Commerce</span>
                                    {% else %}
                                        <span class="px-2 py-0.5 bg-blue-500/20 text-blue-700 font-bold uppercase text-[10px]">Vitrine</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-center">
                                    {% if site.state == 'open' %}
                                        <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">En ligne</span>
                                    {% elseif site.state == 'install_progress' %}
                                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 font-bold uppercase text-[10px]">Installation</span>
                                    {% elseif site.state == 'suspended' %}
                                        <span class="px-2 py-0.5 bg-orange-500/20 text-orange-700 font-bold uppercase text-[10px]">Suspendu</span>
                                    {% elseif site.state == 'closed' %}
                                        <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[10px]">Ferme</span>
                                    {% else %}
                                        <span class="px-2 py-0.5 bg-gray-100 text-gray-600 font-bold uppercase text-[10px]">Cree</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-xs text-gray-500">{{ site.createdAt|date('d/m/Y') }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <p class="mt-3 text-xs text-gray-400">{{ websites|length }} site(s)</p>
        {% else %}
            <div class="glass p-8 text-center text-gray-400 font-bold">Aucun site internet.</div>
        {% endif %}

    {# Tab: Factures #}
    {% elseif tab == 'factures' %}
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-sm font-bold uppercase tracking-wider">Factures</h2>
        </div>
        <div class="mb-4 relative">
            <input type="text" id="search-factures" placeholder="Rechercher une facture..." data-url="{{ path('app_admin_facture_search', {customerId: customer.id}) }}" data-tab="factures" class="w-full px-4 py-3 input-glass text-sm font-medium">
            <div id="search-factures-results" class="hidden absolute left-0 right-0 glass-heavy mt-1 max-h-60 overflow-y-auto z-50"></div>
        </div>

        {% if facturesList|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">Numero</th>
                            <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">Avis lie</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Lignes</th>
                            <th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Total HT</th>
                            {% if tva_enabled %}<th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Total TTC</th>{% endif %}
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Etat</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Paiement</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for f in facturesList %}
                            <tr id="facture-{{ f.id }}" class="border-b border-white/20 hover:bg-white/50">
                                <td class="px-4 py-3 font-mono font-bold">{{ f.invoiceNumber }}</td>
                                <td class="px-4 py-3 text-xs text-gray-500">{{ f.createdAt|date('d/m/Y') }}</td>
                                <td class="px-4 py-3 text-xs">
                                    {% if f.advert %}
                                        <a href="{{ path('app_admin_clients_show', {id: customer.id, tab: 'avis'}) }}#avis-{{ f.advert.id }}" class="text-indigo-600 hover:underline font-mono font-bold">{{ f.advert.orderNumber.numOrder }}</a>
                                    {% else %}
                                        <span class="text-gray-400">—</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-center text-xs">{{ f.lines|length }}</td>
                                <td class="px-4 py-3 text-right font-mono">{{ f.totalHt }} &euro;</td>
                                {% if tva_enabled %}<td class="px-4 py-3 text-right font-mono font-bold">{{ f.totalTtc }} &euro;</td>{% endif %}
                                <td class="px-4 py-3 text-center">
                                    {% if f.state == 'paid' %}
                                        <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Payee</span>
                                    {% elseif f.state == 'send' %}
                                        <span class="px-2 py-0.5 bg-blue-500/20 text-blue-700 font-bold uppercase text-[10px]">Envoyee</span>
                                    {% elseif f.state == 'cancel' %}
                                        <span class="px-2 py-0.5 bg-gray-100 text-gray-600 font-bold uppercase text-[10px]">Annulee</span>
                                    {% else %}
                                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 font-bold uppercase text-[10px]">Creee</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-center text-xs">
                                    {% if f.isPaid %}
                                        <span class="text-green-600 font-bold">{{ f.paidMethod ?? 'Oui' }}</span>
                                        {% if f.paidAt %}
                                            <br><span class="text-[10px] text-gray-400">{{ f.paidAt|date('d/m/Y H:i') }}</span>
                                        {% endif %}
                                    {% else %}
                                        <span class="text-gray-400">—</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-center">
                                    {% if f.state != 'cancel' %}
                                        <div class="flex items-center justify-center gap-2 flex-wrap">
                                            {% if f.facturePdf %}
                                                <a href="{{ vich_uploader_asset(f, 'facturePdfFile') }}" target="_blank"
                                                   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 PDF
                                                </a>
                                                <form method="post" action="{{ path('app_admin_facture_generate_pdf', {id: f.id}) }}" class="inline" data-confirm="Regenerer le PDF de la facture {{ f.invoiceNumber }} ?">
                                                    <button type="submit" class="px-3 py-1 bg-yellow-500/20 text-yellow-700 hover:bg-yellow-500 hover:text-white font-bold uppercase text-[10px]transition-all">Regenerer PDF</button>
                                                </form>
                                                <form method="post" action="{{ path('app_admin_facture_send', {id: f.id}) }}" class="inline" data-confirm="Envoyer la facture {{ f.invoiceNumber }} au client ?">
                                                    <button type="submit" class="px-3 py-1 bg-purple-500/20 text-purple-700 hover:bg-purple-500 hover:text-white font-bold uppercase text-[10px]transition-all">Envoyer</button>
                                                </form>
                                            {% else %}
                                                <form method="post" action="{{ path('app_admin_facture_generate_pdf', {id: f.id}) }}" class="inline">
                                                    <button type="submit" class="px-3 py-1 bg-green-500/20 text-green-700 hover:bg-green-500 hover:text-white font-bold uppercase text-[10px]transition-all">Generer PDF</button>
                                                </form>
                                                {% if f.state == 'paid' and f.state != 'send' %}
                                                    <form method="post" action="{{ path('app_admin_facture_send', {id: f.id}) }}" class="inline" data-confirm="Generer et envoyer la facture {{ f.invoiceNumber }} au client ?">
                                                        <button type="submit" class="px-3 py-1 bg-purple-500/20 text-purple-700 hover:bg-purple-500 hover:text-white font-bold uppercase text-[10px]transition-all">Envoyer</button>
                                                    </form>
                                                {% endif %}
                                            {% endif %}
                                        </div>
                                    {% else %}
                                        <span class="text-[10px] text-gray-400">—</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <p class="mt-3 text-xs text-gray-400">{{ facturesList|length }} facture(s)</p>
        {% else %}
            <div class="glass p-8 text-center text-gray-400 font-bold">Aucune facture.</div>
        {% endif %}

    {# Tab: Avis de Paiement #}
    {% elseif tab == 'avis' %}
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-sm font-bold uppercase tracking-wider">Avis de paiement</h2>
        </div>
        <div class="mb-4 relative">
            <input type="text" id="search-adverts" placeholder="Rechercher un avis de paiement..." data-url="{{ path('app_admin_advert_search', {customerId: customer.id}) }}" data-tab="adverts" class="w-full px-4 py-3 input-glass text-sm font-medium">
            <div id="search-adverts-results" class="hidden absolute left-0 right-0 glass-heavy mt-1 max-h-60 overflow-y-auto z-50"></div>
        </div>

        {% if advertsList|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">Numero</th>
                            <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">Devis lie</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Lignes</th>
                            <th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Total HT</th>
                            {% if tva_enabled %}<th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Total TTC</th>{% endif %}
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Etat</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for a in advertsList %}
                            <tr id="avis-{{ a.id }}" class="border-b border-white/20 hover:bg-white/50">
                                <td class="px-4 py-3 font-mono font-bold">{{ a.orderNumber.numOrder }}</td>
                                <td class="px-4 py-3 text-xs text-gray-500">{{ a.createdAt|date('d/m/Y') }}</td>
                                <td class="px-4 py-3 text-xs">
                                    {% if a.devis %}
                                        <a href="{{ path('app_admin_clients_show', {id: customer.id, tab: 'devis'}) }}" class="text-indigo-600 hover:underline font-mono font-bold">{{ a.devis.orderNumber.numOrder }}</a>
                                    {% else %}
                                        <span class="text-gray-400">—</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-center text-xs">{{ a.lines|length }}</td>
                                <td class="px-4 py-3 text-right font-mono">{{ a.totalHt }} &euro;</td>
                                {% if tva_enabled %}<td class="px-4 py-3 text-right font-mono font-bold">{{ a.totalTtc }} &euro;</td>{% endif %}
                                <td class="px-4 py-3 text-center">
                                    {% if a.state == 'accepted' %}
                                        <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Paye</span>
                                    {% elseif a.state == 'refused' %}
                                        <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[10px]">Refuse</span>
                                    {% elseif a.state == 'send' %}
                                        <span class="px-2 py-0.5 bg-blue-500/20 text-blue-700 font-bold uppercase text-[10px]">Envoye</span>
                                    {% elseif a.state == 'cancel' %}
                                        <span class="px-2 py-0.5 bg-gray-100 text-gray-600 font-bold uppercase text-[10px]">Annule</span>
                                    {% else %}
                                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 font-bold uppercase text-[10px]">Cree</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-center">
                                    {% if a.state != 'cancel' %}
                                        <div class="flex items-center justify-center gap-2 flex-wrap">
                                            {% if a.advertFile %}
                                                <a href="{{ vich_uploader_asset(a, 'advertFileUpload') }}" target="_blank"
                                                   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 PDF
                                                </a>
                                                {% if a.state != 'accepted' %}
                                                    <form method="post" action="{{ path('app_admin_advert_generate_pdf', {id: a.id}) }}" class="inline" data-confirm="Regenerer le PDF ? Le fichier existant sera remplace.">
                                                        <button type="submit" class="px-3 py-1 bg-yellow-500/20 text-yellow-700 hover:bg-yellow-500 hover:text-white font-bold uppercase text-[10px]transition-all">Regenerer PDF</button>
                                                    </form>
                                                {% endif %}
                                            {% else %}
                                                {% if a.state != 'accepted' %}
                                                    <form method="post" action="{{ path('app_admin_advert_generate_pdf', {id: a.id}) }}" class="inline">
                                                        <button type="submit" class="px-3 py-1 bg-green-500/20 text-green-700 hover:bg-green-500 hover:text-white font-bold uppercase text-[10px]transition-all">Generer PDF</button>
                                                    </form>
                                                {% endif %}
                                            {% endif %}
                                            {% if a.advertFile and a.state == 'created' %}
                                                <form method="post" action="{{ path('app_admin_advert_send', {id: a.id}) }}" class="inline" data-confirm="Envoyer l'avis de paiement {{ a.orderNumber.numOrder }} au client ?">
                                                    <button type="submit" class="px-3 py-1 bg-purple-500/20 text-purple-700 hover:bg-purple-500 hover:text-white font-bold uppercase text-[10px]transition-all">Envoyer</button>
                                                </form>
                                            {% endif %}
                                            {% if a.state == 'send' %}
                                                <form method="post" action="{{ path('app_admin_advert_resend', {id: a.id}) }}" class="inline" data-confirm="Renvoyer l'avis de paiement au client ?">
                                                    <button type="submit" class="px-3 py-1 bg-purple-500/20 text-purple-700 hover:bg-purple-500 hover:text-white font-bold uppercase text-[10px]transition-all">Renvoyer</button>
                                                </form>
                                            {% endif %}
                                            {% if a.state == 'send' or (a.state != 'cancel' and a.state != 'accepted') %}
                                                <button type="button" data-modal-open="modal-manual-pay-{{ a.id }}"
                                                    class="px-3 py-1 bg-green-500/20 text-green-700 hover:bg-green-500 hover:text-white font-bold uppercase text-[10px] transition-all">
                                                    Enregistrer paiement
                                                </button>
                                            {% endif %}
                                            {% if a.state == 'accepted' and a.factures|length == 0 %}
                                                <form method="post" action="{{ path('app_admin_advert_create_facture', {id: a.id}) }}" class="inline" data-confirm="Creer la facture pour l'avis {{ a.orderNumber.numOrder }} ?">
                                                    <button type="submit" class="px-3 py-1 bg-emerald-500/20 text-emerald-700 hover:bg-emerald-500 hover:text-white font-bold uppercase text-[10px]transition-all">Creer Facture</button>
                                                </form>
                                            {% endif %}
                                            {% if a.stripePaymentId %}
                                                <form method="post" action="{{ path('app_admin_advert_sync_payment', {id: a.id}) }}" class="inline" data-confirm="Synchroniser le paiement Stripe pour l'avis {{ a.orderNumber.numOrder }} ?">
                                                    <button type="submit" class="px-3 py-1 bg-indigo-500/20 text-indigo-700 hover:bg-indigo-500 hover:text-white font-bold uppercase text-[10px]transition-all">Sync Stripe</button>
                                                </form>
                                            {% endif %}
                                            {% if a.state == 'send' or a.state == 'accepted' %}
                                                <a href="{{ path('app_admin_advert_events', {id: a.id}) }}"
                                                   class="px-3 py-1 bg-indigo-500/20 text-indigo-700 hover:bg-indigo-500 hover:text-white font-bold uppercase text-[10px] transition-all">
                                                    Evenements
                                                </a>
                                            {% endif %}
                                            {% if a.factures|length > 0 %}
                                                <a href="{{ path('app_admin_clients_show', {id: customer.id, tab: 'factures'}) }}#facture-{{ a.factures|first.id }}"
                                                   class="px-3 py-1 bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500 hover:text-white font-bold uppercase text-[10px]transition-all">
                                                    Facture {{ a.factures|first.invoiceNumber }}
                                                </a>
                                            {% endif %}
                                            <form method="post" action="{{ path('app_admin_advert_cancel', {id: a.id}) }}" class="inline" data-confirm="Annuler cet avis de paiement ? Le lien avec le devis sera supprime.">
                                                <button type="submit" class="px-3 py-1 bg-red-500/20 text-red-700 hover:bg-red-500 hover:text-white font-bold uppercase text-[10px]transition-all">Annuler</button>
                                            </form>
                                        </div>
                                    {% else %}
                                        <span class="text-[10px] text-gray-400">—</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <p class="mt-3 text-xs text-gray-400">{{ advertsList|length }} avis de paiement</p>
        {% else %}
            <div class="glass p-8 text-center text-gray-400 font-bold">Aucun avis de paiement.</div>
        {% endif %}

        {# Modals paiement manuel #}
        {% for a in advertsList %}
            {% if a.state == 'send' or (a.state != 'cancel' and a.state != 'accepted') %}
                <div id="modal-manual-pay-{{ a.id }}" 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-md">
                        <h2 class="text-lg font-bold uppercase mb-4">Enregistrer un paiement</h2>
                        <p class="text-xs text-gray-500 mb-2">Avis {{ a.orderNumber.numOrder }} - Total : {{ a.totalTtc }} &euro;</p>
                        {% set totalPaid = 0 %}
                        {% for p in a.payments %}
                            {% if p.type == 'success' %}
                                {% set totalPaid = totalPaid + p.amount %}
                            {% endif %}
                        {% endfor %}
                        {% if totalPaid > 0 %}
                            <p class="text-xs text-green-600 font-bold mb-2">Deja paye : {{ totalPaid|number_format(2, ',', ' ') }} &euro; - Reste : {{ (a.totalTtc - totalPaid)|number_format(2, ',', ' ') }} &euro;</p>
                        {% endif %}
                        <form method="post" action="{{ path('app_admin_advert_manual_payment', {id: a.id}) }}">
                            <div class="grid grid-cols-1 gap-3 mb-4">
                                <div>
                                    <label for="mp-amount-{{ a.id }}" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Montant recu</label>
                                    <input type="number" id="mp-amount-{{ a.id }}" name="amount" step="0.01" min="0.01" value="{{ a.totalTtc }}" required class="input-glass w-full px-3 py-2 text-xs font-bold">
                                </div>
                                <div>
                                    <label for="mp-method-{{ a.id }}" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Methode de paiement</label>
                                    <select id="mp-method-{{ a.id }}" name="method" required class="input-glass w-full px-3 py-2 text-xs font-bold" onchange="document.getElementById('mp-echeancier-wrap-{{ a.id }}').classList.toggle('hidden', this.value !== 'echeancier')">
                                        <option value="virement">Virement bancaire</option>
                                        <option value="cheque">Cheque</option>
                                        <option value="especes">Especes</option>
                                        <option value="cb_externe">CB (terminal externe)</option>
                                        <option value="echeancier">Echeancier</option>
                                        <option value="autre">Autre</option>
                                    </select>
                                </div>
                                <div id="mp-echeancier-wrap-{{ a.id }}" class="hidden">
                                    <label for="mp-echeancier-{{ a.id }}" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Echeancier lie</label>
                                    <select id="mp-echeancier-{{ a.id }}" name="echeancierId" class="input-glass w-full px-3 py-2 text-xs font-bold">
                                        <option value="">— Selectionner —</option>
                                        {% for ech in echeancierList %}
                                            <option value="{{ ech.id }}">{{ ech.reference }} - {{ ech.description|length > 30 ? ech.description[:30] ~ '...' : ech.description }} ({{ ech.totalAmountHt }} &euro;)</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div>
                                    <label for="mp-reference-{{ a.id }}" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Reference (optionnel)</label>
                                    <input type="text" id="mp-reference-{{ a.id }}" name="reference" placeholder="N de virement, n de cheque..." 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-manual-pay-{{ a.id }}" class="px-4 py-2 glass font-bold uppercase text-[10px] tracking-widest">Annuler</button>
                                <button type="submit" class="px-4 py-2 bg-green-600 text-white font-bold uppercase text-[10px] tracking-wider hover:bg-green-700 transition-all">Enregistrer</button>
                            </div>
                        </form>
                    </div>
                </div>
            {% endif %}
        {% endfor %}

    {# Tab: Devis #}
    {% elseif tab == 'devis' %}
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-sm font-bold uppercase tracking-wider">Devis du client</h2>
            <a href="{{ path('app_admin_devis_create', {customerId: customer.id}) }}"
               class="px-4 py-2 glass-dark text-white font-bold uppercase text-xs tracking-widest hover:bg-[#fabf04] hover:text-gray-900 transition-all">
                + Creer un devis
            </a>
        </div>
        <div class="mb-4 relative">
            <input type="text" id="search-devis" placeholder="Rechercher un devis..." data-url="{{ path('app_admin_devis_search', {customerId: customer.id}) }}" data-tab="devis" class="w-full px-4 py-3 input-glass text-sm font-medium">
            <div id="search-devis-results" class="hidden absolute left-0 right-0 glass-heavy mt-1 max-h-60 overflow-y-auto z-50"></div>
        </div>

        {% if devisList|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">Numero</th>
                            <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Date</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Lignes</th>
                            <th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Total HT</th>
                            {% if tva_enabled %}<th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Total TTC</th>{% endif %}
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Etat</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for d in devisList %}
                            <tr class="border-b border-white/20 hover:bg-white/50">
                                <td class="px-4 py-3 font-mono font-bold">{{ d.orderNumber.numOrder }}</td>
                                <td class="px-4 py-3 text-xs text-gray-500">{{ d.createdAt|date('d/m/Y') }}</td>
                                <td class="px-4 py-3 text-center text-xs">{{ d.lines|length }}</td>
                                <td class="px-4 py-3 text-right font-mono">{{ d.totalHt }} &euro;</td>
                                {% if tva_enabled %}<td class="px-4 py-3 text-right font-mono font-bold">{{ d.totalTtc }} &euro;</td>{% endif %}
                                <td class="px-4 py-3 text-center">
                                    {% if d.state == 'accepted' %}
                                        <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Accepte</span>
                                    {% elseif d.state == 'refused' %}
                                        <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[10px]">Refuse</span>
                                    {% elseif d.state == 'send' %}
                                        <span class="px-2 py-0.5 bg-blue-500/20 text-blue-700 font-bold uppercase text-[10px]">Envoye</span>
                                    {% elseif d.state == 'cancel' %}
                                        <span class="px-2 py-0.5 bg-gray-100 text-gray-600 font-bold uppercase text-[10px]">Annule</span>
                                    {% else %}
                                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 font-bold uppercase text-[10px]">Cree</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-center">
                                    {% if d.state != 'cancel' %}
                                        <div class="flex items-center justify-center gap-2 flex-wrap">
                                            {% if d.state == 'accepted' %}
                                                {# Devis signe : afficher PDFs signes #}
                                                {% if d.signedPdf %}
                                                    <a href="{{ vich_uploader_asset(d, 'signedPdfFile') }}" target="_blank"
                                                       class="px-3 py-1 bg-green-500/20 text-green-700 hover:bg-green-500 hover:text-white font-bold uppercase text-[10px] transition-all">
                                                        PDF Signe
                                                    </a>
                                                {% endif %}
                                                {% if d.auditPdf %}
                                                    <a href="{{ vich_uploader_asset(d, 'auditPdfFile') }}" target="_blank"
                                                       class="px-3 py-1 bg-indigo-500/20 text-indigo-700 hover:bg-indigo-500 hover:text-white font-bold uppercase text-[10px] transition-all">
                                                        Audit PDF
                                                    </a>
                                                {% endif %}
                                                {% if d.advert is null %}
                                                    <form method="post" action="{{ path('app_admin_devis_create_advert', {id: d.id}) }}" class="inline" data-confirm="Creer l'avis de paiement a partir du devis {{ d.orderNumber.numOrder }} ?">
                                                        <button type="submit" class="px-3 py-1 bg-emerald-500/20 text-emerald-700 hover:bg-emerald-500 hover:text-white font-bold uppercase text-[10px] transition-all">Creer Avis</button>
                                                    </form>
                                                {% endif %}
                                                {% if d.advert %}
                                                    <a href="{{ path('app_admin_clients_show', {id: customer.id, tab: 'avis'}) }}#avis-{{ d.advert.id }}"
                                                       class="px-3 py-1 bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500 hover:text-white font-bold uppercase text-[10px] transition-all">
                                                        Avis {{ d.advert.orderNumber.numOrder }}
                                                    </a>
                                                {% endif %}
                                                {% if d.submissionId %}
                                                    <a href="{{ path('app_admin_devis_events', {id: d.id}) }}"
                                                       class="px-3 py-1 bg-indigo-500/20 text-indigo-700 hover:bg-indigo-500 hover:text-white font-bold uppercase text-[10px] transition-all">
                                                        Evenements
                                                    </a>
                                                {% endif %}
                                            {% else %}
                                                {# Devis non signe : boutons classiques #}
                                                {% if d.unsignedPdf %}
                                                    <a href="{{ vich_uploader_asset(d, 'unsignedPdfFile') }}" target="_blank"
                                                       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 PDF
                                                    </a>
                                                    <form method="post" action="{{ path('app_admin_devis_generate_pdf', {id: d.id}) }}" class="inline" data-confirm="Regenerer le PDF ? Le fichier existant sera remplace.">
                                                        <button type="submit" class="px-3 py-1 bg-yellow-500/20 text-yellow-700 hover:bg-yellow-500 hover:text-white font-bold uppercase text-[10px] transition-all">Regenerer PDF</button>
                                                    </form>
                                                {% else %}
                                                    <form method="post" action="{{ path('app_admin_devis_generate_pdf', {id: d.id}) }}" class="inline">
                                                        <button type="submit" class="px-3 py-1 bg-green-500/20 text-green-700 hover:bg-green-500 hover:text-white font-bold uppercase text-[10px] transition-all">Generer PDF</button>
                                                    </form>
                                                {% endif %}
                                                {% if d.unsignedPdf and d.state == 'created' %}
                                                    <form method="post" action="{{ path('app_admin_devis_send', {id: d.id}) }}" class="inline" data-confirm="Envoyer le devis {{ d.orderNumber.numOrder }} au client pour signature ?">
                                                        <button type="submit" class="px-3 py-1 bg-purple-500/20 text-purple-700 hover:bg-purple-500 hover:text-white font-bold uppercase text-[10px] transition-all">Envoyer</button>
                                                    </form>
                                                {% endif %}
                                                {% if d.state == 'send' %}
                                                    <form method="post" action="{{ path('app_admin_devis_resend', {id: d.id}) }}" class="inline" data-confirm="Renvoyer le lien de signature ? L'ancien lien sera annule.">
                                                        <button type="submit" class="px-3 py-1 bg-purple-500/20 text-purple-700 hover:bg-purple-500 hover:text-white font-bold uppercase text-[10px] transition-all">Renvoyer lien</button>
                                                    </form>
                                                {% endif %}
                                                {% if d.submissionId %}
                                                    <a href="{{ path('app_admin_devis_events', {id: d.id}) }}"
                                                       class="px-3 py-1 bg-indigo-500/20 text-indigo-700 hover:bg-indigo-500 hover:text-white font-bold uppercase text-[10px] transition-all">
                                                        Evenements
                                                    </a>
                                                {% endif %}
                                                <a href="{{ path('app_admin_devis_edit', {id: d.id}) }}"
                                                   class="px-3 py-1 bg-blue-500/20 text-blue-700 hover:bg-blue-500 hover:text-white font-bold uppercase text-[10px] transition-all">
                                                    Modifier
                                                </a>
                                                {% if d.advert is null %}
                                                    <form method="post" action="{{ path('app_admin_devis_cancel', {id: d.id}) }}" class="inline" data-confirm="Annuler ce devis ? Le numero {{ d.orderNumber.numOrder }} sera libere et pourra etre reutilise.">
                                                        <button type="submit" class="px-3 py-1 bg-red-500/20 text-red-700 hover:bg-red-500 hover:text-white font-bold uppercase text-[10px] transition-all">Annuler</button>
                                                    </form>
                                                {% endif %}
                                            {% endif %}
                                        </div>
                                    {% else %}
                                        <span class="text-[10px] text-gray-400">—</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <p class="mt-3 text-xs text-gray-400">{{ devisList|length }} devis</p>
        {% else %}
            <div class="glass p-8 text-center text-gray-400 font-bold">Aucun devis.</div>
        {% endif %}

    {# Tab: Echeancier #}
    {% elseif tab == 'echeancier' %}
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-3">
                <h2 class="text-lg font-bold uppercase">Echeanciers</h2>
                {% if trustStatus.status == 'confiant' %}
                    <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Confiant</span>
                {% elseif trustStatus.status == 'attention' %}
                    <span class="px-2 py-0.5 bg-yellow-500/20 text-yellow-700 font-bold uppercase text-[10px]">Attention</span>
                {% elseif trustStatus.status == 'danger' %}
                    <span class="px-2 py-0.5 bg-red-600 text-white font-bold uppercase text-[10px] animate-pulse">Danger</span>
                {% endif %}
                <span class="text-[10px] text-gray-400">{{ trustStatus.reason }}</span>
            </div>
            {% if trustStatus.status == 'danger' %}
                <span class="px-4 py-2 bg-red-500/20 text-red-700 font-bold uppercase text-[10px] tracking-wider cursor-not-allowed" title="Creation bloquee : {{ trustStatus.reason }}">Creation bloquee</span>
            {% else %}
                <button type="button" data-modal-open="modal-echeancier" class="btn-gold px-4 py-2 font-bold uppercase text-[10px] tracking-wider text-gray-900">Creer un echeancier</button>
            {% endif %}
        </div>

        {# Liste des echeanciers existants #}
        {% if echeancierList|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">Reference</th>
                            <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Description</th>
                            <th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Total HT</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Echeances</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Progression</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 e in echeancierList %}
                            <tr class="border-b border-white/20 hover:bg-white/50">
                                <td class="px-4 py-3 font-mono font-bold text-[10px]">{{ e.reference }}</td>
                                <td class="px-4 py-3 font-bold text-xs">{{ e.description|length > 50 ? e.description[:50] ~ '...' : e.description }}</td>
                                <td class="px-4 py-3 text-right font-bold text-xs">{{ e.totalAmountHt|number_format(2, ',', ' ') }} &euro;</td>
                                <td class="px-4 py-3 text-center text-xs">{{ e.nbPaid }}/{{ e.nbLines }}</td>
                                <td class="px-4 py-3 text-center">
                                    <div class="w-full bg-gray-200 h-2">
                                        <div class="bg-green-500 h-2" style="width: {{ e.progress }}%"></div>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    {% if e.state == 'active' %}
                                        <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Actif</span>
                                    {% elseif e.state == 'completed' %}
                                        <span class="px-2 py-0.5 bg-emerald-500/20 text-emerald-700 font-bold uppercase text-[10px]">Termine</span>
                                    {% elseif e.state == 'cancelled' %}
                                        <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[10px]">Annule</span>
                                    {% elseif e.state == 'draft' %}
                                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 font-bold uppercase text-[10px]">Brouillon</span>
                                    {% else %}
                                        <span class="px-2 py-0.5 bg-blue-500/20 text-blue-700 font-bold uppercase text-[10px]">{{ e.state }}</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <a href="{{ path('app_admin_echeancier_show', {id: e.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>
        {% else %}
            <div class="glass p-8 text-center text-gray-400 font-bold">Aucun echeancier pour ce client.</div>
        {% endif %}

        {# Modal creation echeancier #}
        <div id="modal-echeancier" 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">Nouvel echeancier</h2>
                <form method="post" action="{{ path('app_admin_echeancier_create', {customerId: customer.id}) }}">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4">
                        <div class="md:col-span-2">
                            <label for="ech-description" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Description / Motif *</label>
                            <textarea id="ech-description" name="description" required rows="2" class="input-glass w-full px-3 py-2 text-xs font-bold" placeholder="Ex: Solde impaye facture 04/2026-00001"></textarea>
                        </div>
                        <div>
                            <label for="ech-totalHt" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Montant total HT *</label>
                            <input type="number" id="ech-totalHt" name="totalHt" step="0.01" min="1" required class="input-glass w-full px-3 py-2 text-xs font-bold">
                        </div>
                        <div>
                            <label for="ech-nbEcheances" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Nombre d'echeances *</label>
                            <input type="number" id="ech-nbEcheances" name="nbEcheances" min="2" max="36" value="3" required class="input-glass w-full px-3 py-2 text-xs font-bold">
                        </div>
                        <div>
                            <label for="ech-startDate" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Date 1ere echeance *</label>
                            <input type="date" id="ech-startDate" name="startDate" required class="input-glass w-full px-3 py-2 text-xs font-bold">
                        </div>
                        <div class="md:col-span-2">
                            <label for="ech-advertId" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Avis de paiement lie (optionnel)</label>
                            <select id="ech-advertId" name="advertId" class="input-glass w-full px-3 py-2 text-xs font-bold">
                                <option value="">— Aucun —</option>
                                {% for a in advertsList %}
                                    <option value="{{ a.id }}">{{ a.orderNumber.numOrder }} ({{ a.totalTtc }} &euro;)</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="flex justify-end gap-2">
                        <button type="button" data-modal-close="modal-echeancier" 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>

    {# Tab: Securite #}
    {% elseif tab == 'securite' %}
        {% set user = customer.user %}

        {# Statut compte #}
        <section class="glass p-6 mb-6">
            <h2 class="text-sm font-bold uppercase tracking-wider mb-4">Statut du compte</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-xs">
                <div>
                    <span class="text-gray-400 font-bold uppercase text-[9px] block">Email</span>
                    <span class="font-mono font-bold">{{ user.email }}</span>
                </div>
                <div>
                    <span class="text-gray-400 font-bold uppercase text-[9px] block">Mot de passe</span>
                    {% if user.hasTempPassword %}
                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 font-bold uppercase text-[10px]">Temporaire</span>
                    {% else %}
                        <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Defini</span>
                    {% endif %}
                </div>
                <div>
                    <span class="text-gray-400 font-bold uppercase text-[9px] block">2FA Email</span>
                    {% if user.isEmailAuthEnabled %}
                        <span class="text-green-600 font-bold">&#10003; Active</span>
                    {% else %}
                        <span class="text-gray-400">&#10007; Desactive</span>
                    {% endif %}
                </div>
                <div>
                    <span class="text-gray-400 font-bold uppercase text-[9px] block">2FA Google</span>
                    {% if user.isGoogleAuthenticatorEnabled %}
                        <span class="text-green-600 font-bold">&#10003; Active</span>
                    {% else %}
                        <span class="text-gray-400">&#10007; Desactive</span>
                    {% endif %}
                </div>
            </div>
        </section>

        {# Reinitialiser mot de passe #}
        <section class="glass p-6 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-sm font-bold uppercase tracking-wider">Reinitialiser le mot de passe</h2>
                    <p class="text-[10px] text-gray-400 mt-1">Genere un nouveau mot de passe temporaire et envoie un email au client avec un lien pour choisir son mot de passe.</p>
                </div>
                <form method="post" action="{{ path('app_admin_clients_show', {id: customer.id, tab: 'securite'}) }}" data-confirm="Reinitialiser le mot de passe de {{ customer.fullName }} ? Un email sera envoye au client.">
                    <input type="hidden" name="security_action" value="send_reset_password">
                    <button type="submit" class="px-5 py-3 btn-gold text-xs font-bold uppercase tracking-wider text-gray-900">Envoyer un lien de reinitialisation</button>
                </form>
            </div>
        </section>

        {# Desactiver 2FA #}
        {% if user.isEmailAuthEnabled or user.isGoogleAuthenticatorEnabled %}
            <section class="glass p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-sm font-bold uppercase tracking-wider">Desactiver l'authentification a deux facteurs</h2>
                        <p class="text-[10px] text-gray-400 mt-1">Desactive le 2FA par email et Google Authenticator. Le client pourra le reactiver depuis son profil.</p>
                    </div>
                    <form method="post" action="{{ path('app_admin_clients_show', {id: customer.id, tab: 'securite'}) }}" data-confirm="Desactiver la double authentification pour {{ customer.fullName }} ?">
                        <input type="hidden" name="security_action" value="disable_2fa">
                        <button type="submit" class="px-5 py-3 border-2 border-red-600 bg-white text-red-600 font-bold uppercase text-xs tracking-wider hover:bg-red-600 hover:text-white transition-all" style="">Desactiver 2FA</button>
                    </form>
                </div>
            </section>
        {% endif %}

    {# Tab: Controle (ROLE_ROOT uniquement) #}
    {% elseif tab == 'controle' and is_granted('ROLE_ROOT') %}
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-3">
                <h2 class="text-lg font-bold uppercase">Controle client</h2>
                {% if trustStatus.status == 'confiant' %}
                    <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Confiant</span>
                {% elseif trustStatus.status == 'attention' %}
                    <span class="px-2 py-0.5 bg-yellow-500/20 text-yellow-700 font-bold uppercase text-[10px]">Attention</span>
                {% elseif trustStatus.status == 'danger' %}
                    <span class="px-2 py-0.5 bg-red-600 text-white font-bold uppercase text-[10px] animate-pulse">Danger</span>
                {% endif %}
            </div>
        </div>

        {# Resume confiance #}
        <div class="glass p-5 mb-6">
            <h3 class="text-sm font-bold uppercase tracking-wider mb-2">Statut de confiance</h3>
            <p class="text-sm text-gray-600">{{ trustStatus.reason }}</p>
        </div>

        {# Historique avertissements #}
        <div class="glass p-5 mb-6">
            <h3 class="text-sm font-bold uppercase tracking-wider mb-3">Avertissements</h3>
            {% if customer.warningLevel %}
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-xs text-gray-500">Dernier avertissement :</span>
                    {% if customer.warningLevel == '1st' %}
                        <span class="px-3 py-1 bg-yellow-500/20 text-yellow-700 font-bold uppercase text-xs">1er avertissement</span>
                    {% elseif customer.warningLevel == '2nd' %}
                        <span class="px-3 py-1 bg-orange-500/20 text-orange-700 font-bold uppercase text-xs">2eme avertissement</span>
                    {% elseif customer.warningLevel == 'last' %}
                        <span class="px-3 py-1 bg-red-600 text-white font-bold uppercase text-xs animate-pulse">Dernier avertissement</span>
                    {% endif %}
                    {% if customer.warningAt %}
                        <span class="text-[10px] text-gray-400">envoye le {{ customer.warningAt|date('d/m/Y H:i') }}</span>
                    {% endif %}
                </div>
            {% else %}
                <p class="text-xs text-gray-400 mb-4">Aucun avertissement envoye.</p>
            {% endif %}

            {# Motifs + Boutons d'envoi #}
            {% set nextWarning = customer.warningLevel is null ? '1st' : (customer.warningLevel == '1st' ? '2nd' : 'last') %}
            {% set warningLabels = {'1st': '1er avertissement', '2nd': '2eme avertissement', 'last': 'Dernier avertissement (suspension)'} %}

            {% if customer.warningLevel != 'last' %}
                <form method="post" action="{{ path('app_admin_clients_send_warning', {id: customer.id, level: nextWarning}) }}"
                      data-confirm="Envoyer le {{ warningLabels[nextWarning] }} au client {{ customer.fullName }} ?">

                    <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-2">Motifs de l'avertissement</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mb-4">
                        <label class="flex items-center gap-2 text-xs cursor-pointer">
                            <input type="checkbox" name="reasons[]" value="impayes" checked class="accent-yellow-500">
                            Impayes et/ou rejets de prelevement
                        </label>
                        <label class="flex items-center gap-2 text-xs cursor-pointer">
                            <input type="checkbox" name="reasons[]" value="irrespect" class="accent-yellow-500">
                            Manque de respect / insultes
                        </label>
                        <label class="flex items-center gap-2 text-xs cursor-pointer">
                            <input type="checkbox" name="reasons[]" value="hors_horaires" class="accent-yellow-500">
                            Appels hors des heures d'ouverture (refus de payer le service hors horaire)
                        </label>
                        <label class="flex items-center gap-2 text-xs cursor-pointer">
                            <input type="checkbox" name="reasons[]" value="gratuit" class="accent-yellow-500">
                            Exige des services gratuits
                        </label>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <button type="submit" class="px-4 py-2 {{ nextWarning == 'last' ? 'bg-red-600 text-white hover:bg-red-700' : (nextWarning == '2nd' ? 'bg-orange-500/20 text-orange-700 hover:bg-orange-500 hover:text-white' : 'bg-yellow-500/20 text-yellow-700 hover:bg-yellow-500 hover:text-white') }} font-bold uppercase text-[10px] tracking-wider transition-all">
                            Envoyer {{ warningLabels[nextWarning] }}
                        </button>
                    </div>
                </form>
            {% else %}
                <p class="text-xs text-red-600 font-bold mb-4">Tous les avertissements ont ete envoyes.</p>

                <div class="flex flex-wrap gap-3 mb-4">
                    {# Bouton notification (faire peur - n'effectue pas la suppression) #}
                    <form method="post" action="{{ path('app_admin_clients_close_account', {id: customer.id}) }}"
                          data-confirm="Envoyer la notification de cloture au client {{ customer.fullName }} ? (Le compte ne sera PAS supprime, c'est uniquement un courrier officiel)">
                        <button type="submit" class="px-5 py-3 bg-orange-600 text-white hover:bg-orange-800 font-bold uppercase text-[10px] tracking-wider transition-all">
                            Envoyer notification de cloture (avertissement)
                        </button>
                    </form>

                    {# Bouton reel de suspension #}
                    <form method="post" action="{{ path('app_admin_clients_suspend_account', {id: customer.id}) }}"
                          data-confirm="ATTENTION IRREVERSIBLE : Suspendre le compte de {{ customer.fullName }} ? Le statut passera en SUSPENDU.">
                        <button type="submit" class="px-5 py-3 bg-red-800 text-white hover:bg-red-950 font-bold uppercase text-[10px] tracking-wider transition-all animate-pulse">
                            Suspendre le compte
                        </button>
                    </form>
                </div>
            {% endif %}

            {% if customer.warningLevel %}
                <form method="post" action="{{ path('app_admin_clients_reset_warning', {id: customer.id}) }}" class="mt-3"
                      data-confirm="Reinitialiser les avertissements du client {{ customer.fullName }} ?">
                    <button type="submit" class="px-4 py-2 glass font-bold uppercase text-[10px] tracking-wider hover:bg-gray-900 hover:text-white transition-all">Reinitialiser</button>
                </form>
            {% endif %}
        </div>

        {# Progression des avertissements #}
        <div class="glass p-5 mb-6">
            <h3 class="text-sm font-bold uppercase tracking-wider mb-3">Progression</h3>
            <div class="flex items-center gap-2">
                <div class="flex-1 h-3 {{ customer.warningLevel in ['1st', '2nd', 'last'] ? 'bg-yellow-500' : 'bg-gray-200' }}"></div>
                <div class="flex-1 h-3 {{ customer.warningLevel in ['2nd', 'last'] ? 'bg-orange-500' : 'bg-gray-200' }}"></div>
                <div class="flex-1 h-3 {{ customer.warningLevel == 'last' ? 'bg-red-600' : 'bg-gray-200' }}"></div>
                <div class="flex-1 h-3 {{ customer.state == 'pending_delete' ? 'bg-red-900' : 'bg-gray-200' }}"></div>
            </div>
            <div class="flex justify-between mt-1">
                <span class="text-[9px] text-gray-400 font-bold uppercase">1er avert.</span>
                <span class="text-[9px] text-gray-400 font-bold uppercase">2eme avert.</span>
                <span class="text-[9px] text-gray-400 font-bold uppercase">Dernier avert.</span>
                <span class="text-[9px] text-gray-400 font-bold uppercase">Cloture</span>
            </div>
        </div>

    {# Tab: Contrats #}
    {% elseif tab == 'contrats' %}
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold uppercase">Contrats</h2>
        </div>

        {% if contratsList|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">Reference</th>
                            <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Type</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-left font-bold uppercase text-xs tracking-widest">Date</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for c in contratsList %}
                            <tr class="border-b border-white/20 hover:bg-white/50">
                                <td class="px-4 py-3 font-mono font-bold text-[10px]">{{ c.reference }}</td>
                                <td class="px-4 py-3 text-xs">{{ c.typeLabel }}</td>
                                <td class="px-4 py-3 text-center">
                                    {% if c.state == 'signed' %}
                                        <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Signe</span>
                                    {% elseif c.state == 'send' %}
                                        <span class="px-2 py-0.5 bg-blue-500/20 text-blue-700 font-bold uppercase text-[10px]">Envoye</span>
                                    {% elseif c.state == 'cancelled' %}
                                        <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[10px]">Annule</span>
                                    {% else %}
                                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 font-bold uppercase text-[10px]">Brouillon</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-xs text-gray-500">{{ c.createdAt|date('d/m/Y') }}{% if c.signedAt %} <span class="text-green-600">(signe {{ c.signedAt|date('d/m/Y') }})</span>{% endif %}</td>
                                <td class="px-4 py-3 text-center">
                                    <a href="{{ path('app_admin_contrats_show', {id: c.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>
        {% else %}
            <div class="glass p-8 text-center text-gray-400 font-bold">Aucun contrat pour ce client.</div>
        {% endif %}

    {# Tab: E-Flex #}
    {% elseif tab == 'esyflex' %}
        {% set hasActiveEflex = false %}
        {% set hasDefaultEflex = false %}
        {% for e in eflexList %}
            {% if e.state in ['active', 'pending_setup', 'draft'] %}
                {% set hasActiveEflex = true %}
            {% endif %}
            {% if e.state == 'cancelled' and e.nbFailed > 0 %}
                {% set hasDefaultEflex = true %}
            {% endif %}
        {% endfor %}

        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold uppercase">E-Flex</h2>
            {% if hasDefaultEflex %}
                <span class="px-4 py-2 bg-red-500/20 text-red-700 font-bold uppercase text-[10px] tracking-wider cursor-not-allowed" title="E-Flex en defaut - regularisation necessaire">Creation bloquee (defaut)</span>
            {% elseif hasActiveEflex %}
                <span class="px-4 py-2 bg-yellow-500/20 text-yellow-700 font-bold uppercase text-[10px] tracking-wider cursor-not-allowed" title="Un E-Flex est deja en cours">E-Flex en cours</span>
            {% else %}
                <button type="button" data-modal-open="modal-eflex" class="btn-gold px-4 py-2 font-bold uppercase text-[10px] tracking-wider text-gray-900">Creer un E-Flex</button>
            {% endif %}
        </div>

        {% if eflexList|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">Reference</th>
                            <th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Description</th>
                            <th class="px-4 py-3 text-right font-bold uppercase text-xs tracking-widest">Total</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Echeances</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Methode</th>
                            <th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Progression</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 e in eflexList %}
                            <tr class="border-b border-white/20 hover:bg-white/50">
                                <td class="px-4 py-3 font-mono font-bold text-[10px]">{{ e.reference }}</td>
                                <td class="px-4 py-3 font-bold text-xs">{{ e.description|length > 40 ? e.description[:40] ~ '...' : e.description }}</td>
                                <td class="px-4 py-3 text-right font-bold text-xs">{{ e.totalAmount|number_format(2, ',', ' ') }} &euro;</td>
                                <td class="px-4 py-3 text-center text-xs">{{ e.nbPaid }}/{{ e.nbLines }}</td>
                                <td class="px-4 py-3 text-center text-xs">{{ e.paymentMethodLabel }}</td>
                                <td class="px-4 py-3 text-center">
                                    <div class="w-full bg-gray-200 h-2"><div class="bg-green-500 h-2" style="width: {{ e.progress }}%"></div></div>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    {% if e.state == 'active' %}
                                        <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Actif</span>
                                    {% elseif e.state == 'completed' %}
                                        <span class="px-2 py-0.5 bg-emerald-500/20 text-emerald-700 font-bold uppercase text-[10px]">Termine</span>
                                    {% elseif e.state == 'cancelled' %}
                                        <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[10px]">Annule</span>
                                    {% elseif e.state == 'draft' %}
                                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 font-bold uppercase text-[10px]">Brouillon</span>
                                    {% elseif e.state == 'pending_setup' %}
                                        <span class="px-2 py-0.5 bg-orange-500/20 text-orange-700 font-bold uppercase text-[10px]">En attente</span>
                                    {% else %}
                                        <span class="px-2 py-0.5 bg-blue-500/20 text-blue-700 font-bold uppercase text-[10px]">{{ e.state }}</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <a href="{{ path('app_admin_eflex_show', {id: e.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>
        {% else %}
            <div class="glass p-8 text-center text-gray-400 font-bold">Aucun contrat E-Flex pour ce client.</div>
        {% endif %}

        {# Modal creation E-Flex #}
        <div id="modal-eflex" 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 contrat E-Flex</h2>
                <form method="post" action="{{ path('app_admin_eflex_create', {customerId: customer.id}) }}">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4">
                        <div class="md:col-span-2">
                            <label for="eflex-description" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Description / Service *</label>
                            <textarea id="eflex-description" name="description" required rows="2" class="input-glass w-full px-3 py-2 text-xs font-bold" placeholder="Ex: Financement site internet + hebergement 12 mois"></textarea>
                        </div>
                        <div>
                            <label for="eflex-totalAmount" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Montant total *</label>
                            <input type="number" id="eflex-totalAmount" name="totalAmount" step="0.01" min="1" required class="input-glass w-full px-3 py-2 text-xs font-bold">
                        </div>
                        <div>
                            <label for="eflex-nbEcheances" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Nombre d'echeances *</label>
                            <input type="number" id="eflex-nbEcheances" name="nbEcheances" min="2" max="36" value="3" required class="input-glass w-full px-3 py-2 text-xs font-bold">
                        </div>
                    </div>
                    <p class="text-[10px] text-gray-400 mb-4">La 1ere echeance sera due 2 jours apres la signature. Les suivantes tous les 2 mois.</p>
                    <div class="flex justify-end gap-2">
                        <button type="button" data-modal-close="modal-eflex" 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>

    {# Tabs placeholder #}
    {% else %}
        <div class="glass p-12 text-center">
            <p class="text-gray-400 font-bold uppercase text-sm tracking-wider">{{ tabs[tab] ?? tab }}</p>
            <p class="text-gray-300 text-xs mt-2">Cette section sera disponible prochainement.</p>
        </div>
    {% endif %}
</div>
{% endblock %}
