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

{% block title %}Reçu de Paiement #{{ paiement.id }}
{% endblock %}

{% block content %}
	{# --- BARRE D'ACTIONS ÉCRAN (Cachée à l'impression) --- #}
	<div class="container py-5 no-print">
		<div class="row justify-content-center">
			<div class="col-md-8 text-center mb-4">
				{% if show_success_alert %}
					<div class="alert alert-success shadow-sm border-0 animate__animated animate__fadeInDown">
						<i class="fas fa-check-circle fa-2x mb-2"></i>
						<h4 class="fw-bold">Paiement enregistré avec succès !</h4>
						<p class="mb-0">L'opération a été validée avec succès.</p>
					</div>
				{% endif %}

				<div class="d-flex justify-content-center gap-3 mt-3">
					<button onclick="window.print()" class="btn btn-dark px-4">
						<i class="fas fa-print me-2"></i>Imprimer le reçu
					</button>
					<a href="{{ path('app_admin_paiement_new') }}" class="btn btn-outline-primary">
						<i class="fas fa-plus me-2"></i>Nouvel encaissement
					</a>
					<a href="{{ path('app_admin_paiement_index') }}" class="btn btn-light border">
						Journal des paiements
					</a>
				</div>
			</div>
		</div>
	</div>

	{# --- ZONE D'IMPRESSION (Le Reçu) --- #}
	<div class="receipt-container">
		<div class="card border-0 shadow-none receipt-card">
			<div
				class="card-body p-5">

				{# En-tête du Reçu #}
				<div class="row mb-4">
					<div class="col-6">
						{% if ma_societe and ma_societe.logo %}
							<img src="{{ asset('uploads/entreprise/' ~ ma_societe.logo) }}" alt="{{ ma_societe.nom }}" class="logo-responsive" style="max-height: 40px; width: auto; max-width: 150px"/>
						{% else %}
							<img src="{{ asset('images/logo.png') }}" alt="LUXIM " class="logo-responsive" style="max-height: 40px; width:130px"/>
						{% endif %}
						<h3 class="fw-bold text-uppercase mb-0 mt-2">Reçu de Paiement</h3>
						<p class="text-muted mb-0">N° REF :
							<strong>{{ paiement.referenceTransaction ?: (paiement.moyenPaiement.value == 'ESPECES' ? 'ESP-' ~ paiement.id : 'REF-' ~ paiement.id) }}</strong>
						</p>
						<p class="small text-muted">Mode de paiement :
							<strong>{{ paiement.moyenPaiement.value }}</strong>
						</p>
					</div>
					<div class="col-6 text-end">
						<h5 class="fw-bold mb-0">Date :
							{{ paiement.datePaiement|date('d/m/Y') }}</h5>
						<p class="text-muted small">Heure :
							{{ paiement.datePaiement|date('H:i') }}</p>
					</div>
				</div>

				<hr
				class="my-4">

				{# Infos Client et Projet #}
				<div class="row mb-4">
					<div class="col-6">
						<p class="text-muted small text-uppercase mb-1">Client</p>
						<h6 class="fw-bold mb-0">{{ paiement.souscription.client.fullName }}
						</h6>
						<p class="text-muted small">{{ paiement.souscription.client.telephone }}</p>
					</div>
					<div class="col-6 text-end">
						<p class="text-muted small text-uppercase mb-1">Projet & Lot</p>
						<h6 class="fw-bold mb-0">{{ paiement.souscription.lot.projet.nom }}</h6>
						<p class="text-muted small">Lot N° :
							{{ paiement.souscription.lot.numeroLot }}</p>
					</div>
				</div>

				{# --- LOGIQUE D'AFFICHAGE SELON LE MODE DE FINANCEMENT --- #}
				<div class="table-responsive mb-4">
					<table class="table table-bordered align-middle">
						{% if paiement.souscription.modeFinancement.value == 'ECHEANCIER' %}
							{# AFFICHAGE VENTILATION DÉTAILLÉE #}
							<thead class="bg-light">
								<tr>
									<th class="small text-uppercase">Désignation Échéance</th>
									<th class="text-end small text-uppercase">Ancien Solde ( F.CFA )</th>
									<th class="text-end small text-uppercase">Montant Versé ( F.CFA )</th>
									<th class="text-end small text-uppercase">Nouveau Solde ( F.CFA )</th>
								</tr>
							</thead>
							<tbody>
								{% for item in paiement.ventilationData|default([]) %}
									<tr>
										<td>
											<span class="fw-bold">{{ item.libelle }}</span>
										</td>
										<td class="text-end text-muted">{{ item.ancien_solde|number_format(0, ',', ' ') }}
										</td>
										<td class="text-end fw-bold">{{ item.montant_verse|number_format(0, ',', ' ') }}
										</td>
										<td class="text-end {% if item.nouveau_solde == 0 %}text-success fw-bold{% endif %}">
											{{ item.nouveau_solde|number_format(0, ',', ' ') }}

										</td>
									</tr>
								{% else %}
									<tr>
										<td colspan="4" class="text-center text-muted py-3">Paiement enregistré sur le compte client.</td>
									</tr>
								{% endfor %}
							</tbody>
						{% else %}
							{# AFFICHAGE STANDARD (COMPTANT / AUTRE) #}
							<thead class="bg-light">
								<tr>
									<th class="small text-uppercase">Désignation du versement</th>
									<th class="text-end small text-uppercase">Montant ( F.CFA )</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td class="py-3">
										<span class="fw-bold text-uppercase">Versement pour acquisition immobilière</span><br>
										<small class="text-muted">Projet :
											{{ paiement.souscription.lot.projet.nom }}
											- Lot :
											{{ paiement.souscription.lot.numeroLot }}</small>
									</td>
									<td class="text-end fw-bold py-3" style="font-size: 1.1rem;">
										{{ paiement.montant|number_format(0, ',', ' ') }}

									</td>
								</tr>
							</tbody>
						{% endif %}

						<tfoot>
							<tr class="table-dark">
								<td class="fw-bold text-uppercase" {% if paiement.souscription.modeFinancement.value == 'ECHEANCIER' %} colspan="2" {% endif %}>Total Encaissé</td>
								<td class="text-end fw-bold" {% if paiement.souscription.modeFinancement.value == 'ECHEANCIER' %} colspan="2" {% endif %} style="font-size: 1.2rem;">
									{{ paiement.montant|number_format(0, ',', ' ') }}
									F.CFA
								</td>
							</tr>
						</tfoot>
					</table>
				</div>

				{# Zone de Signatures #}
				<div class="row mt-5 pt-3">
					<div class="col-6 text-center">
						<p class="small text-muted mb-4 text-uppercase fw-bold">Signature Client</p>
						<div style="height: 60px;"></div>
						<hr class="w-50 mx-auto">
					</div>
					<div class="col-6 text-center">
						<p class="small text-muted mb-4 text-uppercase fw-bold">Signature Caissier</p>
						<p class="small mb-0">({{ paiement.user.fullName|default('Gestionnaire') }})</p>
						<div style="height: 45px;"></div>
						<hr class="w-50 mx-auto">
					</div>
				</div>

				<div class="mt-5 text-center">
					<p class="text-muted small" style="font-size: 0.75rem;">
						Merci de votre confiance. Ce document tient lieu de preuve de paiement.<br>
						Généré par la plateforme LUXIM Côte d'Ivoire le
						{{ "now"|date('d/m/Y à H:i') }}.
					</p>
				</div>
			</div>
		</div>
	</div>

	<style>
		.receipt-container {
			max-width: 850px;
			margin: 0 auto;
			background: white;
			padding: 20px;
		}
		.receipt-card {
			border: 1px solid #ececec !important;
		}
		@media print {
			body * {
				visibility: hidden;
			}
			.receipt-container,
			.receipt-container * {
				visibility: visible;
			}
			.receipt-container {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				margin: 0;
				padding: 0;
			}
			.no-print {
				display: none !important;
			}
			.receipt-card {
				border: none !important;
			}
			.card-body {
				padding: 0 !important;
			}
			@page {
				size: A4;
				margin: 10mm;
			}
		}
	</style>

	{% if app.request.query.get('print') == 1 %}
		<script>
			window.onload = function () {
setTimeout(function () {
window.print();
}, 800);
};
		</script>
	{% endif %}
{% endblock %}