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

{% block title %}Transformer Bon #{{ bon.referenceBon }}
{% endblock %}

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

				<div class=" text-center mb-4">

					<a href="javascript:history.back()" class="btn btn-outline-primary">
						<i class="fas fa-arrow-left me-2"></i>Retour
					</a>
				</div>
				<div class="card shadow-sm border-0">
					<div class="card-header bg-primary text-white py-3">
						<h5 class="mb-0">
							<i class="fas fa-exchange-alt me-2"></i>
							Transformation du Bon en Paiement Réel</h5>
					</div>
					<div class="card-body p-4">
						<div class="row mb-4">
							<div class="col-md-6">
								<p class="text-muted small text-uppercase mb-1">Référence du Bon</p>
								<h5 class="fw-bold">{{ bon.referenceBon }}</h5>
								<p class="small">Émis le :
									{{ bon.createdAt|date('d/m/Y H:i') }}
									<br/>par
									{{ bon.user.fullName|default('Agent') }}</p>
							</div>
							<div class="col-md-6 text-md-end">
								<p class="text-muted small text-uppercase mb-1">Montant à encaisser</p>
								<h3 class="text-primary fw-bold">{{ paiement.montant|number_format(0, ',', ' ') }}
									F.CFA</h3>
							</div>
						</div>

						<div class="bg-light p-3 rounded mb-4">
							<h6 class="fw-bold border-bottom pb-2">Informations Client & Projet</h6>
							<div class="row pt-2">
								<div class="col-sm-6">
									<p class="mb-1">
										<strong>Client :</strong>
										{{ paiement.souscription.client.fullName }}</p>
									<p class="mb-0 small text-muted">{{ paiement.souscription.client.telephone }}</p>
								</div>
								<div class="col-sm-6 text-sm-end">
									<p class="mb-1">
										<strong>Projet :</strong>
										{{ paiement.souscription.lot.projet.nom }}</p>
									<p class="mb-0 small text-muted">Lot :
										{{ paiement.souscription.lot.numeroLot }}</p>
								</div>
							</div>
						</div>

						<div class="alert alert-warning border-0 shadow-sm">
							<div class="d-flex">
								<i class="fas fa-info-circle fa-2x me-3"></i>
								<div>
									<h6 class="fw-bold">Action irréversible</h6>
									<p class="mb-0 small">En cliquant sur "Valider l'encaissement", le système va ventiler automatiquement les
										<strong>{{ paiement.montant|number_format(0, ',', ' ') }}
											F.CFA</strong>
										sur les échéances les plus anciennes du client.</p>
								</div>
							</div>
						</div>

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

							<form method="post" onsubmit="return confirm('Confirmez-vous la réception effective des fonds ?');">
								<button type="submit" class="btn btn-success btn-lg px-5">
									<i class="fas fa-check-double me-2"></i>Valider l'encaissement
								</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}