{# templates/client/finances/index.html.twig #}

{% extends 'layouts/client_layout.html.twig' %}

{% block title %}Mes Finances{% endblock %}

{% block content %}
<div class="container-fluid">
    <h2 class="fw-bold text-dark mb-4">Suivi Financier</h2>

    {% for souscription in souscriptions %}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h5 class="mb-0">Détails des paiements : {{ souscription.lot.nomBien }}</h5>
            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-md-4">
                        <small class="text-muted d-block">Montant Total</small>
                        <span class="fw-bold fs-5">{{ souscription.montantTotalDu|number_format(0, ',', ' ') }} FCFA</span>
                    </div>
                    <div class="col-md-4">
                        <small class="text-muted d-block">Déjà payé</small>
                        <span class="fw-bold text-success fs-5">{{ souscription.montantTotalPaye|number_format(0, ',', ' ') }} FCFA</span>
                    </div>
                    <div class="col-md-4">
                        <small class="text-muted d-block">Reste à payer</small>
                        <span class="fw-bold text-danger fs-5">{{ souscription.resteAPayer|number_format(0, ',', ' ') }} FCFA</span>
                    </div>
                </div>

                <table class="table table-sm">
                    <thead class="text-muted small">
                        <tr>
                            <th>Date</th>
                            <th>Référence</th>
                            <th>Mode</th>
                            <th class="text-end">Montant</th>
                            <th class="text-center">Statut</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for paiement in souscription.paiements %}
                            <tr>
                                <td>{{ paiement.datePaiement|date('d/m/Y') }}</td>
                                <td>{{ paiement.reference }}</td>
                                <td>{{ paiement.modePaiement }}</td>
                                <td class="text-end fw-bold">{{ paiement.montant|number_format(0, ',', ' ') }}</td>
                                <td class="text-center">
                                    {% if paiement.estValide %}
                                        <i class="fas fa-check-circle text-success"></i>
                                    {% else %}
                                        <i class="fas fa-clock text-warning"></i>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endfor %}
</div>
{% endblock %}