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

{% block title %}Mes souscriptions
{% endblock %}

{% block body %}
	<div class="container mt-4">
		<div class="row">
			<div class="col-12">
				<h1 class="mb-4"></h1>
				<h1 class="mb-4">
					<i class="fas fa-credit-card me-2"></i>
					Mes souscriptions
				</h1>

				{% if forfaitsWithPayments|length > 0 %}
					<div class="row">
						{% for data in forfaitsWithPayments %}
							{% set forfait = data.forfait %}
							{% set totalPaid = data.totalPaid %}
							{% set remaining = data.remaining %}
							{% set percentage = data.paymentPercentage %}
							{% set forfaitPayments = data.payments|default([]) %}

							<div class="col-md-6 col-lg-4 mb-4">
								<div class="card h-100 shadow-sm">
									<div class="card-header d-flex justify-content-between align-items-center">
										<h5 class="card-title mb-0">
											{{ forfait.nom }}
										</h5>
										<span class="badge bg-primary">
											{{ forfait.prix|number_format(2, ',', ' ') }}
											€
										</span>
									</div>

									<div
										class="card-body">
										<!-- Payment Progress -->
										<div class="mb-3">
											<div class="d-flex justify-content-between align-items-center mb-2">
												<small class="text-muted">Progression du paiement</small>
												<small class="text-muted">{{ percentage|round(1) }}%</small>
											</div>
											<div class="progress" style="height: 8px;">
												<div class="progress-bar
																																																																	                                                {% if percentage >= 100 %}bg-success
																																																																	                                                {% elseif percentage >= 75 %}bg-info
																																																																	                                                {% elseif percentage >= 50 %}bg-warning
																																																																	                                                {% else %}bg-danger
																																																																	                                                {% endif %}" role="progressbar" style="width: {{ percentage|round(1) }}%" aria-valuenow="{{ percentage|round(1) }}" aria-valuemin="0" aria-valuemax="100"></div>
											</div>
										</div>

										<!-- Payment Details -->
										<div class="row text-center">
											<div class="col-4">
												<div class="border-end">
													<h6 class="text-success mb-0">{{ totalPaid|number_format(2, ',', ' ') }}
														€</h6>
													<small class="text-muted">Payé</small>
												</div>
											</div>
											<div class="col-4">
												<div class="border-end">
													<h6 class="mb-0 {% if remaining > 0 %}text-warning{% else %}text-success{% endif %}">
														{{ remaining|number_format(2, ',', ' ') }}
														€
													</h6>
													<small class="text-muted">Restant</small>
												</div>
											</div>
											<div class="col-4">
												<h6 class="text-primary mb-0">{{ forfaitPayments|length }}</h6>
												<small class="text-muted">Paiements</small>
											</div>
										</div>

										<!-- Payment Status Badge -->
										<div class="mt-3 text-center">
											{% if remaining <= 0 %}
												<span class="badge bg-success">
													<i class="fas fa-check-circle me-1"></i>
													Complet
												</span>
											{% elseif percentage >= 50 %}
												<span class="badge bg-warning">
													<i class="fas fa-clock me-1"></i>
													Partiellement payé
												</span>
											{% else %}
												<span class="badge bg-danger">
													<i class="fas fa-exclamation-triangle me-1"></i>
													Non payé
												</span>
											{% endif %}
										</div>
									</div>
									{% if forfait.onlinePayLink is not empty %}
										<a href="{{ forfait.onlinePayLink }}" target="_blank">
											<button class="btn btn-outline-primary btn-sm w-100" type="button">
												<i class="fas fa-credit-card me-1"></i>
												Payer en ligne
											</button>
										</a>
									{% else %}
										<button class="btn btn-danger btn-sm w-100" type="button" disabled>
											<i class="fas fa-credit-card me-1"></i>
											Paiement en ligne non disponible
										</button>
									{% endif %}

									<!-- Payment Details (Collapsible) -->
									{% if forfaitPayments|length > 0 %}
										<div class="card-footer">
											<button class="btn btn-outline-secondary btn-sm w-100" type="button" data-bs-toggle="collapse" data-bs-target="#payments-{{ forfait.id }}" aria-expanded="false" aria-controls="payments-{{ forfait.id }}">
												<i class="fas fa-list me-1"></i>
												Détails des paiements
											</button>
											<div class="collapse mt-2" id="payments-{{ forfait.id }}">
												<div class="list-group list-group-flush">
													{% for payment in forfaitPayments %}
														<div class="list-group-item d-flex justify-content-between align-items-center py-2">
															<div>
																<small class="text-muted">{{ payment.type }}</small>
															</div>
															<div class="text-end">
																{% if payment.forfaits|length > 1 %}
																	<div>
																		<span class="badge bg-success">{{ totalPaid|number_format(2, ',', ' ') }}
																			€</span>
																		<br><small class="text-muted">{{ payment.valeur|number_format(2, ',', ' ') }}
																			€ partagé</small>
																	</div>
																{% else %}
																	<span class="badge bg-success">{{ payment.valeur|number_format(2, ',', ' ') }}
																		€</span>
																{% endif %}
															</div>
														</div>
													{% endfor %}
												</div>
											</div>
										</div>
									{% endif %}
								</div>
							</div>
						{% endfor %}
					</div>

					<!-- Summary -->
					<div class="row mt-4">
						<div class="col-12">
							<div class="alert alert-danger">
								<h5 class="alert-heading">
									<i class="fas fa-exclamation-triangle me-2"></i>
									Attention
								</h5>

								<div class="row">
								Une fois vos paiements effectués, ils doivent être validés manuellement par un administrateur. Seulement alors seront-ils indiqués comme payés sur cette page ! Ce procédé étant manuel, il peut prendre un petit peu de temps.
								</div>
							</div>
						</div>
					</div>

					<!-- Summary -->
					<div class="row mt-4">
						<div class="col-12">
							<div class="alert alert-info">
								<h5 class="alert-heading">
									<i class="fas fa-chart-line me-2"></i>
									Résumé
								</h5>
								{% set totalForfaits = forfaitsWithPayments|length %}
								{% set totalValue = 0 %}
								{% set totalPaidGlobal = 0 %}
								{% set soldedCount = 0 %}

								{% for data in forfaitsWithPayments %}
									{% set totalValue = totalValue + data.forfait.prix %}
									{% set totalPaidGlobal = totalPaidGlobal + data.totalPaid %}
									{% if data.remaining <= 0 %}
										{% set soldedCount = soldedCount + 1 %}
									{% endif %}
								{% endfor %}

								<div class="row">
									<div class="col-md-3">
										<strong>{{ totalForfaits }}</strong>
										forfaits actifs
									</div>
									<div class="col-md-3">
										<strong>{{ soldedCount }}</strong>
										forfaits soldés
									</div>
									<div class="col-md-3">
										<strong>{{ totalPaidGlobal|number_format(2, ',', ' ') }}
											€</strong>
										payés au total
									</div>
									<div class="col-md-3">
										<strong>{{ (totalValue - totalPaidGlobal)|number_format(2, ',', ' ') }}
											€</strong>
										restants
									</div>
								</div>
							</div>
						</div>
					</div>
				{% else %}
					<div class="alert alert-info text-center">
						<i class="fas fa-info-circle fa-3x mb-3 text-muted"></i>
						<h4>Aucun forfait actif</h4>
						<p class="mb-0">Vous n'avez actuellement aucun forfait actif.</p>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
		.card {
			transition: transform 0.2s ease-in-out;
		}
		.card:hover {
			transform: translateY(-2px);
		}
		.progress {
			border-radius: 10px;
		}
		.progress-bar {
			border-radius: 10px;
		}
	</style>
{% endblock %}