{% extends 'base.html.twig' %}

{% block head %}
	{{ parent() }}
	<style>
		@media print {
			body * {
				visibility: hidden;
			}
			.print-card-body,
			.print-card-body * {
				visibility: visible;
			}
			.print-card-body {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
			}
			.admin-notice,
			.print-button,
			.navbar,
			.footer {
				display: none !important;
			}
		}

		.receipt-header {
			border-bottom: 2px solid #4f81bd;
			margin-bottom: 1.5rem;
			padding-bottom: 1rem;
		}

		.receipt-logo {
			max-width: 180px;
			height: auto;
		}

		.receipt-table th {
			background-color: #f8f9fa;
		}

		.receipt-footer {
			margin-top: 2rem;
			padding-top: 1rem;
			border-top: 1px solid #dee2e6;
			font-size: 0.9rem;
		}

		.receipt-stamp {
			font-weight: bold;
			color: #4f81bd;
			border: 2px solid #4f81bd;
			border-radius: 8px;
			padding: 0.5rem 1rem;
			display: inline-block;
			transform: rotate(-5deg);
			margin-top: 1rem;
		}
	</style>
{% endblock %}

{% block title %}
	{{ parent() }}
{% endblock %}

{% block header %}
	{{ parent() }}
{% endblock %}

{% block body %}
	<div class="container py-5">
		{% if is_granted('ROLE_ADMIN') %}
			<div class="admin-notice card mb-4 shadow-sm">
				<div class="card-header">
					<h5 class="mb-0">
						<i class="fas fa-user-shield me-2"></i>
						Administration</h5>
				</div>
				<div class="card-body">
					<form id="userSelectForm" class="row g-3 align-items-center">
						<div class="col-md-8">
							<label for="userId" class="form-label">Changer d'utilisateur</label>
							<select class="form-select" id="userId" onchange="redirectToUser()">
								<option value="">Choisir un utilisateur</option>
								{% for userOption in allUsers %}
									<option value="{{ userOption.id }}" {% if user.id == userOption.id %} selected {% endif %}>
										{{ userOption.prenom }}
										{{ userOption.nom }}
									</option>
								{% endfor %}
							</select>
						</div>
					</form>
				</div>
			</div>
		{% endif %}

		<div class="row justify-content-center">
			<div class="col-lg-10">
				<div class="card shadow mb-4">
					<div class="card-body print-card-body">
						<div class="receipt-header row">
							<div class="col-md-4">
								<h5 class="fw-bold">EOLIA NORMANDIE</h5>
								<h6>CPNOB</h6>
								<address class="mb-0">
									Base Eolia Normandie<br>
									Le Cavey<br>
									14710 COLLEVILLES SUR MER<br>
									<i class="fas fa-phone-alt me-2 text-eolia"></i>
									02.31.22.26.21<br>
									<i class="fas fa-envelope me-2 text-eolia"></i>
									eolia-normandie@wanadoo.fr
								</address>
							</div>
							<div class="col-md-4 text-center">
								<img src="{{ asset('img/eolia-logo-integral.png') }}" alt="Logo" class="receipt-logo">
							</div>
							<div class="col-md-4 text-end">
								<h5 class="fw-bold">REÇU DE PAIEMENT</h5>
								<p class="mb-1">N°
									{{ user.id }}-{{ now|date('Ymd') }}</p>
								<p class="mb-1">
									<strong>Client:</strong>
									{{ user.prenom ~ ' ' ~ user.nom }}</p>
								<p class="mb-0">
									<strong>Date:</strong>
									{{ now|date('d/m/Y') }}</p>
								<p class="mb-0">
									<strong>Paiement:</strong>
									{{ user.methodePayement ? user.methodePayement : 'Non indiqué' }}</p>
							</div>
						</div>

						<div class="table-responsive">
							<table class="table table-bordered receipt-table">
								<thead>
									<tr class="bg-eolia">
										<th width="10%">N°</th>
										<th width="70%">Désignation</th>
										<th width="20%">Prix</th>
									</tr>
								</thead>
								<tbody>
									{% set itemNumber = 1 %}
									{% set totalAmount = 0 %}

									{# Display each forfait in separate rows #}
									{% for forfait in user.forfaits %}
										{% if forfait.archive == false %}
											<tr>
												<td class="text-center">{{ '%03d'|format(itemNumber) }}</td>
												<td>
													{{ forfait.nom }}</td>
												<td class="text-end">{{ forfait.prix|number_format(2, ',', ' ') }}
													€</td>
											</tr>
											{% set itemNumber = itemNumber + 1 %}
											{% set totalAmount = totalAmount + forfait.prix %}
										{% endif %}
									{% endfor %}

									{# Total row #}
									<tr class="table-secondary">
										<td colspan="2" class="text-end fw-bold">Total</td>
										<td class="text-end fw-bold">{{ totalAmount|number_format(2, ',', ' ') }}
											€</td>
									</tr>
								</tbody>
							</table>
						</div>

						<div class="row mt-4">
							<div class="col-md-8">
								<div class="receipt-footer">
									<p class="mb-1">
										<strong>Informations de paiement</strong>
									</p>
									<p class="mb-1">Ce reçu confirme le paiement de votre cotisation et forfait pour la saison en cours.</p>
									<p class="mb-0">Pour toute question concernant ce reçu, veuillez contacter notre secrétariat.</p>
								</div>
							</div>
							<div class="col-md-4 text-end">
								<div class="receipt-stamp">
									PAYÉ<br>
									<small>{{ now|date('d/m/Y') }}</small>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="text-center print-button">
					<a href="{{ path('club') }}" class="btn btn-outline-secondary ms-2">
						<i class="fas fa-arrow-left me-2"></i>
						Retour à la liste des séances
					</a>
					<button onclick="window.print();" class="btn blue text-white">
						<i class="fas fa-print me-2"></i>
						Imprimer le reçu
					</button>
				</div>
			</div>
		</div>
	</div>

	<script>
		function redirectToUser() {
const userId = document.getElementById('userId').value;
if (userId) {
window.location.href = '{{ path('consulterRecuPayement', {'id': 'USER_ID'}) }}'.replace('USER_ID', userId);
}
}
	</script>
{% endblock %}

{% block footer %}
	{{ parent() }}
{% endblock %}