{% extends '@Commercial/commercial/layout.html.twig' %}

{% block commercial_title %}Catégories prospects et clients{% endblock %}

{% block commercial_content %}
<div class="supplier-index-page" data-controller="client-category-index" data-client-category-index-open-create-value="{{ error ? 'true' : 'false' }}">
    <header class="capsule-heading">
        <div class="capsule-heading-main">
            <div class="capsule-heading-content">
                <h1 class="capsule-heading-title">Catégories prospects et clients</h1>
                <p class="capsule-heading-subtitle">Classez votre portefeuille par marque, activité ou segment commercial.</p>
            </div>
        </div>
        <div class="capsule-heading-actions">
            <a class="capsule-button capsule-button--secondary" href="{{ path('commercial_client_index') }}"><i class="ti ti-users"></i>Clients</a>
            <a class="capsule-button capsule-button--secondary" href="{{ path('commercial_client_category_export', filters) }}" data-turbo="false"><i class="ti ti-file-export"></i>Exporter</a>
            {% if is_granted('COMMERCIAL_REFERENCE_MANAGE', company) %}<button class="capsule-button capsule-button--primary" type="button" data-bs-toggle="modal" data-bs-target="#client-category-create-modal" data-action="client-category-index#focusCreate"><i class="ti ti-plus"></i>Nouvelle catégorie</button>{% endif %}
        </div>
    </header>

    <section class="data-kpis-5" aria-label="Indicateurs des catégories prospects et clients">
        <article class="data-kpi data-kpi--indigo">
            <span class="data-kpi__icon"><i class="ti ti-tags"></i></span>
            <div><span>Catégories actives</span><strong>{{ view.kpis.active }}</strong><small>{% if view.kpis.new_count %}+{{ view.kpis.new_count }} ce mois{% endif %}</small></div>
        </article>
        <article class="data-kpi data-kpi--violet">
            <span class="data-kpi__icon"><i class="ti ti-link"></i></span>
            <div><span>Catégories utilisées</span><strong>{{ view.kpis.used }}</strong><small>{{ view.kpis.empty }} catégorie{{ view.kpis.empty > 1 ? 's' : '' }} vide{{ view.kpis.empty > 1 ? 's' : '' }}</small></div>
        </article>
        <article class="data-kpi data-kpi--green">
            <span class="data-kpi__icon"><i class="ti ti-building"></i></span>
            <div><span>Clients classés</span><strong>{{ view.kpis.clients }}</strong><small>Fiches actives</small></div>
        </article>
        <article class="data-kpi data-kpi--orange">
            <span class="data-kpi__icon"><i class="ti ti-user-search"></i></span>
            <div><span>Prospects classés</span><strong>{{ view.kpis.prospects }}</strong><small>Fiches actives</small></div>
        </article>
        <article class="data-kpi data-kpi--gray">
            <span class="data-kpi__icon"><i class="ti ti-archive"></i></span>
            <div><span>Catégories archivées</span><strong>{{ view.kpis.archived }}</strong><small>Conservées sur les anciennes fiches</small></div>
        </article>
    </section>

    <div class="supplier-content-layout">
        <main>
            <form id="client-category-filter-form" class="supplier-filter-card" method="get">
                <div class="supplier-filter-search"><label for="client-category-search">Recherche</label><div><i class="ti ti-search"></i><input id="client-category-search" class="form-control" name="q" value="{{ filters.q }}" placeholder="Rechercher une catégorie…"></div></div>
                <div><label for="client-category-status">Statut</label><select id="client-category-status" class="form-select" name="status"><option value="active" {{ filters.status == 'active' ? 'selected' : '' }}>Actives</option><option value="archived" {{ filters.status == 'archived' ? 'selected' : '' }}>Archivées</option><option value="all" {{ filters.status == 'all' ? 'selected' : '' }}>Toutes</option></select></div>
                <div><label for="client-category-usage">Utilisation</label><select id="client-category-usage" class="form-select" name="usage"><option value="">Toutes</option><option value="used" {{ filters.usage == 'used' ? 'selected' : '' }}>Utilisées</option><option value="empty" {{ filters.usage == 'empty' ? 'selected' : '' }}>Vides</option></select></div>
                <div><label for="client-category-audience">Population</label><select id="client-category-audience" class="form-select" name="audience"><option value="">Toutes</option><option value="clients" {{ filters.audience == 'clients' ? 'selected' : '' }}>Avec clients</option><option value="prospects" {{ filters.audience == 'prospects' ? 'selected' : '' }}>Avec prospects</option><option value="mixed" {{ filters.audience == 'mixed' ? 'selected' : '' }}>Mixtes</option></select></div>
                <button class="btn btn-primary" type="submit"><i class="ti ti-filter-filled"></i>Filtrer</button><a href="{{ path('commercial_client_category_index') }}">Réinitialiser</a>
            </form>

            <section class="supplier-table-card">
                <div class="supplier-table-toolbar">
                    <div><strong>{{ view.total_rows }} catégorie{{ view.total_rows > 1 ? 's' : '' }}</strong><span>trouvée{{ view.total_rows > 1 ? 's' : '' }}</span></div>
                    <label>Trier par : <select class="form-select form-select-sm" name="sort" form="client-category-filter-form" data-action="change->client-category-index#submitFilters"><option value="name" {{ filters.sort == 'name' ? 'selected' : '' }}>Nom A–Z</option><option value="name_desc" {{ filters.sort == 'name_desc' ? 'selected' : '' }}>Nom Z–A</option><option value="contacts_desc" {{ filters.sort == 'contacts_desc' ? 'selected' : '' }}>Plus utilisée</option><option value="recent" {{ filters.sort == 'recent' ? 'selected' : '' }}>Création récente</option></select></label>
                </div>

                <div class="table-responsive">
                    <table class="table supplier-table align-middle mb-0">
                        <thead><tr><th>Catégorie</th><th>Clients actifs</th><th>Prospects actifs</th><th>Total actif</th><th>Historique</th><th>Date de création</th><th>Statut</th><th>Actions</th></tr></thead>
                        <tbody>
                        {% for row in view.rows %}
                            {% set category = row.category %}
                            {% set initials = category.nom|split(' ')|map(word => word|slice(0, 1))|join|slice(0, 2)|upper %}
                            {% set historical_count = row.total_record_count - row.active_record_count %}
                            <tr class="{{ row.archived ? 'is-archived' : '' }}">
                                <td><div class="supplier-name"><span style="--supplier-color:{{ cycle(['#3b82f6', '#ef5a67', '#f2b705', '#13a7bd', '#8b5cf6'], loop.index0) }}">{{ initials }}</span><div><strong>{{ category.nom }}</strong><small>{{ row.active_record_count ? row.active_record_count ~ ' fiche' ~ (row.active_record_count > 1 ? 's' : '') ~ ' active' ~ (row.active_record_count > 1 ? 's' : '') : 'Catégorie vide' }}</small></div></div></td>
                                <td><span class="supplier-type is-company"><i class="ti ti-building"></i>{{ row.client_count }}</span></td>
                                <td><span class="supplier-type is-individual"><i class="ti ti-user-search"></i>{{ row.prospect_count }}</span></td>
                                <td><strong>{{ row.active_record_count }}</strong></td>
                                <td>{{ historical_count > 0 ? historical_count : '—' }}</td>
                                <td>{{ category.createdAt ? category.createdAt|date('d/m/Y') : '—' }}</td>
                                <td><span class="supplier-status {{ row.archived ? 'is-archived' : 'is-active' }}"><i></i>{{ row.archived ? 'Archivée' : 'Active' }}</span></td>
                                <td>{% if is_granted('COMMERCIAL_REFERENCE_MANAGE', company) and not row.archived %}<form method="post" action="{{ path('commercial_client_category_archive', {idtoken: category.idtoken}) }}" data-action="submit->client-category-index#confirmArchive"><input type="hidden" name="_token" value="{{ csrf_token('client_category_archive_' ~ category.idtoken) }}"><button class="btn btn-sm text-danger p-0" type="submit" title="Archiver" aria-label="Archiver {{ category.nom }}"><i class="ti ti-archive fs-5"></i></button></form>{% else %}—{% endif %}</td>
                            </tr>
                        {% else %}<tr><td colspan="8" class="text-center text-muted py-5">Aucune catégorie ne correspond aux filtres.</td></tr>{% endfor %}
                        </tbody>
                    </table>
                </div>

                <footer class="supplier-table-footer">
                    <span>Affichage de <strong>{{ view.first_row }}–{{ view.last_row }}</strong> sur <strong>{{ view.total_rows }}</strong> catégories</span>
                    <nav>{% if view.page > 1 %}<a href="{{ path('commercial_client_category_index', filters|merge({page: view.page - 1})) }}"><i class="ti ti-chevron-left"></i></a>{% endif %}{% for page in 1..view.page_count %}{% if page == 1 or page == view.page_count or (page >= view.page - 1 and page <= view.page + 1) %}<a class="{{ page == view.page ? 'is-active' : '' }}" href="{{ path('commercial_client_category_index', filters|merge({page: page})) }}">{{ page }}</a>{% elseif page == 2 or page == view.page_count - 1 %}<span>…</span>{% endif %}{% endfor %}{% if view.page < view.page_count %}<a href="{{ path('commercial_client_category_index', filters|merge({page: view.page + 1})) }}"><i class="ti ti-chevron-right"></i></a>{% endif %}</nav>
                    <label>Par page : <select class="form-select form-select-sm" name="perPage" form="client-category-filter-form" data-action="change->client-category-index#submitFilters">{% for size in [10, 25, 50] %}<option value="{{ size }}" {{ filters.perPage == size ? 'selected' : '' }}>{{ size }}</option>{% endfor %}</select></label>
                </footer>
            </section>
        </main>

        <aside class="supplier-quick-card">
            <div><span><i class="ti ti-bolt"></i></span><h2>Actions rapides</h2></div>
            <section>
                {% if is_granted('COMMERCIAL_REFERENCE_MANAGE', company) %}<a class="is-primary" href="#client-category-create-modal" data-bs-toggle="modal" data-bs-target="#client-category-create-modal" data-action="client-category-index#focusCreate"><i class="ti ti-tag-plus"></i><span><strong>Créer une catégorie</strong><small>Segmenter le portefeuille</small></span></a>{% endif %}
                <a class="is-warning" href="{{ path('commercial_client_category_index', {usage: 'empty'}) }}"><i class="ti ti-tag-off"></i><span><strong>Catégories vides</strong><small>{{ view.kpis.empty }} catégorie{{ view.kpis.empty > 1 ? 's' : '' }} à vérifier</small></span></a>
                <a href="{{ path('commercial_client_index') }}"><i class="ti ti-building"></i><span><strong>Consulter les clients</strong><small>{{ view.kpis.clients }} client{{ view.kpis.clients > 1 ? 's' : '' }} classé{{ view.kpis.clients > 1 ? 's' : '' }}</small></span></a>
                <a href="{{ path('commercial_prospect_index') }}"><i class="ti ti-user-search"></i><span><strong>Consulter les prospects</strong><small>{{ view.kpis.prospects }} prospect{{ view.kpis.prospects > 1 ? 's' : '' }} classé{{ view.kpis.prospects > 1 ? 's' : '' }}</small></span></a>
                <a href="{{ path('commercial_client_category_index', {status: 'archived'}) }}"><i class="ti ti-archive"></i><span><strong>Catégories archivées</strong><small>{{ view.kpis.archived }} élément{{ view.kpis.archived > 1 ? 's' : '' }}</small></span></a>
            </section>
        </aside>
    </div>

    {% if is_granted('COMMERCIAL_REFERENCE_MANAGE', company) %}
        <div class="modal fade" id="client-category-create-modal" tabindex="-1" aria-hidden="true" data-client-category-index-target="createModal">
            <div class="modal-dialog modal-dialog-centered"><form class="modal-content" method="post"><input type="hidden" name="_token" value="{{ csrf_token('client_category_create') }}"><div class="modal-header"><h2 class="modal-title fs-5">Nouvelle catégorie</h2><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><label class="form-label" for="client-category-name">Nom de la catégorie <b class="text-danger">*</b></label><input id="client-category-name" class="form-control {{ error ? 'is-invalid' : '' }}" name="name" value="{{ create_name }}" placeholder="Ex. Partenaires" required data-client-category-index-target="createName">{% if error %}<div class="invalid-feedback">{{ error }}</div>{% endif %}<div class="form-text mt-3"><i class="ti ti-info-circle"></i> Les catégories Rexane et FundUp sont proposées automatiquement.</div></div><div class="modal-footer"><button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Annuler</button><button class="btn btn-primary" type="submit"><i class="ti ti-plus"></i>Créer la catégorie</button></div></form></div>
        </div>
    {% endif %}
</div>
{% endblock %}