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

{% block page_title %}
	Adhérents | BO
{% endblock %}

{% block name_title_page_top %}
	<i class="fa-solid fa-users"></i> Les Adhérents
{% endblock %}

{% block real_page_content %}

	<div class="tab-pane fade show active" role="tabpanel">
		<div class="card">
			<div class="card-body">
				<div class="d-flex justify-content-between align-items-center mb-3">
					<h5 class="card-title mb-0">Rechercher des adhérents</h5>
					<a href="{{ ea_url().setRoute('association_adherent_creer') }}" class="btn btn-primary">
						<i class="fas fa-plus"></i> Créer un adhérent
					</a>
				</div>

				<!-- search form -->
				<form action="{{ ea_url().setRoute('association_adherents') }}" method="POST">
					<div class="row">
						<div class="col-12 col-md-6">
							<div class="mb-3 row">
								<label for="input-adhNom" class="col-form-label col-12 col-sm-4 text-sm-end">Nom</label>
								<div class="col-sm-8">
									<input type="text" name="form[adhNom]" class="form-control" id="input-adhNom" placeholder="Recherche par nom..." {% if nom is defined and nom != "none" %} value="{{ nom }}" {% endif %}>
								</div>
							</div>
						</div>
						<div class="col-12 col-md-6">
							<div class="mb-3 row">
								<label for="input-adhPrenom" class="col-form-label col-12 col-sm-4 text-sm-end">Prénom</label>
								<div class="col-sm-8">
									<input type="text" name="form[adhPrenom]" class="form-control" id="input-adhPrenom" placeholder="Recherche par prénom..." {% if prenom is defined and prenom != "none" %} value="{{ prenom }}" {% endif %}>
								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-12 col-md-6">
							<div class="mb-3 row">
								<label for="input-adhEmail" class="col-form-label col-12 col-sm-4 text-sm-end">Email</label>
								<div class="col-sm-8">
									<input type="text" name="form[adhEmail]" class="form-control" id="input-adhEmail" placeholder="Recherche par email..." {% if email is defined and email != "none" %} value="{{ email }}" {% endif %}>
								</div>
							</div>
						</div>
						<div class="col-12 col-md-6">
							<div class="mb-3 row">
								<label for="select-adhTad" class="col-form-label col-12 col-sm-4 text-sm-end">Type</label>
								<div class="col-sm-8">
									<select class="form-select" id="select-adhTad" name="form[adhTad]">
										<option value="">Tous les types</option>
										{% for t in typesAdherents %}
											<option value="{{ t.tadId }}" {% if typeId is defined and typeId == t.tadId %} selected {% endif %}>{{ t.tadLibelle }}</option>
										{% endfor %}
									</select>
								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-12 col-md-6">
							<div class="mb-3 row">
								<label for="input-adhTkCode" class="col-form-label col-12 col-sm-4 text-sm-end">Code TK</label>
								<div class="col-sm-8">
									<input type="text" name="form[adhTkCode]" class="form-control" id="input-adhTkCode" placeholder="Code TK exact..." {% if tkCode is defined and tkCode != "none" %} value="{{ tkCode }}" {% endif %}>
								</div>
							</div>
						</div>
						<div class="col-12 col-md-6">
							<div class="mb-3 row">
								<div class="col-12 col-sm-8 offset-sm-4">
									<input type="hidden" name="research" value="oui">
									<button class="btn btn-success" type="submit">
										<i class="fas fa-search"></i> Rechercher
									</button>
								</div>
							</div>
						</div>
					</div>
				</form>

			</div>

			{% if adherents is defined and adherents is not null %}
				<div class="card-body">
					<div class="d-flex justify-content-between align-items-center mb-3">
						<h5 class="card-title mb-0">Résultats</h5>
						<form id="print-cards-form" action="{{ ea_url().setRoute('association_print_cards') }}" method="POST">
							<button type="submit" class="btn btn-secondary" id="btn-print-cards" disabled>
								<i class="fas fa-print"></i> Imprimer les cartes sélectionnées
							</button>
						</form>
					</div>

					<div class="table-responsive">
						<table class="table table-striped table-hover align-middle">
							<thead>
								<tr>
									<th>
										<input type="checkbox" id="select-all" class="form-check-input">
									</th>
									<th>Nom</th>
								<th>Prénom</th>
								<th>Email</th>
								<th>Type</th>
								<th>Ville</th>
								<th>Code TK</th>
								<th>Actions</th>
							</tr>
						</thead>
						<tbody>
							{% if adherents|length < 1 %}
								<tr class="table-warning">
									<td colspan="8">
										Il n'y a aucun résultat à votre recherche.
									</td>
								</tr>
							{% endif %}
							{% if adherents|length > 0 %}
								{% for a in adherents %}
									<tr>
										<td>
											<input type="checkbox" name="adherent_ids[]" value="{{ a.adhId }}" class="form-check-input adherent-checkbox" form="print-cards-form">
										</td>
										<td>{{ a.adhNom }}</td>
										<td>{{ a.adhPrenom }}</td>
										<td>{{ a.adhEmail }}</td>
										<td>
											{% if a.adhTad is defined and a.adhTad %}
												<span class="badge bg-info">{{ a.adhTad.tadLibelle }}</span>
											{% endif %}
										</td>
										<td>
											{% if a.adhVil is defined and a.adhVil %}
												{{ a.adhVil.vilNom }}
											{% endif %}
										</td>
										<td>
											<code>{{ a.adhTkCode }}</code>
										</td>
										<td class="table-action">
											<a href="{{ ea_url().setRoute('association_adherent_editer', {id: a.adhId}) }}" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" title="Modifier">
												<i class="fas fa-edit"></i>
											</a>
											<a href="{{ ea_url().setRoute('association_adherent_delete', {id: a.adhId}) }}" class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" title="Supprimer">
												<i class="fas fa-trash"></i>
											</a>
										</td>
									</tr>
								{% endfor %}
							{% endif %}
							</tbody>
						</table>
					</div>

					{% if nbPages is defined and nbPages > 1 %}
						<div class="row mt-4">
							<div class="col-12 col-md-5">
								<div class="badge rounded-pill bg-primary pt-2">
									<h5 class="text-light mx-2">
										Items {{ 1 + ((currentPage - 1) * 30) }} à {{ pageItems + ((currentPage - 1) * 30) }} sur {{ totalItems }}
									</h5>
								</div>
							</div>
							<div class="col-12 col-md-7">
								<nav aria-label="Page navigation">
									<ul class="pagination pagination-md flex-wrap">
										{% if nbPages > 1 %}
											<li class="page-item {% if 1 == currentPage %} disabled {% endif %}">
												<a class="page-link" href="{{ ea_url().setRoute(namePath, {'idPage': 1, 'nom': nom, 'prenom': prenom, 'email': email, 'typeId': typeId, 'tkCode': tkCode}) }}">
													<i class="fas fa-backward"></i> Début
												</a>
											</li>
										{% endif %}

										<li class="page-item {% if 1 == currentPage %} disabled {% endif %}">
											<a class="page-link" href="{{ ea_url().setRoute(namePath, {'idPage': currentPage - 1, 'nom': nom, 'prenom': prenom, 'email': email, 'typeId': typeId, 'tkCode': tkCode}) }}">
												<i class="fas fa-angle-left"></i> Précédent
											</a>
										</li>

										{% for i in 1..nbPages %}
											{% if (currentPage - 2) <= i and (currentPage + 2) >= i %}
												<li class="page-item {% if i == currentPage %} active {% endif %}">
													<a class="page-link" href="{{ ea_url().setRoute(namePath, {'idPage': i, 'nom': nom, 'prenom': prenom, 'email': email, 'typeId': typeId, 'tkCode': tkCode}) }}">{{ i }}</a>
												</li>
											{% endif %}
										{% endfor %}

										<li class="page-item {% if nbPages == currentPage %} disabled {% endif %}">
											<a class="page-link" href="{{ ea_url().setRoute(namePath, {'idPage': currentPage + 1, 'nom': nom, 'prenom': prenom, 'email': email, 'typeId': typeId, 'tkCode': tkCode}) }}">
												Suivant <i class="fas fa-angle-right"></i>
											</a>
										</li>

										{% if nbPages > 1 %}
											<li class="page-item {% if nbPages == currentPage %} disabled {% endif %}">
												<a class="page-link" href="{{ ea_url().setRoute(namePath, {'idPage': nbPages, 'nom': nom, 'prenom': prenom, 'email': email, 'typeId': typeId, 'tkCode': tkCode}) }}">
													Fin ({{ nbPages }}) <i class="fas fa-forward"></i>
												</a>
											</li>
										{% endif %}
									</ul>
								</nav>
							</div>
						</div>
					{% endif %}

				</div>
			{% endif %}
		</div>
	</div>

	<script>
		document.addEventListener('DOMContentLoaded', function() {
			const selectAll = document.getElementById('select-all');
			const checkboxes = document.querySelectorAll('.adherent-checkbox');
			const printBtn = document.getElementById('btn-print-cards');

			function updatePrintButton() {
				const checkedCount = document.querySelectorAll('.adherent-checkbox:checked').length;
				printBtn.disabled = checkedCount === 0;
				if (checkedCount > 0) {
					printBtn.innerHTML = '<i class="fas fa-print"></i> Imprimer ' + checkedCount + ' carte(s)';
				} else {
					printBtn.innerHTML = '<i class="fas fa-print"></i> Imprimer les cartes sélectionnées';
				}
			}

			if (selectAll) {
				selectAll.addEventListener('change', function() {
					checkboxes.forEach(cb => cb.checked = this.checked);
					updatePrintButton();
				});
			}

			checkboxes.forEach(cb => {
				cb.addEventListener('change', updatePrintButton);
			});
		});
	</script>

{% endblock %}