{# templates/_shared/paiement/__list_simple.html.twig #}

<div
	id="paiement-ajax-list-container">
	{# ID pour le rafraîchissement AJAX #}
	<div
		class="card border-0 shadow-sm position-relative">

		{# Overlay de chargement local #}
		<div id="paiement-ajax-loader" class="d-none position-absolute w-100 h-100 d-flex justify-content-center align-items-center" style="background: rgba(255,255,255,0.7); z-index: 10; top: 0; left: 0; border-radius: .35rem;">
			<div class="spinner-border text-primary" role="status">
				<span class="visually-hidden">Chargement...</span>
			</div>
		</div>

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

		<div class="table-responsive">
			<table class="table table-hover align-middle mb-0">
				<thead class="table-light text-muted small text-uppercase">
					<tr>
						<th class="border-0 ps-4">Date</th>
						<th class="border-0">Référence / Mode</th>
						<th class="border-0">Encaissé par</th>
						<th class="border-0 text-end">Montant</th>
						<th class="border-0 text-center">Documents</th>
						<th class="border-0 text-center">Statut</th>
						<th class="border-0 text-center pe-4">Actions</th>
					</tr>
				</thead>
				<tbody class="text-sm">
					{% for paiement in paiements %}
						<tr class="paiement-row">
							<td class="ps-4 text-muted">
								{{ paiement.datePaiement|date('d/m/Y') }}
							</td>
							<td>
								<div class="fw-bold text-dark">{{ paiement.referenceTransaction ?: 'Sans réf.' }}</div>
								<span class="badge bg-light text-dark border px-2" style="font-size: 0.65rem;">
									<i class="fas {{ paiement.moyenPaiement == 'ESPECES' ? 'fa-money-bill-wave' : 'fa-credit-card' }} me-1"></i>
									{{ paiement.moyenPaiement.value|default(paiement.moyenPaiement) }}
								</span>
							</td>
							<td>
								{% if paiement.user %}
									<div class="d-flex align-items-center">
										<div class="avatar-xs me-2 d-none d-md-block">
											<span class="avatar-title rounded-circle bg-soft-primary text-primary small" style="width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 10px;">
												{{ paiement.user.prenoms|first|upper }}{{ paiement.user.nom|first|upper }}
											</span>
										</div>
										<span class="text-dark small">{{ paiement.user.fullName }}</span>
									</div>
								{% else %}
									<span class="text-muted small italic">Automatique</span>
								{% endif %}
							</td>
							<td class="text-end fw-bold text-primary">
								{{ paiement.montant|number_format(0, ',', ' ') }}
								F
							</td>

							<td class="text-center">
								{% set pId = paiement.id|format %}
								{% set doc = documents[pId] ?? null %}

								<div class="btn-group shadow-sm bg-white">
									<a href="{{ path('shared_paiement_recu', {id: paiement.id}) }}" target="_blank" class="btn btn-sm btn-outline-danger border-light-subtle" title="Générer le reçu">
										<i class="fas fa-file-invoice fa-xs"></i>
									</a>
									{% if doc %}
										<a href="{{ asset('uploads/documents/' ~ doc.fichierUrl) }}" target="_blank" class="btn btn-sm btn-outline-primary border-light-subtle" title="Voir la preuve ({{ doc.extension|upper }})">
											<i class="fas {{ doc.typeMedia == 'IMAGE' ? 'fa-camera' : 'fa-file-pdf' }} fa-xs"></i>
										</a>
									{% endif %}
								</div>
							</td>

							<td class="text-center">
								{% if paiement.isEstValide %}
									<span class="badge bg-success-light text-success border-success border p-2 py-1" style="font-size: 0.7rem;">
										<i class="fas fa-check-circle me-1"></i>
										Validé
									</span>
								{% else %}
									<span class="badge bg-warning-light text-warning border-warning border p-2 py-1" style="font-size: 0.7rem;">
										<i class="fas fa-clock me-1"></i>
										En attente
									</span>
								{% endif %}
							</td>

							<td class="text-center pe-4">
								<div class="btn-group shadow-sm bg-white" role="group">
									<button type="button" class="btn btn-sm btn-outline-warning btn-ajax-modal border-light-subtle" data-url="{{ path('shared_paiement_edit', {id: paiement.id}) }}" title="Modifier">
										<i class="fas fa-edit fa-xs"></i>
									</button>

									<form method="post" action="{{ path('shared_paiement_delete', {id: paiement.id}) }}" class="d-inline paiement-delete-form">
										<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ paiement.id) }}">
										<button type="button" class="btn btn-sm btn-outline-danger btn-ajax-delete-paiement border-light-subtle" title="Supprimer" data-ref="{{ paiement.referenceTransaction ?: (paiement.montant|number_format(0, ',', ' ') ~ ' F') }}" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">
											<i class="fas fa-trash fa-xs"></i>
										</button>
									</form>
								</div>
							</td>
						</tr>
					{% else %}
						<tr>
							<td colspan="7" class="text-center py-5 text-muted fst-italic">
								<i class="fas fa-receipt fa-2x mb-3 opacity-25 d-block"></i>
								Aucun paiement enregistré pour cette souscription.
							</td>
						</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
	</div>

	<script>
		(function () {
const container = document.getElementById('paiement-ajax-list-container');
if (! container) 
return;



window.refreshPaiementList = function () {
const loader = document.getElementById('paiement-ajax-loader');
if (loader) 
loader.classList.remove('d-none');



fetch(window.location.href, {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}).then(response => response.text()).then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const newContent = doc.getElementById('paiement-ajax-list-container');
if (newContent) {
container.outerHTML = newContent.outerHTML;
}
}).catch(error => console.error('Erreur AJAX:', error));
};

// Suppression AJAX
container.addEventListener('click', function (e) {
const btn = e.target.closest('.btn-ajax-delete-paiement');
if (! btn) 
return;



const ref = btn.getAttribute('data-ref');
const form = btn.closest('form');

if (confirm(`Supprimer définitivement le paiement ${ref} ?\nCette action est irréversible.`)) {
const loader = document.getElementById('paiement-ajax-loader');
if (loader) 
loader.classList.remove('d-none');



fetch(form.action, {
method: 'POST',
body: new FormData(form),
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}).then(response => {
if (response.ok) {
window.location.reload();
} else {
alert("Erreur lors de la suppression du paiement.");
if (loader) 
loader.classList.add('d-none');



}
}).catch(err => {
console.error(err);
if (loader) 
loader.classList.add('d-none');



});
}
});
})();
	</script>

	<style>
		.bg-success-light {
			background-color: rgba(28, 200, 138, 0.1);
		}
		.bg-warning-light {
			background-color: rgba(246, 194, 62, 0.1);
		}
		.bg-soft-info {
			background-color: rgba(54, 185, 204, 0.1);
		}
		.bg-soft-primary {
			background-color: rgba(78, 115, 223, 0.1);
		}
		.table-light {
			background-color: #f8f9fc !important;
			color: #4e73df !important;
			font-weight: 700;
		}
		.btn-group .btn {
			padding: 0.25rem 0.6rem;
		}
		.border-light-subtle {
			border-color: #eaecf4 !important;
		}
		.avatar-xs {
			height: 24px;
			width: 24px;
		}
	</style>
</div>