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

{% block commercial_title %}Dépenses fournisseurs{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block commercial_content %}
    <div class="expense-index" data-controller="expense-index">
        <header class="d-flex flex-column flex-xl-row align-items-xl-start justify-content-between gap-3 mb-4">
            <div>
                <h1 class="capsule-titre">Dépenses fournisseurs</h1>
                <p class="capsule-soustitre">Suivez les coûts externes et leur ventilation sur les projets.</p>
            </div>
            <div class="d-flex flex-wrap gap-2 expense-index__actions">
                <a class="capsule-button capsule-button--light" href="{{ path('commercial_expense_category_index') }}">
                    <i class="ti ti-tags me-1"></i> Catégories
                </a>
                <a class="capsule-button capsule-button--light" href="{{ path('commercial_expense_export', app.request.query.all) }}" data-turbo="false">
                    <i class="ti ti-download me-1"></i> Exporter
                </a>
                <button class="capsule-button capsule-button--light" type="button" disabled title="Import CSV bientôt disponible">
                    <i class="ti ti-upload me-1"></i> Importer
                </button>
                <a class="capsule-button capsule-button--primary" href="{{ path('commercial_expense_new') }}">
                    <i class="ti ti-plus me-1"></i> Nouvelle dépense
                </a>
            </div>
        </header>

        <section class="data-kpis-5" aria-label="Indicateurs des dépenses">
            {% set cards = [
                {label: 'Total période', value: kpis.total|number_format(2, ',', ' ') ~ ' €', detail: kpis.count ~ ' dépense' ~ (kpis.count > 1 ? 's' : ''), icon: 'ti-receipt', tone: 'indigo'},
                {label: 'Validées', value: kpis.completedTotal|number_format(2, ',', ' ') ~ ' €', detail: kpis.completedCount ~ ' validée' ~ (kpis.completedCount > 1 ? 's' : ''), icon: 'ti-check', tone: 'green'},
                {label: 'Non ventilées', value: kpis.unallocatedTotal|number_format(2, ',', ' ') ~ ' €', detail: kpis.unallocatedCount ~ ' dépense' ~ (kpis.unallocatedCount > 1 ? 's' : ''), icon: 'ti-refresh-alert', tone: 'violet'},
                {label: 'Sans justificatif', value: kpis.withoutAttachmentCount ~ ' dépense' ~ (kpis.withoutAttachmentCount > 1 ? 's' : ''), detail: 'À régulariser', icon: 'ti-alert-triangle', tone: 'orange'},
                {label: 'À traiter', value: kpis.pendingTotal|number_format(2, ',', ' ') ~ ' €', detail: kpis.pendingCount ~ ' en attente', icon: 'ti-clock-filled', tone: 'red'}
            ] %}
            {% for card in cards %}
                    <article class="data-kpi data-kpi--{{ card.tone }}">
                        <span class="data-kpi__icon"><i class="ti {{ card.icon }}"></i></span>
                        <div>
                            <span>{{ card.label }}</span>
                            <strong>{{ card.value }}</strong>
                            <small>{{ card.detail }}</small>
                        </div>
                    </article>

                
            {% endfor %}
        </section>

        <nav class="expense-period-navigation mb-3" aria-label="Navigation par mois">
            <a href="{{ path('commercial_expense_index', navigation_query|merge({month: filters.previousMonth})) }}" aria-label="Mois précédent">
                <i class="ti ti-chevron-left"></i><span>Mois précédent</span>
            </a>
            <strong><i class="ti ti-calendar-month"></i>{{ filters.periodLabel }}</strong>
            <a href="{{ path('commercial_expense_index', navigation_query|merge({month: filters.nextMonth})) }}" aria-label="Mois suivant">
                <span>Mois suivant</span><i class="ti ti-chevron-right"></i>
            </a>
        </nav>

        <form method="get" action="{{ path('commercial_expense_index') }}" class="card expense-filters border-0 shadow-sm mb-4">
            <div class="card-body p-3">
                <div class="row g-2 align-items-center">
                    <div class="col-12 col-xl-3">
                        <div class="input-group">
                            <span class="input-group-text bg-white border-end-0"><i class="ti ti-search text-muted"></i></span>
                            <input class="form-control border-start-0 ps-0" type="search" name="q" value="{{ filters.q }}" placeholder="Rechercher fournisseur, libellé…">
                        </div>
                    </div>
                    <div class="col-6 col-md-3 col-xl-auto expense-filter-date">
                        <div class="input-group"><span class="input-group-text">Du</span><input class="form-control" type="date" name="dateFrom" value="{{ filters.dateFrom }}"></div>
                    </div>
                    <div class="col-6 col-md-3 col-xl-auto expense-filter-date">
                        <div class="input-group"><span class="input-group-text">Au</span><input class="form-control" type="date" name="dateTo" value="{{ filters.dateTo }}"></div>
                    </div>
                    <div class="col-6 col-md-3 col-xl">
                        <select class="form-select" name="supplier" aria-label="Fournisseur">
                            <option value="">Fournisseur</option>
                            {% for supplier in suppliers %}<option value="{{ supplier.id }}" {{ filters.supplier == supplier.id ? 'selected' : '' }}>{{ supplier.nom }}</option>{% endfor %}
                        </select>
                    </div>
                    <div class="col-6 col-md-3 col-xl">
                        <select class="form-select" name="category" aria-label="Catégorie">
                            <option value="">Catégorie</option>
                            {% for category in categories %}<option value="{{ category.id }}" {{ filters.category == category.id ? 'selected' : '' }}>{{ category.nom }}</option>{% endfor %}
                        </select>
                    </div>
                    <div class="col-6 col-md-3 col-xl">
                        <select class="form-select" name="project" aria-label="Projet">
                            <option value="">Projet</option>
                            {% for project in projects %}<option value="{{ project.id }}" {{ filters.project == project.id ? 'selected' : '' }}>{{ project.titre }}</option>{% endfor %}
                        </select>
                    </div>
                    <div class="col-6 col-md-3 col-xl">
                        <select class="form-select" name="status" aria-label="État">
                            <option value="">État</option>
                            <option value="completed" {{ filters.status == 'completed' ? 'selected' : '' }}>Validée</option>
                            <option value="pending" {{ filters.status == 'pending' ? 'selected' : '' }}>Brouillon</option>
                            <option value="allocated" {{ filters.status == 'allocated' ? 'selected' : '' }}>Ventilée</option>
                            <option value="unallocated" {{ filters.status == 'unallocated' ? 'selected' : '' }}>Non ventilée</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-3 col-xl">
                        <select class="form-select" name="attachment" aria-label="Justificatif">
                            <option value="">Justificatif</option>
                            <option value="with" {{ filters.attachment == 'with' ? 'selected' : '' }}>Avec justificatif</option>
                            <option value="without" {{ filters.attachment == 'without' ? 'selected' : '' }}>Sans justificatif</option>
                        </select>
                    </div>
                    <div class="col-auto">
                        <button class="btn btn-primary" type="submit"><i class="ti ti-adjustments-horizontal me-1"></i> Filtrer</button>
                    </div>
                    <div class="col-auto"><a class="btn btn-link text-decoration-none px-1" href="{{ path('commercial_expense_index') }}">Réinitialiser</a></div>
                </div>
            </div>
        </form>

        <div class="card expense-table-card border-0 shadow-sm">
            <div class="expense-selection d-none align-items-center justify-content-between" data-expense-index-target="selectionBar">
                <strong><span data-expense-index-target="selectionCount">0</span> dépense(s) sélectionnée(s)</strong>
                <button class="btn btn-sm btn-light" type="button" data-action="expense-index#clearSelection">Annuler la sélection</button>
            </div>
            <div class="table-responsive">
                <table class="table expense-table align-middle mb-0">
                    <thead>
                        <tr>
                            <th class="expense-table__check"><input class="form-check-input" type="checkbox" aria-label="Tout sélectionner" data-expense-index-target="master" data-action="expense-index#toggleAll"></th>
                            <th>Date</th><th>Fournisseur</th><th>Libellé</th><th>Catégorie</th>
                            <th class="text-end">Montant HT</th><th>TVA</th><th class="text-end">Total TTC</th>
                            <th>Ventilation projets</th><th>État</th><th class="text-center">Justif.</th><th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for expense in expenses %}
                        {% set supplier_name = expense.fournisseur.nom|default('Sans fournisseur') %}
                        {% set category_name = expense.categorie.nom|default('Sans catégorie') %}
                        {% set has_attachment = expense.relativePath or expense.document %}
                        {% set allocation_status = expense.allocationStatus %}
                        {% set is_paid = expense.status == 'paid' %}
                        {% set is_complete = expense.status in ['validated', 'paid'] %}
                        {% set vat_rate = expense.montanHt ? (expense.montantTaxe / expense.montanHt * 100) : 0 %}
                        {% set tone_index = expense.fournisseur ? expense.fournisseur.id % 6 : 0 %}
                        <tr class="{{ is_complete ? '' : 'is-pending' }}">
                            <td class="expense-table__check"><input class="form-check-input" type="checkbox" value="{{ expense.idtoken }}" aria-label="Sélectionner {{ expense.numeroDocument }}" data-expense-index-target="item" data-action="expense-index#updateSelection"></td>
                            <td>
                                <strong class="expense-table__date">{{ expense.dateDepense ? expense.dateDepense|date('d/m/Y') : '—' }}</strong>
                                <small>#DEP-{{ expense.id }}</small>
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="expense-supplier-avatar is-{{ tone_index }}">{{ supplier_name|slice(0, 2)|upper }}</span>
                                    <strong>{{ supplier_name }}</strong>
                                </div>
                            </td>
                            <td><strong>{{ expense.numeroDocument ?: 'Dépense sans libellé' }}</strong><small>{{ expense.originalFilename ?: 'Saisie manuelle' }}</small></td>
                            <td><span class="expense-category"><i class="ti ti-tag"></i>{{ category_name }}</span></td>
                            <td class="text-end expense-amount">{{ expense.montanHt|number_format(2, ',', ' ') }} €</td>
                            <td><span class="expense-vat">{{ vat_rate|number_format(0, ',', ' ') }} % ·<br>{{ expense.montantTaxe|number_format(2, ',', ' ') }} €</span></td>
                            <td class="text-end expense-total">{{ expense.montantTTC|number_format(2, ',', ' ') }} €</td>
                            <td>
                                {% if allocation_status == 'fully_allocated' %}
                                    <span class="expense-pill is-success"><i class="ti ti-circle-check-filled"></i> Ventilée</span>
                                {% elseif allocation_status == 'partially_allocated' %}
                                    <span class="expense-pill is-warning"><i class="ti ti-chart-pie-filled"></i> Partielle</span>
                                {% elseif allocation_status == 'over_allocated' %}
                                    <span class="expense-pill is-danger"><i class="ti ti-alert-circle-filled"></i> Dépassement</span>
                                {% else %}
                                    <span class="expense-pill is-warning"><i class="ti ti-alert-triangle-filled"></i> Non ventilée</span>
                                {% endif %}
                                {% for allocation in expense.projectAllocations %}
                                    <small class="expense-allocation">{{ allocation.project.titre|default('Projet') }} <strong>{{ allocation.allocatedPercent ? allocation.allocatedPercent|number_format(0, ',', ' ') ~ ' %' : allocation.allocatedAmount|number_format(2, ',', ' ') ~ ' €' }}</strong></small>
                                {% else %}
                                    {% if expense.projet %}<small class="expense-allocation">{{ expense.projet.titre }}</small>{% endif %}
                                {% endfor %}
                            </td>
                            <td><span class="expense-pill {{ is_complete ? 'is-success' : 'is-warning' }}"><i></i>{{ is_paid ? 'Payée' : (is_complete ? 'Validée' : 'Brouillon') }}</span></td>
                            <td class="text-center">
                                <a class="expense-attachment {{ has_attachment ? 'has-file' : 'is-missing' }}" href="{{ has_attachment and expense.relativePath ? path('commercial_expense_receipt', {idtoken: expense.idtoken}) : path('commercial_expense_show', {idtoken: expense.idtoken}) }}" {% if has_attachment and expense.relativePath %}target="_blank" data-turbo="false"{% endif %} title="{{ has_attachment ? 'Voir le justificatif' : 'Ajouter un justificatif' }}">
                                    <i class="ti {{ has_attachment ? 'ti-paperclip' : 'ti-file-alert' }}"></i>
                                </a>
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-1 flex-nowrap">
                                    <a class="link" href="{{ path('commercial_expense_show', {idtoken: expense.idtoken}) }}"><i class="ti ti-eye fs-5"></i></a>
                                    {% if is_granted('EXPENSE_EDIT', expense) %}<a class="link" href="{{ path('commercial_expense_edit', {idtoken: expense.idtoken}) }}"><i class="ti ti-edit fs-5"></i></a>{% endif %}
                                    <div class="dropdown">
                                        <button class="link" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Plus d’actions"><i class="ti ti-dots-vertical"></i></button>
                                        <div class="dropdown-menu dropdown-menu-end shadow-sm">
                                            <a class="dropdown-item" href="{{ path('commercial_expense_show', {idtoken: expense.idtoken}) }}"><i class="ti ti-chart-pie me-2"></i>Voir la ventilation</a>
                                            {% if is_granted('EXPENSE_EDIT', expense) %}<a class="dropdown-item" href="{{ path('commercial_expense_edit', {idtoken: expense.idtoken}) }}"><i class="ti ti-pencil me-2"></i>Modifier</a>{% endif %}
                                            {% if is_granted('EXPENSE_DELETE_DRAFT', expense) %}
                                                <div class="dropdown-divider"></div>
                                                <form method="post" action="{{ path('commercial_expense_archive', {idtoken: expense.idtoken}) }}" onsubmit="return confirm('Archiver cette dépense ?')">
                                                    <input type="hidden" name="_token" value="{{ csrf_token('expense_archive_' ~ expense.idtoken) }}">
                                                    <button class="dropdown-item text-danger" type="submit"><i class="ti ti-archive me-2"></i>Archiver</button>
                                                </form>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="12" class="text-center text-muted py-5"><i class="ti ti-receipt-off fs-7 d-block mb-2"></i>Aucune dépense ne correspond aux filtres.</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="expense-period-summary d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-2">
                <span>Période : <strong>{{ filters.periodLabel }}</strong></span>
                <span>Total des dépenses : <strong>{{ period_total|number_format(2, ',', ' ') }} €</strong></span>
            </div>
            <footer class="expense-table-footer d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-2">
                <span><strong>{{ expenses|length }}</strong> dépense{{ expenses|length > 1 ? 's' : '' }} affichée{{ expenses|length > 1 ? 's' : '' }}</span>
                <span>{{ filters.dateFrom|date('d/m/Y') }} — {{ filters.dateTo|date('d/m/Y') }}</span>
            </footer>
        </div>
    </div>
{% endblock %}