{# _shared/paiement/tab/_echeance.html.twig #}
<div class="card-header bg-light py-2 d-flex justify-content-between align-items-center border-top">
	<span class="text-xs text-uppercase fw-bold text-muted">Suivi des échéances</span>
	<span class="badge bg-soft-primary text-primary border border-primary-subtle rounded-pill">
		Recouvrement :
		{{ souscription.pourcentagePaiement }}%
	</span>
</div>

<div class="table-responsive">
	<table class="table table-hover align-middle mb-0">
		<thead class="bg-light text-xs text-uppercase">
			<tr>
				<th class="border-0 ps-3">Libellé / Date Prévue</th>
				<th class="border-0 text-end">Montant Prévu</th>
				<th class="border-0 text-end">Montant Payé</th>
				<th class="border-0 text-center">Statut</th>
			</tr>
		</thead>
		<tbody
			class="text-sm">
			{# Tri décroissant : les échéances les plus lointaines en premier #}
			{% for echeance in echeanciers %}
				<tr class="{{ echeance.statut == 'EN_RETARD' ? 'table-light-danger' : '' }}">
					<td class="ps-3">
						<div class="fw-bold text-dark">{{ echeance.libelle|default('Échéance') }}</div>
						<div class="text-muted small">
							<i class="far fa-calendar-alt me-1"></i>
							{{ echeance.datePrevue|date('d/m/Y') }}
						</div>
					</td>
					<td class="text-end fw-bold">
						{{ echeance.montantAttendu|number_format(0, ',', ' ') }}

					</td>
					<td class="text-end text-success fw-bold">
						{{ echeance.montantPaye|number_format(0, ',', ' ') }}

					</td>
					<td class="text-center">
						{% if echeance.statut == 'PAYE' %}
							<span class="badge bg-success-light text-success rounded-pill px-2 py-1" style="font-size: 0.7rem;">
								<i class="fas fa-check-circle me-1"></i>Payé
							</span>
						{% elseif echeance.statut == 'PARTIEL' %}
							<span class="badge bg-warning-light text-warning rounded-pill px-2 py-1" style="font-size: 0.7rem;">
								<i class="fas fa-adjust me-1"></i>Partiel
							</span>
						{% elseif echeance.statut == 'EN_RETARD' %}
							<span class="badge bg-danger-light text-danger rounded-pill px-2 py-1" style="font-size: 0.7rem;">
								<i class="fas fa-exclamation-triangle me-1"></i>En retard
							</span>
						{% else %}
							<span class="badge bg-light text-muted border rounded-pill px-2 py-1" style="font-size: 0.7rem;">
								<i class="fas fa-clock me-1"></i>En attente
							</span>
						{% endif %}
					</td>

				</tr>
			{% else %}
				<tr>
					<td colspan="5" class="text-center py-4 text-muted">
						Aucune échéance générée pour ce dossier.
					</td>
				</tr>
			{% endfor %}
		</tbody>

		<tfoot class="bg-light fw-bold">
			<tr>
				<td class="ps-3">TOTAL DOSSIER</td>
				<td class="text-end text-primary">{{ souscription.montantTotalDu|number_format(0, ',', ' ') }}
					F</td>
				<td class="text-end text-success">{{ souscription.montantVerse|number_format(0, ',', ' ') }}
					F</td>
				<td colspan="2" class="text-center {{ (souscription.montantTotalDu - souscription.montantVerse) > 0 ? 'text-danger' : 'text-success' }}">
					Reste :
					{{ (souscription.montantTotalDu - souscription.montantVerse)|number_format(0, ',', ' ') }}
					F
				</td>
			</tr>
		</tfoot>
	</table>
</div>