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

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

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

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

{% block body %}
	<div class="container py-5">
		<div class="row">
			<div class="col-lg-9">
				{% if is_granted("ROLE_ENCADRANT") %}
					<div class="d-flex justify-content-start mb-4">
						<a href="{{ path('clubAjouter') }}" class="btn blue text-white">
							<i class="fas fa-plus-circle me-2"></i>
							Ajouter une séance
						</a>
					</div>
				{% endif %}
				<div class="card shadow-sm mb-4">
					<div class="card-header bg-eolia text-white py-3">
						<h4 class="mb-0">
							<i class="fas fa-calendar-alt me-2"></i>
							Prochaines séances</h4>
					</div>
					<div class="card-body p-0">
						<div class="pagination-wrapper p-3 bg-light border-bottom">
							{{ knp_pagination_render(pagination, '@KnpPaginator/Pagination/bootstrap_v5_pagination.html.twig', {}, { 'sport': app.request.query.get('sport') }) }}
						</div>
						<ul class="list-group list-group-flush no-bullets">
							{% for seance in pagination %}
								<li class="list-group-item p-0 {% if seance.etat == 'Séance annulée' %}seance-annule-visible{% endif %}">
									{% if seance.etat == 'Séance annulée' %}
										<div class="p-3">
										{% elseif seance.etat == 'Vigilance' %}
											<a href="{{ path('clubConsulter', { 'id': seance.id }) }}" class="seance-vigilance d-block p-3">
											{% else %}
												<a href="{{ path('clubConsulter', { 'id': seance.id }) }}" class="seance-ok d-block p-3">
												{% endif %}
												<div class="row align-items-center">
													<div class="col-lg-4 text-center">
														<img src="{{ asset('uploads/icone/' ~ seance.sport.icone) }}" class="img-fluid-accueil rounded shadow-sm" alt="icone de {{ seance.sport.nom }}">
													</div>
													<div class="col-lg-8">
														<h5 class="mb-2 fw-bold">
															{{ seance.sport.nom }}
															- Groupe
															{{ seance.typePratique.nom }}
															{% if seance.etat == 'Séance annulée' %}
																<span class="badge bg-danger ms-2">Annulée</span>
															{% elseif seance.etat == 'Vigilance' %}
																<span class="badge bg-warning text-dark ms-2">Vigilance</span>
															{% endif %}
														</h5>
														<div class="mb-1">
															<i class="fas fa-calendar-day me-2 text-eolia"></i>
															<strong>Date:</strong>
															{{ seance.dateSeance|date('d/m/Y') }}
														</div>
														<div class="mb-1">
															<i class="fas fa-clock me-2 text-eolia"></i>
															<strong>Horaires:</strong>
															{{ seance.heureDebut|date('H:i') }}
															-
															{{ seance.heureFin|date('H:i') }}
														</div>
														<div class="mb-1">
															<i class="fas fa-user-tie me-2 text-eolia"></i>
															<strong>Animateur:</strong>
															{% if seance.directeurSeance is not null %}
																{{ seance.directeurSeance.prenom ~ ' ' ~ seance.directeurSeance.nom }}
															{% else %}
																<span class="text-muted">Non défini</span>
															{% endif %}
														</div>
														<div class="mb-1">
															<i class="fas fa-users me-2 text-eolia"></i>
															<strong>Participants:</strong>
															{{ placesPrises[seance.id] ?? 0 ~ '/' ~ seance.placesTotales }}
														</div>
														<div class="mb-1">
															<i class="fas fa-map-marker-alt me-2 text-eolia"></i>
															<strong>Lieu:</strong>
															{{ seance.lieu }}
														</div>
														{% if not seance.textLibre == '' %}
															<div class="mb-1 bg-light rounded">
																<i class="fas fa-comment-alt me-2 text-eolia"></i>
																<strong>Message:</strong>
																{{ seance.textLibre|length > 100 ? seance.textLibre|slice(0, 100)|striptags ~ '...' : seance.textLibre|striptags }}
															</div>
														{% endif %}
													</div>
												</div>

												{% if seance.etat == 'Séance annulée' %}
												</div>
										{% elseif seance.etat == 'Vigilance' %}
											</a>
									{% else %}
										</a>
									{% endif %}

									{% if is_granted("ROLE_ENCADRANT") %}
										<div class="p-3 bg-light border-top d-flex gap-2">
											<a href="{{ path('clubModifier', { 'id': seance.id }) }}" class="btn btn-sm btn-outline-primary">
												<i class="fas fa-edit me-1"></i>
												Modifier
											</a>
											<a href="{{ path('clubSupprimer', { 'id': seance.id }) }}" onclick="return confirm('Êtes vous sûr de vouloir supprimer');" class="btn btn-sm btn-outline-danger">
												<i class="fas fa-trash-alt me-1"></i>
												Supprimer
											</a>
										</div>
									{% endif %}
								</li>
							{% else %}
								<li class="list-group-item py-4 text-center">
									<p class="text-muted mb-0">Aucune séance programmée pour le moment</p>
								</li>
							{% endfor %}
						</ul>

						{% if pagination.getTotalItemCount > 0 %}
							<div class="pagination-wrapper p-3 bg-light border-bottom">
								{{ knp_pagination_render(pagination, '@KnpPaginator/Pagination/bootstrap_v5_pagination.html.twig', {}, { 'sport': app.request.query.get('sport') }) }}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="card shadow-sm mb-4">
					<div class="card-header bg-eolia text-white py-3">
						<h5 class="mb-0">
							<i class="fas fa-filter me-2"></i>
							Filtrer</h5>
					</div>
					<div class="card-body">
						{{ form_start(filterForm, {'attr': {'class': 'filter-form'}, 'method': 'GET'}) }}
						<div class="mb-3">
							{{ form_label(filterForm.sport, 'Sports', {'label_attr': {'class': 'form-label fw-bold'}}) }}
							{{ form_widget(filterForm.sport, {
                                    'attr': {
                                        'class': 'form-select',
                                    }
                                }) }}
							{{ form_errors(filterForm.sport) }}
						</div>
						<div class="d-grid">
							<button type="submit" class="btn blue text-white">
								<i class="fas fa-search me-2"></i>
								Filtrer
							</button>
						</div>
						{{ form_end(filterForm) }}
					</div>
				</div>
				{% if is_granted('ROLE_ADMIN') %}
					<div class="card shadow-sm">
						<div class="card-header text-white py-3">
							<h5 class="mb-0">
								<i class="fas fa-cog me-2"></i>
								Administration</h5>
						</div>
						<div class="card-body">
							{% if app.request.attributes.get('_route') == 'clubArchive' %}
								<a href="{{ path('club') }}" class="btn btn-outline-primary d-block">
									<i class="fas fa-calendar-week me-2"></i>
									Voir les séances actives
								</a>
							{% else %}
								<a href="{{ path('clubArchive') }}" class="btn btn-outline-secondary d-block">
									<i class="fas fa-archive me-2"></i>
									Voir les séances archivées
								</a>
							{% endif %}
						</div>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	{% if banni is defined and banni == true and not is_granted('ROLE_ADMIN') %}
		<script>
			function accountNotValidated() {
Swal.fire({
icon: "error",
title: "Accès refusé",
text: "Vous avez été banni",
allowOutsideClick: false,
confirmButtonText: 'Retour'
}).then((result) => {
if (result.isConfirmed) {
window.history.back();
}
});
}
window.onload = accountNotValidated;
		</script>
	{% endif %}
{% endblock %}

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