{% extends 'layout/backEndLayout.html.twig' %}

{% block title %}Compte financier - Élève #{{ student_id }}{% endblock %}

{% block body %}
<div class="all-title-box">
    <div class="container text-center">
        <h1>Compte financier<span class="m_1">Élève #{{ student_id }} - Année {{ school_year_id }}</span></h1>
    </div>
</div>

<div id="overviews" class="section lb">
    <div class="container">
        {% include 'layout/partials/flash_messages.html.twig' %}
        
        {% if account %}
            {# Résumé du compte #}
            <div class="row mb-4">
                <div class="col-lg-3 col-md-6 mb-3">
                    <div class="card text-white bg-primary">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-uppercase mb-1">Total dû</h6>
                                    <h3 class="mb-0">{{ account.totalDue|number_format(0, ',', ' ') }}</h3>
                                    <small>XAF</small>
                                </div>
                                <div>
                                    <i class="fas fa-file-invoice-dollar fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-3">
                    <div class="card text-white bg-success">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-uppercase mb-1">Total payé</h6>
                                    <h3 class="mb-0">{{ account.totalPaid|number_format(0, ',', ' ') }}</h3>
                                    <small>XAF</small>
                                </div>
                                <div>
                                    <i class="fas fa-check-circle fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-3">
                    <div class="card text-white bg-warning">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-uppercase mb-1">Solde</h6>
                                    <h3 class="mb-0">{{ account.balance|number_format(0, ',', ' ') }}</h3>
                                    <small>XAF</small>
                                </div>
                                <div>
                                    <i class="fas fa-balance-scale fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 mb-3">
                    <div class="card text-white {{ account.solvencyStatus.value == 'solvent' ? 'bg-success' : 'bg-danger' }}">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-uppercase mb-1">Statut</h6>
                                    <h4 class="mb-0">{{ account.solvencyStatus.label }}</h4>
                                </div>
                                <div>
                                    <i class="fas {{ account.solvencyStatus.value == 'solvent' ? 'fa-thumbs-up' : 'fa-exclamation-triangle' }} fa-3x opacity-50"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Détail des frais #}
            <div class="row mb-4">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0"><i class="fas fa-list-ul"></i> Détail des frais</h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead class="thead-light">
                                        <tr>
                                            <th><i class="fas fa-tag"></i> Type</th>
                                            <th><i class="fas fa-file-alt"></i> Description</th>
                                            <th><i class="fas fa-money-bill"></i> Montant dû</th>
                                            <th><i class="fas fa-check-circle"></i> Payé</th>
                                            <th><i class="fas fa-calculator"></i> Solde</th>
                                            <th><i class="fas fa-calendar"></i> Échéance</th>
                                            <th><i class="fas fa-info-circle"></i> Statut</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% if fees is empty %}
                                            <tr>
                                                <td colspan="7" class="text-center py-4">
                                                    <i class="fas fa-inbox fa-3x text-muted mb-2 d-block"></i>
                                                    <p class="text-muted">Aucun frais trouvé</p>
                                                </td>
                                            </tr>
                                        {% else %}
                                            {% for fee in fees %}
                                                <tr>
                                                    <td>
                                                        <span class="badge 
                                                            {% if fee.feeType.value == 'registration' %}badge-primary
                                                            {% elseif fee.feeType.value == 'exam' %}badge-warning
                                                            {% else %}badge-info
                                                            {% endif %}">
                                                            {{ fee.feeType.label }}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        {{ fee.name }}
                                                        {% if fee.installmentNumber %}
                                                            <br><small class="text-muted">Tranche #{{ fee.installmentNumber }}</small>
                                                        {% endif %}
                                                    </td>
                                                    <td><strong>{{ fee.amountDue|number_format(0, ',', ' ') }} XAF</strong></td>
                                                    <td class="text-success">{{ fee.amountPaid|number_format(0, ',', ' ') }} XAF</td>
                                                    <td>
                                                        {% if fee.balance > 0 %}
                                                            <span class="text-danger">{{ fee.balance|number_format(0, ',', ' ') }} XAF</span>
                                                        {% else %}
                                                            <span class="text-success">0 XAF</span>
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        {% if fee.dueDate %}
                                                            {{ fee.dueDate|date('d/m/Y') }}
                                                            {% if fee.isLate() %}
                                                                <br><small class="text-danger"><i class="fas fa-exclamation-triangle"></i> En retard</small>
                                                            {% endif %}
                                                        {% else %}
                                                            <span class="text-muted">-</span>
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        <span class="badge {{ fee.status.badgeClass }}">
                                                            {{ fee.status.label }}
                                                        </span>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        {% endif %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Historique des paiements #}
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0"><i class="fas fa-history"></i> Historique des paiements</h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-striped mb-0">
                                    <thead class="thead-light">
                                        <tr>
                                            <th><i class="fas fa-receipt"></i> N° Reçu</th>
                                            <th><i class="fas fa-money-bill-wave"></i> Montant</th>
                                            <th><i class="fas fa-calendar"></i> Date</th>
                                            <th><i class="fas fa-user"></i> Reçu par</th>
                                            <th><i class="fas fa-download"></i> Reçu PDF</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if payments is empty %}
                                        <tr>
                                            <td colspan="5" class="text-center py-4">
                                                <i class="fas fa-inbox fa-3x text-muted mb-2 d-block"></i>
                                                <p class="text-muted">Aucun paiement effectué</p>
                                            </td>
                                        </tr>
                                    {% else %}
                                        {% for payment in payments %}
                                            <tr>
                                                <td><strong>{{ payment.receiptNumber }}</strong></td>
                                                <td><span class="badge badge-success" style="font-size: 13px;">{{ payment.amount|number_format(0, ',', ' ') }} XAF</span></td>
                                                <td>{{ payment.paymentDate|date('d/m/Y H:i') }}</td>
                                                <td>{{ payment.receivedBy }}</td>
                                                <td>
                                                    <a href="{{ path('app_finance_cash_payment_receipt', {'id': payment.id}) }}" 
                                                       class="btn btn-sm btn-primary" 
                                                       target="_blank">
                                                        <i class="fas fa-file-pdf"></i> Télécharger
                                                    </a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-lg-12 text-center">
                <a href="{{ path('app_finance_cash_payment_new') }}" class="btn btn-primary btn-lg">
                    <i class="fas fa-plus"></i> Enregistrer un nouveau paiement
                </a>
            </div>
        </div>

    {% else %}
        <div class="row">
            <div class="col-lg-12">
                <div class="alert alert-warning text-center">
                    <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                    <h4>Compte financier non trouvé</h4>
                    <p>Aucun compte financier n'existe pour cet élève et cette année scolaire.</p>
                    <a href="{{ path('app_finance_fee_definition_index') }}" class="btn btn-primary">
                        <i class="fas fa-arrow-left"></i> Retour
                    </a>
                </div>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}