{# _shared/paiement/tab/_bon.html.twig #}
<div class="p-3">
	<div class="alert alert-info border-0 shadow-sm d-flex align-items-center mb-4">
		<i class="fas fa-file-invoice-dollar fa-2x me-3 opacity-50"></i>
		<div>
			<h6 class="mb-0 fw-bold">Registre des Bons de Paiement (Espèces)</h6>
			<small>Historique des intentions de versement générées par les commerciaux.</small>
		</div>
	</div>

	<div class="table-responsive">
		<table class="table table-hover align-middle mb-0 text-sm">
			<thead class="bg-light text-xs text-uppercase border-bottom">
				<tr>
					<th class="ps-3 border-0 py-3">Émission</th>
					<th class="border-0">Référence Bon</th>
					<th class="border-0">Commercial</th>
					<th class="border-0 text-end">Montant</th>
					<th class="border-0 text-center">Validation Caisse</th>
					<th class="border-0 text-center pe-3">Actions</th>
				</tr>
			</thead>
			<tbody>
				{# Filtrage pour ne prendre que les paiements liés à la table PaiementBon #}
				{% set paiementsAvecBon = souscription.paiements|filter(p => p.bon is not null) %}

				{% for paiement in paiementsAvecBon|sort((a, b) => b.datePaiement <=> a.datePaiement) %}
					<tr {% if not paiement.estValide %} class="table-warning-light" {% endif %}>
						<td class="ps-3">
							<div class="fw-bold text-dark">{{ paiement.datePaiement|date('d/m/Y') }}</div>
							<div class="text-muted small" style="font-size: 0.75rem;">
								<i class="far fa-clock me-1"></i>
								{{ paiement.datePaiement|date('H:i') }}
							</div>
						</td>
						<td>
							<span class="badge bg-white text-primary border border-primary-subtle px-2 py-1 fw-bold">
								<i class="fas fa-hashtag me-1"></i>
								{{ paiement.bon.referenceBon }}
							</span>
						</td>
						<td>
							<div class="d-flex align-items-center">
								<div class="avatar-xs me-2 bg-primary text-white rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width: 26px; height: 26px; font-size: 10px;">
									{{ paiement.user.prenoms|first|upper }}{{ paiement.user.nom|first|upper }}
								</div>
								<span class="small text-dark">{{ paiement.user.fullName }}</span>
							</div>
						</td>
						<td class="text-end fw-bold text-dark">
							{{ paiement.montant|number_format(0, ',', ' ') }}
							<small>FCFA</small>
						</td>
						<td class="text-center">
							{% if paiement.estValide %}
								<span class="badge bg-success rounded-pill px-3 py-2">
									<i class="fas fa-check-double me-1"></i>Encaissé
								</span>
							{% else %}
								<span class="badge bg-warning text-dark rounded-pill px-3 py-2 animate__animated animate__pulse animate__infinite">
									<i class="fas fa-hourglass-start me-1"></i>En attente
								</span>
							{% endif %}
						</td>
						<td class="text-center pe-3">
							<div
								class="btn-group shadow-sm">
								{# Détails en modal #}
								<button class="btn btn-white btn-sm btn-ajax-modal" data-url="{{ path('shared_paiement_show_detail', {id: paiement.id}) }}" title="Voir les détails">
									<i class="fas fa-eye text-info"></i>
								</button>
								{% if not paiement.estValide %}
									{# Ré-impression du Bon (Uniquement si c'est de l'espèce comme défini dans votre contrôleur) #}
									<a href="{{ path('app_commercial_print_bon', {id: paiement.id}) }}" class="btn btn-white btn-sm" target="_blank" title="Ré-imprimer le bon de caisse">
										<i class="fas fa-print text-dark"></i>
									</a>
								{% endif %}
							</div>
						</td>
					</tr>
				{% else %}
					<tr>
						<td colspan="6" class="text-center py-5 text-muted">
							<div class="opacity-20 mb-3">
								<i class="fas fa-file-invoice fa-4x"></i>
							</div>
							<p class="mb-0">Aucune demande de paiement en espèces n'a été trouvée.</p>
						</td>
					</tr>
				{% endfor %}
			</tbody>
		</table>
	</div>
</div>

<style>
	.table-warning-light {
		background-color: rgba(255, 193, 7, 0.02) !important;
	}
	.btn-white {
		background: #fff;
		border: 1px solid #dee2e6;
	}
	.btn-white:hover {
		background: #f8f9fa;
		border-color: #cbd3da;
	}
	.badge.bg-success {
		background-color: #28a745 !important;
	}
	.badge.bg-warning {
		background-color: #ffc107 !important;
	}
</style>