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

{% block title %}Dépense #{{ depense.id }} | 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-detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem}
        @media (max-width: 900px){.expense-detail-grid{grid-template-columns:1fr}}
        .expense-kv{display:grid;gap:.7rem}
        .expense-kv-row{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid rgba(15,92,69,.08)}
        .expense-kv-row span{color:#64748b}
        .expense-kv-row strong{text-align:right;color:#102033}
        .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-actions{display:flex;gap:.75rem;flex-wrap:wrap}
        .admin-btn-danger{background:#9f1239;color:#fff;border-color:#9f1239}
    </style>
    <div class="admin-page-stack">
        <section class="admin-page-header">
            <div>
                <p class="admin-eyebrow">DÉPENSE #{{ depense.id }}</p>
                <h1 class="admin-page-title">Détail de la dépense</h1>
                <p>{{ depense.categorie ? depense.categorie.libelle : 'Catégorie' }} · {{ depense.dateDepense ? depense.dateDepense|date('d/m/Y') : '-' }}</p>
            </div>
            <div class="expense-actions">
                <a class="admin-btn admin-btn-light" href="{{ path('school_depense_index') }}">Retour dépenses</a>
                <a class="admin-btn admin-btn-light" href="{{ path('school_depense_edit', {id: depense.id}) }}">Modifier</a>
                {% if depense.statut == 'VALIDEE' %}
                    <form method="post" action="{{ path('school_depense_cancel', {id: depense.id}) }}" onsubmit="return confirm('Annuler cette dépense ? Un mouvement inverse sera créé.');">
                        <input type="hidden" name="_token" value="{{ csrf_token('annuler_depense_' ~ depense.id) }}">
                        <button class="admin-btn admin-btn-danger" type="submit">Annuler</button>
                    </form>
                {% endif %}
                <form method="post" action="{{ path('school_depense_delete', {id: depense.id}) }}" onsubmit="return confirm('Supprimer cette dépense si aucun mouvement n’existe, sinon elle sera annulée.');">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete_depense_' ~ depense.id) }}">
                    <button class="admin-btn admin-btn-danger" type="submit">Supprimer</button>
                </form>
            </div>
        </section>

        <section class="expense-detail-grid">
            <article class="admin-card">
                <div class="admin-card-head"><div><h2>Informations dépense</h2><p>Détail administratif de la sortie.</p></div></div>
                <div class="expense-kv">
                    <div class="expense-kv-row"><span>Statut</span><strong>{% include 'components/admin/status_badge.html.twig' with {label: depense.statut == 'VALIDEE' ? 'Validée' : 'Annulée', tone: depense.statut == 'VALIDEE' ? 'success' : 'danger'} only %}</strong></div>
                    <div class="expense-kv-row"><span>Montant</span><strong>{{ depense.montant|number_format(0, ',', ' ') }} FCFA</strong></div>
                    <div class="expense-kv-row"><span>Catégorie</span><strong>{{ depense.categorie ? depense.categorie.libelle : '-' }}</strong></div>
                    <div class="expense-kv-row"><span>Bénéficiaire</span><strong>{{ depense.beneficiaire ?: '-' }}</strong></div>
                    <div class="expense-kv-row"><span>Mode</span><strong>{{ depense.modePaiement ? modeLabels[depense.modePaiement]|default(depense.modePaiement) : '-' }}</strong></div>
                    <div class="expense-kv-row"><span>Référence</span><strong>{{ depense.reference ?: '-' }}</strong></div>
                    <div class="expense-kv-row"><span>Année scolaire</span><strong>{{ depense.anneeScolaire ? depense.anneeScolaire.libelle : 'Non liée' }}</strong></div>
                    <div class="expense-kv-row"><span>Justificatif</span><strong>{{ depense.justificatifPath ?: '-' }}</strong></div>
                    <div class="expense-kv-row"><span>Description</span><strong>{{ depense.description ?: '-' }}</strong></div>
                </div>
            </article>

            <article class="admin-card">
                <div class="admin-card-head"><div><h2>Mouvements de caisse</h2><p>Sortie et éventuelle annulation.</p></div></div>
                <table class="expense-table">
                    <thead><tr><th>Date</th><th>Type</th><th>Libellé</th><th>Montant</th></tr></thead>
                    <tbody>
                    {% for mouvement in mouvements %}
                        <tr>
                            <td>{{ mouvement.dateMouvement ? mouvement.dateMouvement|date('d/m/Y') : '-' }}</td>
                            <td>{{ mouvement.type }}</td>
                            <td>{{ mouvement.libelle }}</td>
                            <td><strong>{{ mouvement.montant|number_format(0, ',', ' ') }} FCFA</strong></td>
                        </tr>
                    {% else %}
                        <tr><td colspan="4">Aucun mouvement de caisse lié.</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </article>
        </section>
    </div>
{% endblock %}
