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

{% block commercial_title %}Catégories de dépenses{% endblock %}

{% block commercial_content %}
<div class="expense-category-page" data-controller="expense-category" data-expense-category-reorder-url-value="{{ path('commercial_expense_category_reorder') }}" data-expense-category-reorder-token-value="{{ csrf_token('expense_category_reorder') }}">
    
    <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">Catégories de dépenses</h1>
            <p class="capsule-soustitre">Structurez les dépenses pour les analyses de rentabilité.</p>
        </div>
        <div class="d-flex flex-wrap gap-2 expense-index__actions">

            {% if is_granted('EXPENSE_CATEGORY_MANAGE', company) %}
                <button class="capsule-button capsule-button--secondary" type="button" data-action="expense-category#toggleReorder" data-expense-category-target="reorderButton"><i class="ti ti-arrows-sort"></i> Réordonner</button>
            {% endif %}
            
            <a class="capsule-button capsule-button--secondary" href="{{ path('commercial_expense_category_export', filters) }}" data-turbo="false"><i class="ti ti-download"></i> Exporter</a>
            
            {% if is_granted('EXPENSE_CATEGORY_MANAGE', company) %}
                <button class="capsule-button capsule-button--primary" type="button" data-action="expense-category#focusCreate"><i class="ti ti-plus"></i> Nouvelle catégorie</button>
            {% endif %}
        </div>
    </header>


    <section class="data-kpis" aria-label="Indicateurs des projets">
        <article class="data-kpi data-kpi--indigo">
            <span class="data-kpi__icon"><i class="ti ti-tags"></i></span>
            <div>
                <span>Catégories de dépenses</span>
                <strong>{{ view.kpis.total }}</strong>
            </div>
        </article>
        <article class="data-kpi data-kpi--green">
            <span class="data-kpi__icon"><i class="ti ti-circle-check"></i></span>
            <div>
                <span>Actives</span>
                <strong>{{ view.kpis.active }}</strong>
            </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>
            </div>
        </article>
        <article class="data-kpi data-kpi--violet">
            <span class="data-kpi__icon"><i class="ti ti-receipt"></i></span>
            <div>
                <span>Dépenses classées</span>
                <strong>{{ view.kpis.classified }}</strong>
            </div>
        </article>
    </section>


    <div class="expense-category-layout"><main class="expense-category-card">
        <header><div><h2>Toutes les catégories</h2><span>{{ view.rows|length }}</span></div><form method="get" id="expense-category-filters"><label><i class="ti ti-search"></i><input class="form-control" name="q" value="{{ filters.q }}" placeholder="Rechercher…"></label><select class="form-select" name="type" data-action="change->expense-category#submitFilters"><option value="">Tous les types</option><option value="supplier" {{ filters.type == 'supplier' ? 'selected' : '' }}>Fournisseur</option><option value="global" {{ filters.type == 'global' ? 'selected' : '' }}>Globale</option><option value="mileage" {{ filters.type == 'mileage' ? 'selected' : '' }}>Kilométrique</option></select><select class="form-select" name="status" data-action="change->expense-category#submitFilters"><option value="">Tous les statuts</option><option value="active" {{ filters.status == 'active' ? 'selected' : '' }}>Actives</option><option value="archived" {{ filters.status == 'archived' ? 'selected' : '' }}>Archivées</option></select></form></header>
        <div class="table-responsive"><table class="table align-middle mb-0 expense-category-table"><thead><tr><th></th><th>Catégorie</th><th>Code</th><th>Type</th><th>Dépenses</th><th>Montant total</th><th>Statut</th><th>Actions</th></tr></thead><tbody data-expense-category-target="tbody">
        {% for row in view.rows %}{% set category = row.category %}{% set type_label = category.categoryType == 'global' ? 'Globale' : (category.categoryType == 'mileage' ? 'Kilométrique' : 'Fournisseur') %}{% set type_icon = category.categoryType == 'global' ? 'ti-world' : (category.categoryType == 'mileage' ? 'ti-road' : 'ti-building') %}<tr class="{{ category.deleted ? 'is-archived' : '' }}" draggable="false" data-expense-category-target="row" data-idtoken="{{ category.idtoken }}" data-action="dragstart->expense-category#dragStart dragover->expense-category#dragOver drop->expense-category#drop dragend->expense-category#dragEnd"><td class="expense-category-drag"><i class="ti ti-grip-vertical"></i></td><td><div class="expense-category-name"><span style="--category-color:{{ category.color }}"><i class="ti {{ type_icon }}"></i></span><div><strong>{{ category.nom }}</strong><small>{{ category.description ?: 'Aucune description' }}</small></div></div></td><td><code>{{ category.code }}</code></td><td><span class="expense-category-type is-{{ category.categoryType }}"><i class="ti {{ type_icon }}"></i>{{ type_label }}</span></td><td><strong>{{ row.expense_count }}</strong> <small>dép.</small></td><td><strong>{{ row.amount|number_format(2, ',', ' ') }} €</strong></td><td><span class="expense-category-status {{ category.deleted ? 'is-archived' : '' }}"><i></i>{{ category.deleted ? 'Archivée' : 'Active' }}</span></td><td><div class="dropdown">{% if is_granted('EXPENSE_CATEGORY_MANAGE', company) %}<button class="btn btn-sm btn-link" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></button><div class="dropdown-menu dropdown-menu-end">{% if not category.deleted %}<button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#edit-category-{{ category.id }}"><i class="ti ti-pencil me-2"></i>Modifier</button><form method="post" action="{{ path('commercial_expense_category_archive', {idtoken:category.idtoken}) }}" data-action="submit->expense-category#confirmArchive"><input type="hidden" name="_token" value="{{ csrf_token('expense_category_archive_' ~ category.idtoken) }}"><button class="dropdown-item text-danger" {{ row.expense_count ? 'disabled' : '' }}><i class="ti ti-archive me-2"></i>Archiver</button></form>{% else %}<form method="post" action="{{ path('commercial_expense_category_restore', {idtoken:category.idtoken}) }}"><input type="hidden" name="_token" value="{{ csrf_token('expense_category_restore_' ~ category.idtoken) }}"><button class="dropdown-item text-success"><i class="ti ti-restore me-2"></i>Restaurer</button></form>{% endif %}</div>{% 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><span>{{ view.kpis.total }} catégorie{{ view.kpis.total > 1 ? 's' : '' }} — dont {{ view.kpis.archived }} archivée{{ view.kpis.archived > 1 ? 's' : '' }}</span><p>Montant total toutes catégories : <strong>{{ view.grand_total|number_format(2, ',', ' ') }} €</strong></p></footer>
    </main>

    {% if is_granted('EXPENSE_CATEGORY_MANAGE', company) %}<aside class="expense-category-create" data-expense-category-target="createCard"><header><span><i class="ti ti-plus"></i></span><h2>Nouvelle catégorie</h2></header><form method="post" action="{{ path('commercial_expense_category_new') }}"><input type="hidden" name="_token" value="{{ csrf_token('expense_category_create') }}"><div><label for="category_name">Nom <b>*</b></label><input id="category_name" class="form-control" name="category[name]" placeholder="Ex : Marketing" required data-expense-category-target="createName"></div><div><label for="category_code">Code <b>*</b></label><div class="expense-category-code"><i class="ti ti-hash"></i><input id="category_code" class="form-control text-uppercase font-monospace" name="category[code]" maxlength="4" placeholder="MKTG" required data-action="input->expense-category#formatCode"></div><small>4 caractères max, majuscules</small></div><div><label for="category_description">Description</label><input id="category_description" class="form-control" name="category[description]" placeholder="Courte description"></div><div><label for="category_type">Type <b>*</b></label><select id="category_type" class="form-select" name="category[type]" required><option value="supplier">Fournisseur</option><option value="global">Globale</option><option value="mileage">Kilométrique</option></select></div><div><label for="category_color">Couleur du badge</label><input id="category_color" class="form-control form-control-color" type="color" name="category[color]" value="#3b82f6"></div><button class="btn btn-primary w-100" type="submit"><i class="ti ti-plus"></i> Créer la catégorie</button></form></aside>{% endif %}
    </div>

    {% for row in view.rows %}{% set category = row.category %}{% if not category.deleted and is_granted('EXPENSE_CATEGORY_MANAGE', company) %}<div class="modal fade" id="edit-category-{{ category.id }}" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><form class="modal-content" method="post" action="{{ path('commercial_expense_category_edit', {idtoken:category.idtoken}) }}"><input type="hidden" name="_token" value="{{ csrf_token('expense_category_edit_' ~ category.idtoken) }}"><div class="modal-header"><h2 class="modal-title fs-5">Modifier la catégorie</h2><button class="btn-close" type="button" data-bs-dismiss="modal"></button></div><div class="modal-body row g-3"><div class="col-md-8"><label class="form-label">Nom</label><input class="form-control" name="category[name]" value="{{ category.nom }}" required></div><div class="col-md-4"><label class="form-label">Code</label><input class="form-control text-uppercase" name="category[code]" value="{{ category.code }}" maxlength="4" required data-action="input->expense-category#formatCode"></div><div class="col-12"><label class="form-label">Description</label><input class="form-control" name="category[description]" value="{{ category.description }}"></div><div class="col-md-8"><label class="form-label">Type</label><select class="form-select" name="category[type]"><option value="supplier" {{ category.categoryType == 'supplier' ? 'selected' : '' }}>Fournisseur</option><option value="global" {{ category.categoryType == 'global' ? 'selected' : '' }}>Globale</option><option value="mileage" {{ category.categoryType == 'mileage' ? 'selected' : '' }}>Kilométrique</option></select></div><div class="col-md-4"><label class="form-label">Couleur</label><input class="form-control form-control-color" type="color" name="category[color]" value="{{ category.color }}"></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">Enregistrer</button></div></form></div></div>{% endif %}{% endfor %}
    <div class="expense-category-toast" data-expense-category-target="toast"><i class="ti ti-check"></i>Ordre enregistré</div>
</div>
{% endblock %}