{# _shared/paiement/tab/_paiement.html.twig #}
<div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-top">
	<h6 class="m-0 font-weight-bold text-primary text-xs text-uppercase">
		<i class="fas fa-history me-2"></i>Historique des encaissements
	</h6>
	<span class="badge bg-soft-info text-info border border-info-subtle">
		Total versé (Validé) :
		{{ souscription.montantVerse|number_format(0, ',', ' ') }}
		F CFA
	</span>
</div>

<div class="table-responsive">
	<table class="table table-hover align-middle mb-0 text-sm">
		<thead class="bg-light text-xs text-uppercase">
			<tr>
				<th class="ps-3 border-0">Date</th>
				<th class="border-0">Référence / Mode</th>
				<th class="border-0 text-end">Montant</th>
				<th class="border-0 text-center">Statut</th>
				<th class="border-0 text-center pe-3">Actions</th>
			</tr>
		</thead>
		<tbody>
			{# On filtre d'abord les validés, puis on trie par date de façon décroissante (b <=> a) #}
			{% for paiement in souscription.paiements|sort((a, b) => b.datePaiement <=> a.datePaiement) %}
				<tr>
					<td class="ps-3 text-muted">
						<div class="fw-bold">{{ paiement.datePaiement|date('d/m/Y') }}</div>
						<div class="small" style="font-size: 0.7rem;">{{ paiement.datePaiement|date('H:i') }}</div>
					</td>
					<td>
						<div class="fw-bold text-dark">{{ paiement.referenceTransaction ?: '—' }}</div>
						<span class="badge bg-light text-dark border px-2">
							<i class="fas {{ paiement.moyenPaiement.value == 'ESPECES' ? 'fa-money-bill-wave' : 'fa-credit-card' }} me-1"></i>
							{# Si votre Enum a une méthode de traduction #}
							{{ paiement.moyenPaiement.name }}
						</span>
					</td>
					<td class="text-end fw-bold text-primary">
						{{ paiement.montant|number_format(0, ',', ' ') }}
						F.CFA
					</td>
					<td class="text-center">
						{% if paiement.isEstValide %}
							<span class="badge bg-success-light text-success rounded-pill p-3">
								<i class="fas fa-check me-1"></i>
								Validé
							</span>
						{% else %}
							<span class="badge bg-warning-light text-warning rounded-pill p-3">
								<i class="fas fa-clock me-1"></i>
								En attente
							</span>
						{% endif %}
					</td>
					<td class="text-center pe-3">
						{% if paiement.isEstValide %}
							<button class="btn btn-outline-primary btn-sm btn-ajax-modal shadow-sm" data-url="{{ path('shared_paiement_show_detail', {id: paiement.id}) }}" title="Voir le reçu">
								<i class="fas fa-eye"></i>
							</button>
						{% endif %}
					</td>
				</tr>
			{% else %}
				<tr>
					<td colspan="5" class="text-center py-5 text-muted">
						<i class="fas fa-info-circle me-1"></i>
						Aucun encaissement validé pour le moment.
					</td>
				</tr>
			{% endfor %}
		</tbody>
	</table>
</div>