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

{% block commercial_title %}Indemnités kilométriques{% endblock %}

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

{% block commercial_content %}
{% set month_names = {1: 'jan.', 2: 'févr.', 3: 'mars', 4: 'avr.', 5: 'mai', 6: 'juin', 7: 'juil.', 8: 'août', 9: 'sept.', 10: 'oct.', 11: 'nov.', 12: 'déc.'} %}
<div class="mileage-index-page" data-controller="mileage-index" data-mileage-index-export-url-value="{{ path('commercial_mileage_export') }}">
    <header class="mileage-page-heading">
        <div class="d-flex align-items-center gap-3">
            <div>
                <h1 class="capsule-titre">Indemnités kilométriques</h1>
                <p class="capsule-sous-titre">Suivez les déplacements, remboursements kilométriques et leur impact sur les projets.</p>
            </div>
        </div>
        <div class="mileage-heading-actions">
            <a class="capsule-button capsule-button--secondary" href="{{ path('app_settings') }}"><i class="ti ti-adjustments-horizontal"></i>Paramètres taux km</a>
            <a class="capsule-button capsule-button--secondary" href="{{ path('commercial_mileage_export', filters) }}" data-turbo="false"><i class="ti ti-download"></i>Exporter</a>
            <a class="capsule-button capsule-button--primary" href="{{ path('commercial_mileage_new') }}"><i class="ti ti-plus"></i>Nouvelle indemnité km</a>
        </div>
    </header>

    <section class="data-kpis-5" aria-label="Indicateurs des dépenses">
        <article class="data-kpi data-kpi--indigo">
            <span class="data-kpi__icon"><i class="ti ti-road"></i></span>
            <div>
                <span>Km sur la sélection</span>
                <strong>{{ kpis.kilometers|number_format(0, ',', ' ') }} km</strong>
                <small><i class="ti ti-trending-up"></i>{{ kpis.count }} indemnité{{ kpis.count > 1 ? 's' : '' }}</small>
            </div>
        </article>

        <article class="data-kpi data-kpi--yellow">
            <span class="data-kpi__icon"><i class="ti ti-currency-euro"></i></span>
            <div>
                <span>À rembourser</span>
                <strong>{{ kpis.reimbursable|number_format(2, ',', ' ') }} €</strong>
                <small>Montant total validé</small>
            </div>
        </article>

        <article class="data-kpi data-kpi--orange">
            <span class="data-kpi__icon"><i class="ti ti-clock-filled"></i></span>
            <div>
                <span>À valider</span>
                <strong>{{ kpis.submitted }}</strong>
                <small><i class="ti ti-alert-triangle-filled"></i>En attente de validation</small>
            </div>
        </article>

        <article class="data-kpi data-kpi--violet">
            <span class="data-kpi__icon"><i class="ti ti-folder"></i></span>
            <div>
                <span>Liées à un projet</span>
                <strong>{{ kpis.linked }}</strong>
                <small><i class="ti ti-trending-up"></i>Sur {{ kpis.count }} indemnité{{ kpis.count > 1 ? 's' : '' }}</small>
            </div>
        </article>

        <article class="data-kpi data-kpi--gray">
            <span class="data-kpi__icon"><i class="ti ti-building"></i></span>
            <div>
                <span>Générales société</span>
                <strong>{{ kpis.unlinked }}</strong>
                <small>Sans projet associé</small>
            </div>
        </article>
            
    </section>
        
    <div class="mileage-content-layout">
        <main>
            <form class="mileage-filter-card" method="get">
                <div class="mileage-filter-grid">
                    <div class="mileage-search"><i class="ti ti-search"></i><input class="form-control" name="q" value="{{ filters.q }}" placeholder="Rechercher par employé, adresse, projet…"></div>
                    <div class="mileage-date"><i class="ti ti-calendar"></i><input class="form-control" type="date" name="dateFrom" value="{{ filters.dateFrom }}" aria-label="Date de début"></div>
                    <div class="mileage-date"><i class="ti ti-calendar"></i><input class="form-control" type="date" name="dateTo" value="{{ filters.dateTo }}" aria-label="Date de fin"></div>
                    <select class="form-select" name="employee"><option value="">Employé</option>{% for employee in employees %}<option value="{{ employee.id }}" {{ filters.employee == employee.id ? 'selected' : '' }}>{{ employee.prenom }} {{ employee.nom }}</option>{% endfor %}</select>
                    <select class="form-select" name="project"><option value="">Projet</option>{% for project in projects %}<option value="{{ project.id }}" {{ filters.project == project.id ? 'selected' : '' }}>{{ project.titre }}</option>{% endfor %}</select>
                    <select class="form-select" name="status"><option value="">Statut</option>{% for value, label in statuses %}<option value="{{ value }}" {{ filters.status == value ? 'selected' : '' }}>{{ label }}</option>{% endfor %}</select>
                    <button class="btn btn-primary" type="submit"><i class="ti ti-filter-filled"></i>Filtrer</button>
                    <a href="{{ path('commercial_mileage_index') }}">Réinitialiser</a>
                </div>
            </form>

            <form class="mileage-table-card" method="post" action="{{ path('commercial_mileage_bulk_validate') }}" data-mileage-index-target="form">
                <input type="hidden" name="_token" value="{{ csrf_token('mileage_bulk_validate') }}">
                <div class="mileage-table-toolbar">
                    <div><strong>{{ mileage_expenses|length }} indemnité{{ mileage_expenses|length > 1 ? 's' : '' }}</strong><span>— résultats filtrés</span></div>
                    <div>
                        {% if is_granted('MILEAGE_VALIDATE', company) %}<button class="btn btn-outline-secondary" type="button" data-action="mileage-index#validateAll"><i class="ti ti-check"></i>Tout valider</button>{% endif %}
                        <button class="btn btn-outline-secondary" type="button" data-action="mileage-index#exportSelection"><i class="ti ti-file-export"></i>Export sélection</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table mileage-table align-middle mb-0">
                        <thead><tr><th><input class="form-check-input" type="checkbox" data-mileage-index-target="master" data-action="change->mileage-index#toggleAll"></th><th>Date</th><th>Employé</th><th>Adresse / trajet</th><th>Km</th><th>Taux</th><th>Montant</th><th>Projet</th><th>Statut</th><th>Actions</th></tr></thead>
                        <tbody>
                        {% for mileage in mileage_expenses %}
                            {% set employee_name = ((mileage.employee.prenom|default('') ~ ' ' ~ mileage.employee.nom|default(''))|trim) %}
                            {% set tone = mileage.status in ['validated'] ? 'success' : (mileage.status in ['paid', 'reimbursed'] ? 'info' : (mileage.status == 'submitted' ? 'warning' : (mileage.status in ['rejected', 'cancelled'] ? 'danger' : 'muted'))) %}
                            <tr>
                                <td><input class="form-check-input" type="checkbox" name="ids[]" value="{{ mileage.idtoken }}" data-mileage-index-target="item" data-validatable="{{ mileage.status == 'submitted' ? 'true' : 'false' }}" data-action="change->mileage-index#updateSelection"></td>
                                <td><strong>{{ mileage.tripDate|date('d') }} {{ month_names[mileage.tripDate|date('n')] }} {{ mileage.tripDate|date('Y') }}</strong></td>
                                <td><div class="mileage-employee"><span><img src="{{ user_avatar_url(mileage.employee) }}" alt=""></span><div><strong>{{ employee_name }}</strong><small>{{ mileage.employee.fonction|default('Collaborateur') }}</small></div></div></td>
                                <td><div class="mileage-trip"><i class="ti ti-map-pin-filled"></i><div><strong>{{ mileage.departure ?: mileage.purpose }}</strong>{% if mileage.arrival %}<strong>→ {{ mileage.arrival }}</strong>{% endif %}<small>{{ mileage.comment ?: mileage.purpose }}</small></div></div></td>
                                <td><strong>{{ mileage.reimbursableKilometers|number_format(0, ',', ' ') }} km</strong></td>
                                <td>{{ mileage.ratePerKm|number_format(3, ',', ' ') }} €/km</td>
                                <td><strong>{{ mileage.amount|number_format(2, ',', ' ') }} €</strong></td>
                                <td>{% if mileage.project %}<span class="mileage-project"><i class="ti ti-folder-filled"></i>{{ mileage.project.titre }}</span>{% else %}<span class="mileage-project is-general"><i class="ti ti-building"></i>Sans projet</span>{% endif %}</td>
                                <td><span class="mileage-status is-{{ tone }}"><i></i>{{ statuses[mileage.status]|default(mileage.status) }}</span></td>
                                <td><a class="link" href="{{ path('commercial_mileage_show', {idtoken: mileage.idtoken}) }}" title="Voir l’indemnité"><i class="ti ti-eye"></i></a></td>
                            </tr>
                        {% else %}
                            <tr><td colspan="10" class="text-center text-muted py-5">Aucune indemnité ne correspond aux filtres.</td></tr>
                        {% endfor %}
                        </tbody>
                        <tfoot><tr><th colspan="4">TOTAUX ({{ mileage_expenses|length }} LIGNES)</th><th>{{ kpis.kilometers|number_format(0, ',', ' ') }} km</th><th>—</th><th>{{ kpis.reimbursable|number_format(2, ',', ' ') }} €</th><th colspan="3"><span class="mileage-project"><i class="ti ti-folder-filled"></i>{{ kpis.linked }} avec projet</span> <span class="mileage-project is-general">{{ kpis.unlinked }} sans projet</span></th></tr></tfoot>
                    </table>
                </div>
                <div class="mileage-table-footer">Affichage de <strong>{{ mileage_expenses|length ? 1 : 0 }}–{{ mileage_expenses|length }}</strong> sur <strong>{{ mileage_expenses|length }}</strong> résultats</div>
            </form>
        </main>

        <aside class="mileage-rules-card">
            <div><span><i class="ti ti-help-circle"></i></span><h2>Règles</h2></div>
            <ul>
                <li><i class="ti ti-info-circle"></i><p>Le projet est facultatif. Une indemnité peut être générale société.</p></li>
                <li><i class="ti ti-chart-line"></i><p>Une indemnité liée à un projet impacte sa rentabilité et ses dépenses.</p></li>
                <li><i class="ti ti-check"></i><p>Les indemnités validées sont intégrées aux dépenses projet automatiquement.</p></li>
            </ul>
        </aside>
    </div>
</div>
{% endblock %}