{# INDICATEURS DE PERFORMANCE (KPI) #}
<div
	class="row g-3 mb-4">
	{# Total Encaissé (Validés)  #}
	<div class="col-md-4">
		<div class="card shadow-sm border-0 h-100 bg-success bg-gradient text-white">
			<div class="card-body">
				<div class="d-flex justify-content-between align-items-center">
					<div>
						<h6 class="text-uppercase small mb-1 opacity-75">Total Encaissé</h6>
						<h3 class="fw-bold mb-0">{{ totalValide|number_format(0, ',', ' ') }}
							<small class="fs-6">FCFA</small>
						</h3>
					</div>
					<div class="bg-white bg-opacity-25 rounded p-3">
						<i class="fas fa-check-circle fa-2x"></i>
					</div>
				</div>
				<p class="card-text small mt-2 mb-0">
					<span class="fw-bold">{{ countValide }}</span>
					paiement(s) validé(s)
				</p>
			</div>
		</div>
	</div>

	{# En attente de validation  #}
	<div class="col-md-4">
		<div class="card shadow-sm border-0 h-100 bg-warning bg-gradient text-dark">
			<div class="card-body">
				<div class="d-flex justify-content-between align-items-center">
					<div>
						<h6 class="text-uppercase small mb-1 opacity-75">En attente</h6>
						<h3 class="fw-bold mb-0">{{ totalEnAttente|number_format(0, ',', ' ') }}
							<small class="fs-6">FCFA</small>
						</h3>
					</div>
					<div class="bg-dark bg-opacity-10 rounded p-3">
						<i class="fas fa-clock fa-2x"></i>
					</div>
				</div>
				<p class="card-text small mt-2 mb-0">
					<span class="fw-bold">{{ countEnAttente }}</span>
					transaction(s) à vérifier
				</p>
			</div>
		</div>
	</div>

	{# Volume total de la sélection  #}
	<div class="col-md-4">
		<div class="card shadow-sm border-0 h-100 bg-white">
			<div class="card-body">
				<div class="d-flex justify-content-between align-items-center">
					<div>
						<h6 class="text-uppercase small text-muted mb-1">Volume de la sélection</h6>
						<h3 class="fw-bold mb-0 text-primary">{{ (totalValide + totalEnAttente)|number_format(0, ',', ' ') }}</h3>
					</div>
					<div class="bg-light rounded p-3 text-primary">
						<i class="fas fa-chart-line fa-2x"></i>
					</div>
				</div>
				<p class="card-text small mt-2 mb-0 text-muted">
					Sur un total de
					<span class="fw-bold text-dark">{{ paiements.getTotalItemCount }}</span>
					lignes affichées
				</p>
			</div>
		</div>
	</div>