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

{% block title %}Paiement {{ paiement.numeroRecu }} | 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>
        .payment-detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem}
        @media (max-width: 900px){.payment-detail-grid{grid-template-columns:1fr}}
        .payment-kv{display:grid;gap:.7rem}
        .payment-kv-row{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid rgba(15,92,69,.08)}
        .payment-kv-row span{color:#64748b}
        .payment-kv-row strong{text-align:right;color:#102033}
        .payment-table{width:100%;border-collapse:separate;border-spacing:0 .55rem}
        .payment-table th{font-size:.72rem;text-transform:uppercase;color:#64748b;text-align:left;padding:.35rem .75rem}
        .payment-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}
        .payment-table td:first-child{border-left:1px solid rgba(15,92,69,.1);border-radius:12px 0 0 12px}
        .payment-table td:last-child{border-right:1px solid rgba(15,92,69,.1);border-radius:0 12px 12px 0;text-align:right}
        .payment-actions{display:flex;gap:.75rem;flex-wrap:wrap}
        .payment-disabled{opacity:.55;pointer-events:none}
        .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">REÇU {{ paiement.numeroRecu }}</p>
                <h1 class="admin-page-title">Détail du paiement</h1>
                <p>{{ paiement.etudiant ? paiement.etudiant.nomComplet : 'Étudiant non lié' }} · {{ paiement.datePaiement ? paiement.datePaiement|date('d/m/Y') : '-' }}</p>
            </div>
            <div class="payment-actions">
                <a class="admin-btn admin-btn-light" href="{{ path('school_paiement_index') }}">Retour paiements</a>
                {% if paiement.etudiant %}
                    <a class="admin-btn admin-btn-light" href="{{ path('school_etudiant_finance', {id: paiement.etudiant.id}) }}">Fiche financière</a>
                {% endif %}
                <form method="post" action="{{ path('school_paiement_generate_receipt', {id: paiement.id}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('generer_recu_paiement_' ~ paiement.id) }}">
                    <button class="admin-btn admin-btn-primary" type="submit">{{ recu ? 'Régénérer le reçu' : 'Générer le reçu' }}</button>
                </form>
                {% if recu and recu.pdfPath %}
                    <a class="admin-btn admin-btn-light" href="{{ path('school_paiement_receipt', {id: paiement.id}) }}" target="_blank" rel="noopener">Ouvrir le reçu</a>
                {% endif %}
                {% if paiement.statut == 'VALIDE' %}
                    <form method="post" action="{{ path('school_paiement_cancel', {id: paiement.id}) }}" onsubmit="return confirm('Annuler ce paiement ? Cette action conserve la trace administrative.');">
                        <input type="hidden" name="_token" value="{{ csrf_token('annuler_paiement_' ~ paiement.id) }}">
                        <button class="admin-btn admin-btn-danger" type="submit">Annuler</button>
                    </form>
                {% endif %}
                <form method="post" action="{{ path('school_paiement_delete', {id: paiement.id}) }}" onsubmit="return confirm('Supprimer définitivement ce paiement ? Les lignes, le mouvement de caisse et le reçu PDF seront supprimés sans historique.');">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete_paiement_' ~ paiement.id) }}">
                    <button class="admin-btn admin-btn-danger" type="submit">Supprimer définitivement</button>
                </form>
            </div>
        </section>

        <section class="payment-detail-grid">
            <article class="admin-card">
                <div class="admin-card-head"><div><h2>Informations paiement</h2><p>Encaissement enregistré dans la caisse école.</p></div></div>
                <div class="payment-kv">
                    <div class="payment-kv-row"><span>Numéro reçu</span><strong>{{ paiement.numeroRecu }}</strong></div>
                    <div class="payment-kv-row"><span>Statut</span><strong>{% include 'components/admin/status_badge.html.twig' with {label: paiement.statut == 'VALIDE' ? 'Validé' : 'Annulé', tone: paiement.statut == 'VALIDE' ? 'success' : 'danger'} only %}</strong></div>
                    <div class="payment-kv-row"><span>Montant total</span><strong>{{ paiement.montantTotal|number_format(0, ',', ' ') }} FCFA</strong></div>
                    <div class="payment-kv-row"><span>Mode</span><strong>{{ paiement.modePaiement ? modeLabels[paiement.modePaiement]|default(paiement.modePaiement) : '-' }}</strong></div>
                    <div class="payment-kv-row"><span>Référence</span><strong>{{ paiement.reference ?: '-' }}</strong></div>
                    <div class="payment-kv-row"><span>Année scolaire</span><strong>{{ paiement.anneeScolaire ? paiement.anneeScolaire.libelle : 'Non précisée' }}</strong></div>
                    <div class="payment-kv-row"><span>Observation</span><strong>{{ paiement.observation ?: '-' }}</strong></div>
                </div>
            </article>

            <article class="admin-card">
                <div class="admin-card-head"><div><h2>Étudiant et caisse</h2><p>Rattachement administratif du paiement.</p></div></div>
                <div class="payment-kv">
                    <div class="payment-kv-row"><span>Étudiant</span><strong>{{ paiement.etudiant ? paiement.etudiant.nomComplet : '-' }}</strong></div>
                    <div class="payment-kv-row"><span>Matricule</span><strong>{{ paiement.etudiant and paiement.etudiant.matricule ? paiement.etudiant.matricule : '-' }}</strong></div>
                    <div class="payment-kv-row"><span>Mouvement caisse</span><strong>{{ mouvement ? mouvement.type : 'Non créé' }}</strong></div>
                    <div class="payment-kv-row"><span>Date mouvement</span><strong>{{ mouvement and mouvement.dateMouvement ? mouvement.dateMouvement|date('d/m/Y') : '-' }}</strong></div>
                    <div class="payment-kv-row"><span>Observation caisse</span><strong>{{ mouvement and mouvement.observation ? mouvement.observation : '-' }}</strong></div>
                    <div class="payment-kv-row"><span>Reçu PDF</span><strong>{{ recu and recu.generatedAt ? 'Généré le ' ~ recu.generatedAt|date('d/m/Y H:i') : 'Non généré' }}</strong></div>
                </div>
            </article>
        </section>

        <section class="admin-card">
            <div class="admin-card-head"><div><h2>Lignes de paiement</h2><p>Répartition automatique sur les échéances ouvertes.</p></div></div>
            <table class="payment-table">
                <thead><tr><th>Libellé</th><th>Échéance</th><th>Parcours</th><th>Type</th><th>Montant</th></tr></thead>
                <tbody>
                {% for ligne in paiement.lignes %}
                    <tr>
                        <td><strong>{{ ligne.libelle }}</strong></td>
                        <td>{{ ligne.echeancePaiement ? (ligne.echeancePaiement.periode ?: ligne.echeancePaiement.libelle) : 'Libre' }}</td>
                        <td>{{ ligne.parcoursEtudiant and ligne.parcoursEtudiant.classe ? ligne.parcoursEtudiant.classe.nom : '-' }}</td>
                        <td>{{ ligne.typeFrais ? ligne.typeFrais.libelle : '-' }}</td>
                        <td><strong>{{ ligne.montant|number_format(0, ',', ' ') }} FCFA</strong></td>
                    </tr>
                {% else %}
                    <tr><td colspan="5">Aucune ligne liée à ce paiement.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </section>
    </div>
{% endblock %}
