{% extends '@App/app.html.twig' %}
{% block title %}Bons de commande{% endblock %}
{% block page_header %}{% endblock %}
{% block content %}
    {% set visible_total = rows|length %}
    {% set draft_count = rows|filter(row => row.order.status == 'draft')|length %}
    {% set sent_count = rows|filter(row => row.order.status == 'sent')|length %}
    {% set confirmed_count = rows|filter(row => row.order.status == 'confirmed')|length %}
    {% set closed_count = rows|filter(row => row.order.status == 'closed')|length %}
    <section class="clientsphere-page billing-index" data-controller="commercial-client-table" data-commercial-client-table-page-size-value="20" data-commercial-client-table-total-label-value="bons de commande">
        <div class="clientsphere-heading">
            <div class="clientsphere-title"><div><h1 class="capsule-title">Bons de commande</h1><p>Créez, faites signer et suivez les commandes de vos clients.</p></div></div>
            <div class="clientsphere-heading-actions">
                {% if is_granted('SALES_ORDER_CREATE') %}<a class="capsule-button capsule-button--primary" href="{{ path('sales_order_new') }}"><i class="ti ti-plus"></i><span>Nouveau bon de commande</span></a>
                {% elseif not ordersEnabled %}<button class="capsule-button capsule-button--primary" type="button" disabled aria-describedby="orders-disabled"><i class="ti ti-plus"></i><span>Nouveau bon de commande</span></button>{% endif %}
            </div>
        </div>
        {% if not ordersEnabled %}<div class="alert alert-info" id="orders-disabled">La création de bons de commande est désactivée pour cette société. {% if is_granted('BILLING_SETTINGS_EDIT') %}<a href="{{ path('billing_settings') }}">Ouvrir les paramètres de facturation</a> et cocher « Activer les bons de commande ».{% else %}Un administrateur peut l’activer dans les paramètres de facturation.{% endif %}</div>
        {% elseif not is_granted('SALES_ORDER_CREATE') %}<div class="alert alert-info">Votre rôle ne permet pas de créer un bon de commande.</div>{% endif %}

        <section class="data-kpis" aria-label="Indicateurs des bons de commande affichés">
            {% for kpi in [
                {label: 'Bons affichés', value: visible_total, icon: 'ti ti-files', tone: 'indigo', trend: 'Sélection courante'},
                {label: 'Brouillons', value: draft_count, icon: 'ti ti-pencil', tone: 'red', trend: 'À finaliser'},
                {label: 'Envoyés', value: sent_count, icon: 'ti ti-send', tone: 'green', trend: 'En attente de confirmation'},
                {label: 'Confirmés', value: confirmed_count, icon: 'ti ti-circle-check-filled', tone: 'violet', trend: 'Commandes confirmées'}
            ] %}<article class="data-kpi data-kpi--{{ kpi.tone }}"><span class="data-kpi__icon"><i class="{{ kpi.icon }}"></i></span><div><span>{{ kpi.label }}</span><strong>{{ kpi.value }}</strong><small>{{ kpi.trend }}</small></div></article>{% endfor %}
        </section>

        <div class="clientsphere-grid"><div class="clientsphere-main">
            <form class="clientsphere-filter" method="get" action="{{ path('sales_order_index') }}">
                <label class="clientsphere-search"><i class="ti ti-search"></i><input type="search" name="q" value="{{ filters.q }}" placeholder="Numéro, référence, client, objet…" aria-label="Recherche"></label>
                <label class="clientsphere-select"><select name="status" aria-label="Statut"><option value="">Tous les statuts</option>{% for key,label in statuses %}<option value="{{ key }}" {{ filters.status == key ? 'selected' : '' }}>{{ label }}</option>{% endfor %}</select><i class="ti ti-chevron-down"></i></label>
                <label class="clientsphere-select"><select name="invoicing" aria-label="Facturation"><option value="">Toute facturation</option>{% for key,label in invoicingLabels %}<option value="{{ key }}" {{ filters.invoicing == key ? 'selected' : '' }}>{{ label }}</option>{% endfor %}</select><i class="ti ti-chevron-down"></i></label>
                <label class="clientsphere-select billing-index-client-select"><select name="customer" aria-label="Client ou prospect"><option value="">Tous les clients / prospects</option>{% for client in clients %}<option value="{{ client.idtoken }}" {{ filters.customer == client.idtoken ? 'selected' : '' }}>{{ client.nom }}</option>{% endfor %}</select><i class="ti ti-chevron-down"></i></label>
                <label class="clientsphere-select"><select name="responsible" aria-label="Responsable"><option value="">Tous les responsables</option>{% for user in responsibles %}<option value="{{ user.id }}" {{ filters.responsible == user.id ? 'selected' : '' }}>{{ user.prenom }} {{ user.nom }}</option>{% endfor %}</select><i class="ti ti-chevron-down"></i></label>
                <label class="billing-index-date"><span>Du</span><input type="date" name="from" value="{{ filters.from }}"></label>
                <label class="billing-index-date"><span>Au</span><input type="date" name="to" value="{{ filters.to }}"></label>
                <button class="clientsphere-btn clientsphere-btn-primary" type="submit"><i class="ti ti-filter-filled"></i><span>Filtrer</span></button>
                <a class="clientsphere-reset" href="{{ path('sales_order_index') }}">Réinitialiser</a>
                <p class="clientsphere-filter-note"><i class="ti ti-info-circle-filled"></i>Bons de commande de la société active. Les indicateurs portent sur les résultats des filtres.</p>
            </form>

            <div class="fu-data-table clientsphere-table-card">
                <div class="fu-data-table-toolbar clientsphere-table-toolbar"><span><strong data-commercial-client-table-target="visibleCount">{{ visible_total }}</strong> bon{{ visible_total > 1 ? 's' : '' }} de commande</span><div class="clientsphere-table-tools"><button type="button" data-action="commercial-client-table#sortByName"><i class="ti ti-arrows-sort"></i>Trier par numéro</button></div></div>
                <div class="fu-data-table-scroll"><table class="fu-data-table-table clientsphere-table billing-index-table">
                    <thead><tr><th>Document</th><th>Client</th><th>Date</th><th>Statut</th><th class="billing-index-align-right">Total TTC</th><th class="billing-index-align-right">Facturé / reste TTC</th><th>Facturation</th><th>Exécution / responsable</th><th>Actions</th></tr></thead>
                    <tbody>{% for row in rows %}{% set order = row.order %}
                        {% set status_tone = order.status == 'confirmed' ? 'success' : (order.status == 'sent' ? 'warning' : (order.status == 'validated' ? 'info' : (order.status in ['cancelled','closed'] ? 'muted' : 'draft'))) %}
                        {% set currency_label = order.currency == 'EUR' ? '€' : order.currency %}
                        <tr data-commercial-client-table-target="row" data-name="{{ (order.number ?: 'Brouillon')|lower }}">
                            <td><a class="clientsphere-client" href="{{ path('sales_order_show', {idtoken:order.idtoken}) }}"><span class="clientsphere-type-icon is-violet"><i class="ti ti-clipboard-list"></i></span><span class="billing-index-document-name"><strong>{{ order.number ?: 'Brouillon' }}</strong><small>{{ order.customerOrderReference ?: 'Sans référence' }}</small></span></a></td>
                            <td>{{ order.customerNameSnapshot }}</td>
                            <td><span class="clientsphere-mono">{{ order.issueDate|date('d/m/Y') }}</span></td>
                            <td><span class="clientsphere-status billing-index-status is-{{ status_tone }}"><i></i>{{ row.status }}</span></td>
                            <td class="billing-index-amount">{% if row.summary %}{{ row.summary.orderTotalTtc|number_format(2, ',', ' ') }} {{ currency_label }}{% else %}—{% endif %}</td>
                            <td class="billing-index-amount">{% if row.summary %}{{ row.summary.grossInvoicedTtc|number_format(2, ',', ' ') }} / {{ row.summary.remainingToInvoice|number_format(2, ',', ' ') }} {{ currency_label }}{% else %}—{% endif %}</td>
                            <td>{% if row.summary %}<span class="clientsphere-pill is-{{ row.summary.invoicingStatus == 'fully_invoiced' ? 'teal' : 'slate' }}">{{ invoicingLabels[row.summary.invoicingStatus] }}</span>{% if row.summary.draftInvoiceCount %}<br><small>Brouillon en préparation</small>{% endif %}{% else %}—{% endif %}</td>
                            <td><span class="clientsphere-mono">{{ order.expectedExecutionDate ? order.expectedExecutionDate|date('d/m/Y') : '—' }}</span><br><small>{{ order.responsibleUser ? order.responsibleUser.prenom ~ ' ' ~ order.responsibleUser.nom : '' }}</small></td>
                            <td><div class="d-flex gap-2"><a class="link" title="Consulter" aria-label="Consulter le bon" href="{{ path('sales_order_show', {idtoken:order.idtoken}) }}"><i class="ti ti-eye fs-5"></i></a>{% if is_granted('SALES_ORDER_EDIT_DRAFT', order) %}<a class="link" title="Modifier" aria-label="Modifier le bon" href="{{ path('sales_order_edit', {idtoken:order.idtoken}) }}"><i class="ti ti-edit fs-5"></i></a>{% endif %}</div></td>
                        </tr>
                    {% endfor %}<tr class="clientsphere-empty-row" data-commercial-client-table-target="empty" {{ rows|length ? 'hidden' : '' }}><td colspan="9">Aucun bon de commande ne correspond aux filtres.</td></tr></tbody>
                </table></div>
                <div class="clientsphere-table-footer"><span>Affichage de <strong data-commercial-client-table-target="range">{{ visible_total ? '1-' ~ visible_total : '0-0' }}</strong> sur <strong data-commercial-client-table-target="footerCount">{{ visible_total }}</strong> bons de commande</span><nav class="clientsphere-pagination" aria-label="Pagination des bons de commande" data-commercial-client-table-target="pagination"></nav><label class="clientsphere-page-size">Par page :<select data-commercial-client-table-target="pageSize" data-action="change->commercial-client-table#changePageSize">{% for size in [10,20,50,100] %}<option value="{{ size }}" {{ size == 20 ? 'selected' : '' }}>{{ size }}</option>{% endfor %}</select></label></div>
            </div>
        </div>
        <aside class="clientsphere-aside">
            <section class="clientsphere-side-card"><h2><i class="ti ti-bolt"></i>Actions rapides</h2>{% if is_granted('SALES_ORDER_CREATE') %}<a href="{{ path('sales_order_new') }}"><span class="clientsphere-type-icon is-blue"><i class="ti ti-file-plus"></i></span><strong>Créer un bon de commande</strong></a>{% endif %}{% if is_granted('BILLING_VIEW') %}<a href="{{ path('billing_quote_index') }}"><span class="clientsphere-type-icon is-violet"><i class="ti ti-file-description"></i></span><strong>Consulter les devis</strong></a><a href="{{ path('billing_invoice_index') }}"><span class="clientsphere-type-icon is-teal"><i class="ti ti-file-invoice"></i></span><strong>Consulter les factures</strong></a>{% endif %}</section>
            <section class="clientsphere-side-card clientsphere-distribution billing-index-overview"><h2><i class="ti ti-chart-pie-2"></i>Vue d’ensemble</h2><div class="billing-index-side-stat"><span>Brouillons</span><strong>{{ draft_count }}</strong></div><div class="billing-index-side-stat"><span>Confirmés</span><strong>{{ confirmed_count }}</strong></div><div class="billing-index-side-stat"><span>Clôturés</span><strong>{{ closed_count }}</strong></div></section>
            {% if is_granted('BILLING_SETTINGS_EDIT') %}<section class="clientsphere-tip"><h2><i class="ti ti-settings"></i>Facturation</h2><p>Configurez l’activation, la numérotation et les conditions des bons de commande.</p><a href="{{ path('billing_settings') }}">Ouvrir les paramètres <i class="ti ti-arrow-right"></i></a></section>{% endif %}
        </aside></div>
    </section>
{% endblock %}