{% extends 'app/base.html.twig' %}

{% block title %}Charges fixes{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 fw-bold page-title mb-0"><i class="fas fa-file-invoice-dollar me-2"></i>Charges fixes mensuelles</h1>
        <small class="text-muted">Suivi des charges de fonctionnement par année</small>
    </div>
    <a href="{{ path('tenant_charges_new') }}" class="btn btn-primary">
        <i class="fas fa-plus me-1"></i>Ajouter
    </a>
    <a href="{{ path('tenant_charges_new_annuelle', {annee: annee}) }}" class="btn btn-outline-primary">
        <i class="fas fa-calendar-alt me-1"></i>Ajouter pour l'année
    </a>
</div>

{# ── Sélecteur d'année ─────────────────────────────────────────────────────── #}
<form method="get" class="card border-0 shadow-sm rounded-3 mb-4">
    <div class="card-body py-2 px-3 d-flex gap-3 align-items-center">
        <label class="form-label fw-semibold mb-0">Année :</label>
        <select name="annee" class="form-select" style="width:120px" onchange="this.form.submit()">
            {% for a in annees %}
                <option value="{{ a }}" {{ a == annee ? 'selected' : '' }}>{{ a }}</option>
            {% endfor %}
            {# Permettre l'année courante même sans données #}
            {% if annee not in annees %}
                <option value="{{ annee }}" selected>{{ annee }}</option>
            {% endif %}
        </select>
    </div>
</form>

{# ── KPIs par type ─────────────────────────────────────────────────────────── #}
{% if totalParType is not empty %}
<div class="row g-3 mb-4">
    {% set couleurs = {'salaires': 'primary', 'electricite': 'warning', 'eau_gaz': 'info', 'loyer': 'secondary', 'maintenance': 'danger', 'diverses': 'dark'} %}
    {% for t in totalParType %}
    <div class="col-sm-6 col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-body py-3">
                <div class="small text-muted text-capitalize">{{ t.type_charge|replace({'_': ' '}) }}</div>
                <div class="fw-bold fs-5">{{ t.total|number_format(2, ',', ' ') }} €</div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

{# ── Tableau ───────────────────────────────────────────────────────────────── #}
<div class="card border-0 shadow-sm rounded-3">
    <div class="card-body p-0">
        {% if charges is empty %}
            <div class="text-center py-5 text-muted">
                <i class="fas fa-file-invoice-dollar fa-2x mb-3 d-block"></i>
                Aucune charge enregistrée pour {{ annee }}
            </div>
        {% else %}
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Mois</th>
                            <th>Type de charge</th>
                            <th class="text-end">Montant (€)</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% set moisNoms = {1:'Janvier',2:'Février',3:'Mars',4:'Avril',5:'Mai',6:'Juin',7:'Juillet',8:'Août',9:'Septembre',10:'Octobre',11:'Novembre',12:'Décembre'} %}
                        {% for charge in charges %}
                        <tr>
                            <td>{{ moisNoms[charge.mois] }}</td>
                            <td class="text-capitalize">{{ charge.type_charge|replace({'_': ' '}) }}</td>
                            <td class="text-end fw-semibold">{{ charge.montant|number_format(2, ',', ' ') }} €</td>
                            <td class="text-end">
                                <a href="{{ path('tenant_charges_edit', {id: charge.id}) }}"
                                   class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i></a>
                                <form method="post" action="{{ path('tenant_charges_delete', {id: charge.id}) }}" class="d-inline"
                                      onsubmit="return confirm('Supprimer cette charge ?')">
                                    <input type="hidden" name="_token" value="{{ csrf_token('charge_delete_' ~ charge.id) }}">
                                    <button class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot class="table-light fw-bold">
                        {% set total = 0 %}
                        {% for c in charges %}{% set total = total + c.montant %}{% endfor %}
                        <tr>
                            <td colspan="2">Total {{ annee }}</td>
                            <td class="text-end">
                                {{ total|number_format(2, ',', ' ') }} €
                            </td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}