{# templates/commercial/portefeuille/tabs/paiement/index.html.twig #}
<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="p-3 bg-light d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold">Historique des versements</h6>
            <div class="text-danger fw-bold small">Reste à payer : {{ resteAPayer|number_format(0,',',' ') }} FCFA</div>
        </div>
        <table class="table table-hover mb-0">
            <thead class="small text-muted bg-light">
                <tr>
                    <th class="ps-3">Date</th>
                    <th>Mode</th>
                    <th class="text-end">Montant</th>
                    <th class="text-center">Statut</th>
                </tr>
            </thead>
            <tbody>
                {% for p in paiements %}
                <tr class="small">
                    <td class="ps-3">{{ p.datePaiement|date('d/m/Y') }}</td>
                    <td>{{ p.moyenPaiement }}</td>
                    <td class="text-end fw-bold">{{ p.montant|number_format(0,',',' ') }}</td>
                    <td class="text-center">
                        <span class="badge {{ p.estValide ? 'bg-success' : 'bg-warning text-dark' }}">
                            {{ p.estValide ? 'Confirmé' : 'Attente' }}
                        </span>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>