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

{% block commercial_title %}Produits & services{% endblock %}

{% block commercial_content %}
<div class="supplier-index-page product-index-page" data-controller="product-index">
    <header class="capsule-heading">
        <div class="capsule-heading-main">
            <div class="capsule-heading-content">
                <h1 class="capsule-heading-title">Produits &amp; services</h1>
                <p class="capsule-heading-subtitle">Gérez le catalogue réutilisable dans vos devis et factures.</p>
            </div>
        </div>

        <div class="capsule-heading-actions">
            {% if is_granted('COMMERCIAL_REFERENCE_MANAGE', company) %}<a class="capsule-button capsule-button--secondary" href="{{ path('commercial_product_category_index') }}"><i class="ti ti-category"></i>Catégories</a>
            <a class="capsule-button capsule-button--secondary" href="{{ path('commercial_product_export', filters) }}" data-turbo="false"><i class="ti ti-file-export"></i>Exporter</a>
                <a class="capsule-button capsule-button--primary" href="{{ path('commercial_product_new') }}"><i class="ti ti-plus"></i>Nouveau produit</a>
            {% endif %}
        </div>
    </header>

    <section class="data-kpis-5" aria-label="Indicateurs des produits et services">
        <article class="data-kpi data-kpi--indigo">
            <span class="data-kpi__icon"><i class="ti ti-packages"></i></span>
            <div><span>Références 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-package"></i></span>
            <div><span>Produits</span><strong>{{ view.kpis.products }}</strong><small>Biens facturables</small></div>
        </article>
        <article class="data-kpi data-kpi--orange">
            <span class="data-kpi__icon"><i class="ti ti-briefcase"></i></span>
            <div><span>Services</span><strong>{{ view.kpis.services }}</strong><small>Prestations</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és</span><strong>{{ view.kpis.archived }}</strong><small>Hors catalogue</small></div>
        </article>
        <article class="data-kpi data-kpi--green">
            <span class="data-kpi__icon"><i class="ti ti-currency-euro"></i></span>
            <div><span>Prix moyen HT</span><strong>{{ view.kpis.average_price|number_format(2, ',', ' ') }} €</strong><small>Références actives</small></div>
        </article>
    </section>

    <div class="supplier-content-layout">
        <main>
            <form id="product-filter-form" class="supplier-filter-card" method="get">
                <div class="supplier-filter-search">
                    <label for="product-search">Recherche</label>
                    <div><i class="ti ti-search"></i><input id="product-search" class="form-control" name="q" value="{{ filters.q }}" placeholder="Nom, référence, description…"></div>
                </div>
                <div>
                    <label for="product-type">Type</label>
                    <select id="product-type" class="form-select" name="type">
                        <option value="">Tous</option>
                        <option value="product" {{ filters.type == 'product' ? 'selected' : '' }}>Produit</option>
                        <option value="service" {{ filters.type == 'service' ? 'selected' : '' }}>Service</option>
                    </select>
                </div>
                <div>
                    <label for="product-category">Catégorie</label>
                    <select id="product-category" class="form-select" name="category">
                        <option value="">Toutes</option>
                        {% for category in categories %}<option value="{{ category.id }}" {{ filters.category == category.id ~ '' ? 'selected' : '' }}>{{ category.name }}</option>{% endfor %}
                    </select>
                </div>
                <div>
                    <label for="product-status">Statut</label>
                    <select id="product-status" class="form-select" name="status">
                        <option value="active" {{ filters.status == 'active' ? 'selected' : '' }}>Actifs</option>
                        <option value="archived" {{ filters.status == 'archived' ? 'selected' : '' }}>Archivés</option>
                        <option value="all" {{ filters.status == 'all' ? 'selected' : '' }}>Tous</option>
                    </select>
                </div>
                <button class="btn btn-primary" type="submit"><i class="ti ti-filter-filled"></i>Filtrer</button>
                <a href="{{ path('commercial_product_index') }}">Réinitialiser</a>
            </form>

            <section class="supplier-table-card">
                <div class="supplier-table-toolbar">
                    <div><strong>{{ view.total_rows }} référence{{ 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-filter-form" data-action="change->product-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="price_asc" {{ filters.sort == 'price_asc' ? 'selected' : '' }}>Prix croissant</option>
                            <option value="price_desc" {{ filters.sort == 'price_desc' ? 'selected' : '' }}>Prix décroissant</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>Produit / service</th><th>Type</th><th>Référence</th><th>Catégorie</th><th>Unité</th><th>Prix HT</th>{% if is_granted('COMMERCIAL_REFERENCE_MANAGE', company) %}<th>Coût interne</th><th>Marge cible</th>{% endif %}<th>TVA</th><th>Statut</th><th></th></tr></thead>
                        <tbody>
                        {% set unit_labels = {unite: 'Unité', heure: 'Heure', jour: 'Jour'} %}
                        {% for row in view.rows %}
                            {% set product = row.product %}
                            {% set initials = product.nom|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:{{ cycle(['#3b82f6', '#ef5a67', '#f2b705', '#13a7bd', '#8b5cf6'], loop.index0) }}">{{ initials }}</span><div><strong>{{ product.nom }}</strong><small>{{ product.description | raw ?: 'Sans description' }}</small></div></div></td>
                                <td><span class="supplier-type is-{{ product.productType == 'product' ? 'company' : 'individual' }}"><i class="ti {{ product.productType == 'product' ? 'ti-package' : 'ti-briefcase' }}"></i>{{ product.productType == 'product' ? 'Produit' : 'Service' }}</span></td>
                                <td>{% if product.reference %}<code>{{ product.reference }}</code>{% else %}<em>Non renseignée</em>{% endif %}</td>
                                <td>{% if product.category %}<span class="d-inline-flex align-items-center gap-1"><i class="rounded-circle d-inline-block" style="width:.55rem;height:.55rem;background:{{ product.category.color }}"></i>{{ product.category.name }}</span>{% else %}—{% endif %}</td>
                                <td>{{ unit_labels[product.unit]|default(product.unit|title) }}</td>
                                <td><strong>{{ product.prix|number_format(2, ',', ' ') }} €</strong></td>
                                {% if is_granted('COMMERCIAL_REFERENCE_MANAGE', company) %}<td>{{ product.internalCost is not null ? product.internalCost|number_format(2, ',', ' ') ~ ' €' : '—' }}</td>
                                <td>{{ product.targetMarginRate is not null ? product.targetMarginRate|number_format(2, ',', ' ') ~ ' %' : '—' }}</td>{% endif %}
                                <td>{{ product.taxe ? product.taxe.nom : '—' }}</td>
                                <td><span class="supplier-status {{ row.archived ? 'is-archived' : 'is-active' }}"><i></i>{{ row.archived ? 'Archivé' : 'Actif' }}</span></td>
                                <td><a class="link" href="{{ path('commercial_product_show', {idtoken: product.idtoken}) }}" aria-label="Voir {{ product.nom }}"><i class="ti ti-eye fs-5"></i></a></td>
                            </tr>
                        {% else %}
                            <tr><td colspan="11" class="text-center text-muted py-5">Aucun produit ou service 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> références</span>
                    <nav>
                        {% if view.page > 1 %}<a href="{{ path('commercial_product_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_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_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-filter-form" data-action="change->product-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_new') }}"><i class="ti ti-package-import"></i><span><strong>Créer une référence</strong><small>Produit ou prestation</small></span></a>{% endif %}
                <a class="is-warning" href="{{ path('commercial_product_category_index') }}"><i class="ti ti-category"></i><span><strong>Gérer les catégories</strong><small>{{ categories|length }} catégorie{{ categories|length > 1 ? 's' : '' }} active{{ categories|length > 1 ? 's' : '' }}</small></span></a>
                <a href="{{ path('commercial_product_index', {status: 'archived'}) }}"><i class="ti ti-archive"></i><span><strong>Références archivées</strong><small>{{ view.kpis.archived }} élément{{ view.kpis.archived > 1 ? 's' : '' }}</small></span></a>
            </section>
        </aside>
    </div>
</div>
{% endblock %}