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

{% block commercial_title %}Catégories de produits{% endblock %}

{% block commercial_content %}
<div class="supplier-index-page" data-controller="product-category-index">
    <header class="capsule-heading">
        <div class="capsule-heading-main">
            <div class="capsule-heading-content">
                <h1 class="capsule-heading-title">Catégories de produits</h1>
                <p class="capsule-heading-subtitle">Structurez votre catalogue de produits et services pour faciliter la création des devis et factures.</p>
            </div>
        </div>
        <div class="capsule-heading-actions">
            <a class="capsule-button capsule-button--secondary" href="{{ path('commercial_product_index') }}"><i class="ti ti-packages"></i>Catalogue</a>
            <a class="capsule-button capsule-button--secondary" href="{{ path('commercial_product_category_export', filters) }}" data-turbo="false"><i class="ti ti-file-export"></i>Exporter</a>
            {% if is_granted('COMMERCIAL_REFERENCE_MANAGE', company) %}<a class="capsule-button capsule-button--primary" href="{{ path('commercial_product_category_new') }}"><i class="ti ti-plus"></i>Nouvelle catégorie</a>{% endif %}
        </div>
    </header>

    <section class="data-kpis-5" aria-label="Indicateurs des catégories de produits">
        <article class="data-kpi data-kpi--indigo">
            <span class="data-kpi__icon"><i class="ti ti-category"></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>Avec au moins une référence</small></div>
        </article>
        <article class="data-kpi data-kpi--green">
            <span class="data-kpi__icon"><i class="ti ti-packages"></i></span>
            <div><span>Références rattachées</span><strong>{{ view.kpis.products }}</strong><small>Produits et services actifs</small></div>
        </article>
        <article class="data-kpi data-kpi--yellow">
            <span class="data-kpi__icon"><i class="ti ti-folder-off"></i></span>
            <div><span>Catégories vides</span><strong>{{ view.kpis.empty }}</strong><small>À compléter ou archiver</small></div>
        </article>
        <article class="data-kpi data-kpi--gray">
            <span class="data-kpi__icon"><i class="ti ti-archive"></i></span>
            <div><span>Archivées</span><strong>{{ view.kpis.archived }}</strong><small>Hors catalogue</small></div>
        </article>
    </section>

    <div class="supplier-content-layout">
        <main>
            <form id="product-category-filter-form" class="supplier-filter-card" method="get">
                <div class="supplier-filter-search">
                    <label for="product-category-search">Recherche</label>
                    <div><i class="ti ti-search"></i><input id="product-category-search" class="form-control" name="q" value="{{ filters.q }}" placeholder="Nom, code, description…"></div>
                </div>
                <div>
                    <label for="product-category-status">Statut</label>
                    <select id="product-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="product-category-usage">Utilisation</label>
                    <select id="product-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>
                <button class="btn btn-primary" type="submit"><i class="ti ti-filter-filled"></i>Filtrer</button>
                <a href="{{ path('commercial_product_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="product-category-filter-form" data-action="change->product-category-index#submitFilters">
                            <option value="position" {{ filters.sort == 'position' ? 'selected' : '' }}>Position</option>
                            <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="products_desc" {{ filters.sort == 'products_desc' ? 'selected' : '' }}>Plus utilisées</option>
                            <option value="recent" {{ filters.sort == 'recent' ? 'selected' : '' }}>Modification 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>Code</th><th>Description</th><th>Produits &amp; services</th><th>Position</th><th>Dernière modification</th><th>Statut</th><th>Actions</th></tr></thead>
                        <tbody>
                        {% for row in view.rows %}
                            {% set category = row.category %}
                            {% set initials = category.name|split(' ')|map(word => word|slice(0, 1))|join|slice(0, 2)|upper %}
                            <tr class="{{ row.archived ? 'is-archived' : '' }}">
                                <td><div class="supplier-name"><span style="--supplier-color:{{ category.color|e('html_attr') }}">{{ initials }}</span><div><strong>{{ category.name }}</strong><small>{{ row.product_count ? row.product_count ~ ' référence' ~ (row.product_count > 1 ? 's' : '') ~ ' active' ~ (row.product_count > 1 ? 's' : '') : 'Catégorie vide' }}</small></div></div></td>
                                <td><code>{{ category.code }}</code></td>
                                <td><span class="d-inline-block text-truncate" style="max-width:18rem">{{ category.description ? category.description|striptags : '—' }}</span></td>
                                <td><strong>{{ row.product_count }}</strong>{% if row.total_product_count > row.product_count %}<small class="d-block text-muted">{{ row.total_product_count - row.product_count }} archivée{{ row.total_product_count - row.product_count > 1 ? 's' : '' }}</small>{% endif %}</td>
                                <td><span class="supplier-type is-company"><i class="ti ti-arrows-sort"></i>{{ category.position }}</span></td>
                                <td>{{ category.updatedAt|date('d/m/Y') }}<small class="d-block text-muted">{{ category.updatedAt|date('H:i') }}</small></td>
                                <td><span class="supplier-status {{ row.archived ? 'is-archived' : 'is-active' }}"><i></i>{{ row.archived ? 'Archivée' : 'Active' }}</span></td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        {% if is_granted('COMMERCIAL_REFERENCE_MANAGE', company) %}<a class="link" href="{{ path('commercial_product_category_edit', {idtoken: category.idtoken}) }}" title="Modifier" aria-label="Modifier {{ category.name }}"><i class="ti ti-edit fs-5"></i></a>{% endif %}
                                        {% if is_granted('COMMERCIAL_REFERENCE_MANAGE', company) and not row.archived %}
                                            {% if row.total_product_count == 0 %}<form method="post" action="{{ path('commercial_product_category_archive', {idtoken: category.idtoken}) }}" data-action="submit->product-category-index#confirmArchive"><input type="hidden" name="_token" value="{{ csrf_token('product_category_archive_' ~ category.idtoken) }}"><button class="btn btn-sm text-danger p-0" type="submit" title="Archiver" aria-label="Archiver {{ category.name }}"><i class="ti ti-archive fs-5"></i></button></form>{% else %}<span class="text-muted" title="Retirez d’abord les références de cette catégorie"><i class="ti ti-lock fs-5"></i></span>{% endif %}
                                        {% endif %}
                                    </div>
                                </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_product_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_product_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_product_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="product-category-filter-form" data-action="change->product-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="{{ path('commercial_product_category_new') }}"><i class="ti ti-category-plus"></i><span><strong>Créer une catégorie</strong><small>Organiser le catalogue</small></span></a>{% endif %}
                <a class="is-warning" href="{{ path('commercial_product_category_index', {usage: 'empty'}) }}"><i class="ti ti-folder-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_product_index') }}"><i class="ti ti-packages"></i><span><strong>Produits &amp; services</strong><small>{{ view.kpis.products }} référence{{ view.kpis.products > 1 ? 's' : '' }} rattachée{{ view.kpis.products > 1 ? 's' : '' }}</small></span></a>
                <a href="{{ path('commercial_product_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>
</div>
{% endblock %}