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

{% block title %}Dépenses | SALSABIL Madrassas{% endblock %}

{% block content %}
    {% set modeLabels = {
        'ESPECES': 'Espèces',
        'ORANGE_MONEY': 'Orange Money',
        'MTN_MOMO': 'MTN MoMo',
        'MOBILE_MONEY': 'Mobile Money',
        'VIREMENT': 'Virement',
        'AUTRE': 'Autre'
    } %}
    <style>
        .expense-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
        .expense-actions{display:flex;gap:.75rem;flex-wrap:wrap}
        .expense-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem;align-items:end}
        .expense-filters label{display:block;font-size:.75rem;text-transform:uppercase;color:#64748b;margin-bottom:.3rem}
        .expense-filters input,.expense-filters select{width:100%;border:1px solid rgba(15,92,69,.16);border-radius:12px;padding:.72rem .85rem;background:#fff}
        .expense-table{width:100%;border-collapse:separate;border-spacing:0 .55rem}
        .expense-table th{font-size:.72rem;text-transform:uppercase;color:#64748b;text-align:left;padding:.35rem .75rem}
        .expense-table td{background:#fff;padding:.8rem .75rem;border-top:1px solid rgba(15,92,69,.1);border-bottom:1px solid rgba(15,92,69,.1);vertical-align:middle}
        .expense-table td:first-child{border-left:1px solid rgba(15,92,69,.1);border-radius:12px 0 0 12px}
        .expense-table td:last-child{border-right:1px solid rgba(15,92,69,.1);border-radius:0 12px 12px 0;text-align:right}
        .expense-amount{font-weight:800;color:#9f1239;white-space:nowrap}
    </style>
    <div class="admin-page-stack">
        <section class="admin-page-header">
            <div>
                <p class="admin-eyebrow">DÉPENSES</p>
                <h1 class="admin-page-title">Sorties de caisse</h1>
                <p>Suivi des dépenses et sorties enregistrées pour {{ ecole.nom }}.</p>
            </div>
            <div class="expense-actions">
                <a class="admin-btn admin-btn-light" href="{{ path('school_finance_index') }}">Finances</a>
                <a class="admin-btn admin-btn-light" href="{{ path('school_depense_category_index') }}">Catégories</a>
                <a class="admin-btn admin-btn-primary" href="{{ path('school_depense_new') }}">Nouvelle dépense</a>
            </div>
        </section>

        <section class="expense-grid">
            {% include 'components/admin/stat_card.html.twig' with {icon: 'south_west', label: 'Total dépenses', value: stats.totalDepenses|number_format(0, ',', ' ') ~ ' FCFA', trend: 'Dépenses validées', meta: '', accent: 'gold'} only %}
            {% include 'components/admin/stat_card.html.twig' with {icon: 'calendar_month', label: 'Ce mois', value: stats.depensesMois|number_format(0, ',', ' ') ~ ' FCFA', trend: 'Sorties du mois', meta: '', accent: 'info'} only %}
            {% include 'components/admin/stat_card.html.twig' with {icon: 'receipt_long', label: 'Dépenses', value: stats.nombreDepenses, trend: 'Toutes situations', meta: '', accent: 'emerald'} only %}
            {% include 'components/admin/stat_card.html.twig' with {icon: 'block', label: 'Annulées', value: stats.annulees, trend: 'Conservées en historique', meta: '', accent: 'neutral'} only %}
        </section>

        <section class="admin-card">
            <form class="expense-filters" method="get">
                <div>
                    <label for="q">Recherche</label>
                    <input id="q" name="q" value="{{ filters.q }}" placeholder="Bénéficiaire, référence, description">
                </div>
                <div>
                    <label for="categorie">Catégorie</label>
                    <select id="categorie" name="categorie">
                        <option value="">Toutes</option>
                        {% for categorie in categories %}
                            <option value="{{ categorie.id }}" {{ filters.categorieId == categorie.id ? 'selected' : '' }}>{{ categorie.libelle }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="annee">Année</label>
                    <select id="annee" name="annee">
                        <option value="">Toutes</option>
                        {% for annee in annees %}
                            <option value="{{ annee.id }}" {{ filters.anneeId == annee.id ? 'selected' : '' }}>{{ annee.libelle }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="statut">Statut</label>
                    <select id="statut" name="statut">
                        <option value="">Tous</option>
                        <option value="VALIDEE" {{ filters.statut == 'VALIDEE' ? 'selected' : '' }}>Validée</option>
                        <option value="ANNULEE" {{ filters.statut == 'ANNULEE' ? 'selected' : '' }}>Annulée</option>
                    </select>
                </div>
                <div>
                    <label for="dateFrom">Du</label>
                    <input id="dateFrom" type="date" name="dateFrom" value="{{ filters.dateFromRaw }}">
                </div>
                <div>
                    <label for="dateTo">Au</label>
                    <input id="dateTo" type="date" name="dateTo" value="{{ filters.dateToRaw }}">
                </div>
                <div class="expense-actions">
                    <button class="admin-btn admin-btn-primary" type="submit">Filtrer</button>
                    <a class="admin-btn admin-btn-light" href="{{ path('school_depense_index') }}">Réinitialiser</a>
                </div>
            </form>
        </section>

        <section class="admin-card">
            <div class="admin-card-head"><div><h2>Liste des dépenses</h2><p>Les annulations créent un mouvement inverse pour préserver l’historique de caisse.</p></div></div>
            <table class="expense-table">
                <thead><tr><th>Date</th><th>Catégorie</th><th>Bénéficiaire</th><th>Montant</th><th>Mode</th><th>Année</th><th>Statut</th><th></th></tr></thead>
                <tbody>
                {% for depense in depenses %}
                    <tr>
                        <td>{{ depense.dateDepense ? depense.dateDepense|date('d/m/Y') : '-' }}</td>
                        <td><strong>{{ depense.categorie ? depense.categorie.libelle : '-' }}</strong></td>
                        <td>{{ depense.beneficiaire ?: '-' }}</td>
                        <td class="expense-amount">{{ depense.montant|number_format(0, ',', ' ') }} FCFA</td>
                        <td>{{ depense.modePaiement ? modeLabels[depense.modePaiement]|default(depense.modePaiement) : '-' }}</td>
                        <td>{{ depense.anneeScolaire ? depense.anneeScolaire.libelle : '-' }}</td>
                        <td>{% include 'components/admin/status_badge.html.twig' with {label: depense.statut == 'VALIDEE' ? 'Validée' : 'Annulée', tone: depense.statut == 'VALIDEE' ? 'success' : 'danger'} only %}</td>
                        <td><a class="admin-text-link" href="{{ path('school_depense_show', {id: depense.id}) }}">Voir</a></td>
                    </tr>
                {% else %}
                    <tr><td colspan="8">Aucune dépense trouvée.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </section>
    </div>
{% endblock %}
