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

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

{% block header %}
	{{ parent() }}
{% endblock %}
{% block body %}
	<div class="container-fluid py-4">
		<div class="container">
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb mb-0">
					<li class="breadcrumb-item">
						<a href="{{ path('club') }}">Séances</a>
					</li>
					<li class="breadcrumb-item active" aria-current="page">Séance n°{{ seance.id }}</li>
				</ol>
			</nav>
		</div>
	</div>
	<section class="tables py-5">
		<div class="container">
			<div class="row gy-4 justify-content-center">
				<div class="col-lg-10">
					<div class="card mb-0 shadow">
						<div class="card-header bg-eolia text-white">
							<h3 class="h4 mb-0">{{ seance.sport.nom }}
								-
								{{ seance.typePratique.nom }}</h3>
						</div>
						<div class="card-body pt-4">
							<div class="row mb-4">
								<div class="col-md-6">
									<div class="d-flex align-items-center mb-3">
										<i class="fas fa-calendar-alt fa-2x me-3 text-eolia"></i>
										<div>
											<h5 class="mb-0 fw-bold">Date</h5>
											<p class="mb-0">{{ seance.dateSeance|date("d/m/Y") }}</p>
										</div>
									</div>
									<div class="d-flex align-items-center mb-3">
										<i class="fas fa-map-marker-alt fa-2x me-3 text-eolia"></i>
										<div>
											<h5 class="mb-0 fw-bold">Lieu</h5>
											<p class="mb-0">{{ seance.lieu }}</p>
										</div>
									</div>
									{% if seance.allure is defined and seance.allure != 'Non renseignée' and seance.allure is not empty %}
									<div class="d-flex align-items-center mb-3">
										<i class="fas fa-tachometer-alt fa-2x me-3 text-eolia"></i>
										<div>
											<h5 class="mb-0 fw-bold">Allure</h5>
											<p class="mb-0">{{ seance.allure }}</p>
										</div>
									</div>
									{% endif %}
								</div>
								<div class="col-md-6">
									<div class="d-flex align-items-center mb-3">
										<i class="fas fa-clock fa-2x me-3 text-eolia"></i>
										<div>
											<h5 class="mb-0 fw-bold">Horaires</h5>
											<p class="mb-0">{{ seance.heureDebut|date('H:i') }}
												-
												{{ seance.heureFin|date('H:i') }}</p>
										</div>
									</div>
									<div class="d-flex align-items-center mb-3">
										<i class="fas fa-users fa-2x me-3 text-eolia"></i>
										<div>
											<h5 class="mb-0 fw-bold">Participants</h5>
											<p class="mb-0">{{ placesPrises ~ '/' ~ seance.placesTotales }}</p>
										</div>
									</div>
									{% if seance.distance is defined and seance.distance != 'Non renseignée' and seance.distance is not empty %}
									<div class="d-flex align-items-center mb-3">
										<i class="fas fa-route fa-2x me-3 text-eolia"></i>
										<div>
											<h5 class="mb-0 fw-bold">Distance</h5>
											<p class="mb-0">{{ seance.distance }}</p>
										</div>
									</div>
									{% endif %}
								</div>
							</div>

							<div class="card mb-4 bg-light">
								<div class="card-body">
									<h5 class="fw-bold mb-3">
										<i class="fas fa-user-tie me-2"></i>
										Directeur de séance</h5>
									<p class="mb-0">
										{% if seance.directeurSeance is not null %}
											{{ seance.directeurSeance.prenom ~ ' ' ~ seance.directeurSeance.nom ~ ' (' ~ seance.directeurSeance.telephone ~ ')' }}
										{% else %}
											<span class="text-muted">Non défini</span>
										{% endif %}
									</p>
								</div>
							</div>

							<div class="card mb-4 bg-light">
								<div class="card-body">
									<h5 class="fw-bold mb-3">
										<i class="fas fa-life-ring me-2"></i>
										Accompagnateurs</h5>
									<p class="mb-0">
										{% for utilisateurSeance in seance.utilisateurSeances %}
											{% if utilisateurSeance.encadrant == true %}
												{% if loop.last %}
													{{ utilisateurSeance.user.prenom ~ " " ~ utilisateurSeance.user.nom }}
												{% else %}
													{{ utilisateurSeance.user.prenom ~ " " ~ utilisateurSeance.user.nom ~ ", " }}
												{% endif %}
											{% endif %}
										{% else %}
											<span class="text-muted">Pas d'accompagnateurs</span>
										{% endfor %}
									</p>
								</div>
							</div>

							{% if not seance.textLibre == '' %}
								<div class="card mb-4 bg-light">
									<div class="card-body">
										<h5 class="fw-bold mb-3">
											<i class="fas fa-comment-alt me-2"></i>
											Message du directeur de séance</h5>
										<div class="p-3 bg-white rounded">
											{{ seance.textLibre|raw }}
										</div>
									</div>
								</div>
							{% endif %}

							<div class="card mb-4">
								<div class="card-header bg-eolia text-white">
									<h5 class="mb-0">
										<i class="fas fa-users me-2"></i>
										Participants</h5>
								</div>
								<div class="card-body p-0">
									<div class="table-responsive">
										<table class="table mb-0 table-striped table-hover">
											<thead class="bg-light">
												<tr>
													<th>Prénom</th>
													<th>Nom</th>
													{% if is_granted("ROLE_ENCADRANT") %}
														<th>Email</th>
														<th>Téléphone</th>
													{% endif %}
												</tr>
											</thead>
											<tbody>
												{% set hasParticipants = false %}
												{% for utilisateurSeance in seance.utilisateurSeances %}
													{% if utilisateurSeance.encadrant == false %}
														{% set hasParticipants = true %}
														<tr>
															<td>{{ utilisateurSeance.user.prenom }}</td>
															<td>{{ utilisateurSeance.user.nom }}</td>
															{% if is_granted("ROLE_ENCADRANT") %}
																<td>{{ utilisateurSeance.user.mail }}</td>
																<td>{{ utilisateurSeance.user.telephone }}</td>
															{% endif %}
														</tr>
													{% endif %}
												{% endfor %}
												{% if not hasParticipants %}
													<tr>
														<td colspan="{% if is_granted('ROLE_ENCADRANT') %}4{% else %}2{% endif %}" class="text-center text-muted py-3">
															Pas de participants
														</td>
													</tr>
												{% endif %}
											</tbody>
										</table>
									</div>
								</div>
							</div>

							<div
								class="d-flex flex-wrap gap-2 justify-content-center">
								<div class="btn-group me-2 mb-2">
									{% if placesPrises < seance.placesTotales %}
										<a href="{{ path('clubAjouterParticipant', { 'id': seance.id }) }}" class="btn blue text-white">
											<i class="fas fa-user-plus me-2"></i>
											S'inscrire à la séance
										</a>
									{% endif %}
									<a href="{{ path('clubSupprimerParticipant', { 'id': seance.id }) }}" class="btn btn-outline-danger">
										<i class="fas fa-user-minus me-2"></i>
										Annuler son inscription
									</a>
								</div>

								{% if is_granted("ROLE_ENCADRANT") %}
									<div class="btn-group me-2 mb-2">
										<a href="{{ path('clubAjouterEncadrant', { 'id': seance.id }) }}" class="btn btn-outline-primary">
											<i class="fas fa-life-ring me-2"></i>
											S'inscrire (accompagnateur)
										</a>

										{% if is_granted("ROLE_ADMIN") %}
											<a href="{{ path('clubAjouterInvite', { 'id': seance.id }) }}" class="btn btn-outline-success">
												<i class="fas fa-user-tag me-2"></i>
												Ajouter un invité
											</a>
										{% endif %}
									</div>
								{% endif %}

								{% if isDirecteurSeance is defined %}
									<div class="btn-group me-2 mb-2">
										<a href="{{ path('clubModifier', { 'id': seance.id }) }}" class="btn btn-outline-warning">
											<i class="fas fa-edit me-2"></i>
											Modifier la séance
										</a>
										<a href="{{ path('clubSupprimer', { 'id': seance.id }) }}" onclick="return confirm('Êtes vous sûr de vouloir supprimer');" class="btn btn-outline-danger">
											<i class="fas fa-trash-alt me-2"></i>
											Supprimer la séance
										</a>
									</div>

									{% set emails = [] %}
									{% for utilisateurSeance in seance.utilisateurSeances %}
										{% if utilisateurSeance.user is not null and utilisateurSeance.user.mail is defined and utilisateurSeance.user.mail is not empty %}
											{% set emails = emails|merge([utilisateurSeance.user.mail]) %}
										{% endif %}
									{% endfor %}

									<div class="btn-group mb-2">
										{% if emails|length > 0 %}
											<button type="button" class="btn btn-outline-info" data-bs-toggle="modal" data-bs-target="#emailModal">
												<i class="fas fa-envelope me-2"></i>
												Envoyer un mail aux inscrits ({{ emails|length }})
											</button>
										{% else %}
											<button class="btn btn-outline-secondary" disabled>
												<i class="fas fa-envelope me-2"></i>
												Aucun inscrit
											</button>
										{% endif %}
									</div>
								{% endif %}
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	{% if emails is defined and emails|length > 0 %}
		<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="emailModalLabel">Envoyer un email aux inscrits</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<form id="emailForm" action="{{ path('sendMailSeance') }}" method="post">
							<input type="hidden" name="recipients" value="{{ emails|join(',') }}">
							<input type="hidden" name="returnUrl" value="{{ app.request.uri }}">
							<div class="mb-3">
								<label for="subject" class="form-label">Sujet</label>
								<input type="text" class="form-control" id="subject" name="subject" required>
							</div>
							<div class="mb-3">
								<label for="message" class="form-label">Message</label>
								<textarea class="form-control" id="message" name="message" rows="5" required></textarea>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
								<button type="submit" class="btn blue text-white">Envoyer</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	{% endif %}

	{% if mauvaisPack is defined %}
		<script>
			function accountNotValidated() {
Swal.fire({
icon: "error",
title: "Inscription impossible",
text: "Votre pack n'inclut pas ce sport",
allowOutsideClick: false,
confirmButtonText: 'Ok'
}).then((result) => {
if (result.isConfirmed) {
window.history.back();
}
});
}
window.onload = accountNotValidated;
		</script>
	{% endif %}

	{% if showInviteForm is defined and showInviteForm %}
		<div class="row mt-4">
			<div class="col-lg-10 mx-auto">
				<div class="card shadow">
					<div class="card-header bg-success text-white">
						<h4 class="mb-0">
							<i class="fas fa-user-plus me-2"></i>
							Ajouter un invité</h4>
					</div>
					<div class="card-body">
						{{ form_start(inviteForm) }}
						<div class="row">
							<div class="col-md-6 mb-3">
								{{ form_row(inviteForm.nom, {'attr': {'class': 'form-control'}}) }}
							</div>
							<div class="col-md-6 mb-3">
								{{ form_row(inviteForm.prenom, {'attr': {'class': 'form-control'}}) }}
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 mb-3">
								{{ form_row(inviteForm.mail, {'attr': {'class': 'form-control'}}) }}
							</div>
							<div class="col-md-6 mb-3">
								{{ form_row(inviteForm.telephone, {'attr': {'class': 'form-control'}}) }}
							</div>
						</div>
						<div class="d-flex justify-content-end">
							<a href="{{ path('clubConsulter', {'id': seance.id}) }}" class="btn btn-secondary me-2">Annuler</a>
							<button type="submit" class="btn btn-success">Ajouter l'invité</button>
						</div>
						{{ form_end(inviteForm) }}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
{% endblock %}
{% block footer %}
	{{ parent() }}
{% endblock %}