{# templates/finance/payment/list.html.twig #}
{% extends 'layout/backEndLayout.html.twig' %}

{% block title %}Liste des paiements{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/css/finance-custom.css') }}">
{% endblock %}

{% block body %}
<div class="all-title-box" style="background: linear-gradient(135deg, #228B22 0%, #1a6b1a 100%);">
    <div class="container text-center">
        <h1 style="color: white;">Paiements<span class="m_1" style="color: #c8e6c9;">Historique</span></h1>
    </div>
</div>

<div id="overviews" class="section lb">
    <div class="container">
        {% include 'layout/partials/flash_messages.html.twig' %}

        {% if student %}
        <div class="alert alert-info">
            <i class="fa fa-user"></i> <strong>Élève:</strong> {{ student.firstName }} {{ student.lastName }} ({{ student.matricule }})
        </div>
        {% endif %}

        <div class="row mb-4">
            <div class="col-md-12 text-right">
                <a href="{{ path('app_finance_payment_new') }}" class="btn btn-finance-primary">
                    <i class="fa fa-plus"></i> Nouveau paiement
                </a>
                <a href="{{ path('app_finance_dashboard') }}" class="btn btn-finance-secondary">
                    <i class="fa fa-dashboard"></i> Tableau de bord
                </a>
            </div>
        </div>

        <div class="card shadow">
            <div class="card-body">
                {% if payments|length > 0 %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead style="background: linear-gradient(135deg, #ff7b00 0%, #e66a00 100%); color: white;">
                            <tr>
                                <th>N° Reçu</th>
                                <th>Date</th>
                                <th>Élève</th>
                                <th class="text-right">Montant</th>
                                <th>Reçu par</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {# Les données seront affichées ici une fois le module complet #}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="fa fa-inbox fa-4x text-muted mb-3"></i>
                    <p class="lead text-muted">Aucun paiement enregistré</p>
                    <a href="{{ path('app_finance_payment_new') }}" class="btn btn-finance-primary btn-lg">
                        <i class="fa fa-plus"></i> Enregistrer le premier paiement
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}