{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Validation Paiement #{{ paiement.id }}
{% endblock %}

{% block content %}
	<div class="container py-5">
		<div class="row justify-content-center">
			<div class="col-md-8">

				<div class="text-center mb-4">
					<a href="{{ path('app_admin_paiement_index') }}" class="btn btn-outline-primary">
						<i class="fas fa-arrow-left me-2"></i>Retour à la liste
					</a>
				</div>

				<div class="card shadow-sm border-0">
					<div class="card-header bg-warning text-dark fw-bold py-3">
						<i class="fas fa-exclamation-triangle me-2"></i>
						Validation d'un paiement en attente
					</div>
					<div class="card-body p-4">
						<h4 class="mb-4 border-bottom pb-2">Détails de la transaction</h4>

						<div class="row mb-3">
							<div class="col-6">
								<label class="text-muted small text-uppercase">Client</label>
								<p class="fw-bold mb-0">{{ paiement.souscription.client.fullName }}</p>
								<p class="small text-muted">{{ paiement.souscription.lot.projet.nom }}
									- Lot
									{{ paiement.souscription.lot.numeroLot }}</p>
							</div>
							<div class="col-6 text-end">
								<label class="text-muted small text-uppercase">Montant à valider</label>
								<h4 class="text-primary fw-bold">{{ paiement.montant|number_format(0, ',', ' ') }}
									F.CFA</h4>
							</div>
						</div>

						<div class="row mb-4">
							<div class="col-6">
								<label class="text-muted small text-uppercase">Référence</label>
								<p class="fw-bold">{{ paiement.referenceTransaction ?: (paiement.bon ? paiement.bon.referenceBon : 'Génération auto à la validation') }}</p>
							</div>
							<div class="col-6 text-end">
								<label class="text-muted small text-uppercase">Mode de règlement</label>
								<p>
									<span class="badge bg-info text-white px-3">{{ paiement.moyenPaiement.value }}</span>
								</p>
							</div>
						</div>

						{# --- SECTION PREUVE DE PAIEMENT --- #}
						<div class="bg-light rounded p-3 mb-4 border">
							<h6 class="fw-bold mb-3">
								<i class="fas fa-paperclip me-2"></i>Justificatif de paiement</h6>

							{% if preuve %}
								<div class="text-center">
									{% if preuve.typeMedia == 'IMAGE' %}
										<div class="position-relative d-inline-block">
											<a href="{{ asset('uploads/documents/' ~ preuve.fichierUrl) }}" target="_blank">
												<img src="{{ asset('uploads/documents/' ~ preuve.fichierUrl) }}" class="img-fluid rounded shadow-sm border" style="max-height: 250px; cursor: zoom-in;" alt="Preuve de paiement">
											</a>
										</div>
									{% else %}
										<div class="py-3">
											<i class="fas fa-file-pdf fa-3x text-danger mb-2"></i>
											<p class="small mb-2">{{ preuve.nomDocument }}</p>
										</div>
									{% endif %}

									<div class="mt-3">
										<a href="{{ asset('uploads/documents/' ~ preuve.fichierUrl) }}" target="_blank" class="btn btn-sm btn-outline-secondary">
											<i class="fas fa-eye me-1"></i>
											Voir le document complet
										</a>
									</div>
								</div>
							{% else %}
								<div class="text-center py-3 text-muted">
									<i class="fas fa-info-circle me-1"></i>
									Aucun document joint
								</div>
							{% endif %}
						</div>
						{# --- FIN SECTION PREUVE --- #}

						<div class="alert alert-info border-0 shadow-sm">
							<div class="d-flex">
								<i class="fas fa-info-circle fa-2x me-3"></i>
								<div>
									<h6 class="fw-bold mb-1">Confirmation requise</h6>
									<p class="mb-0 small">
										En cliquant sur le bouton ci-dessous, vous confirmez avoir reçu les fonds. 
										                                        Le compte du client sera crédité et les échéances seront mises à jour.
									</p>
								</div>
							</div>
						</div>

						<div class="d-flex justify-content-between mt-5">
							<a href="{{ path('app_admin_paiement_index') }}" class="btn btn-light border">
								<i class="fas fa-times me-2"></i>Annuler
							</a>

							<form method="post" onsubmit="return confirm('Voulez-vous vraiment valider cet encaissement ? Cette action est irréversible.');">
								<button type="submit" class="btn btn-success btn-lg px-5 shadow">
									<i class="fas fa-check-circle me-2"></i>Confirmer la validation
								</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}