{# templates/app/presences/index.html.twig #}
{% extends 'app/base.html.twig' %}

{% block title %}Présences — GestRestoSco
{% endblock %}

{% block stylesheets %}
	<style>
		.personne-row {
			cursor: pointer;
			transition: background 0.1s;
		}
		.personne-row:hover {
			background: #f0f7ff;
		}
		.personne-row input[type=checkbox] {
			width: 1.2rem;
			height: 1.2rem;
			cursor: pointer;
		}
		.badge-present {
			background: #198754;
		}
		.badge-absent {
			background: #dc3545;
		}
		.badge-ns {
			background: #6c757d;
		}
		.nav-date button,
		.nav-date a {
			min-width: 36px;
		}
	</style>
{% endblock %}

{% block body %}

	{# ── En-tête ─────────────────────────────────────────────────────────── #}
	<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
		<h4 class="mb-0">
			<i class="fas fa-users text-primary me-2"></i>
			Saisie des présences
		</h4>
		<div class="d-flex gap-2">
			<a href="{{ path('tenant_presences_recap') }}" class="btn btn-sm btn-outline-secondary">
				<i class="fas fa-chart-bar me-1"></i>
				Récapitulatif
			</a>
			{% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
			<a href="{{ path('tenant_categories_index') }}" class="btn btn-sm btn-outline-primary">
				<i class="fas fa-layer-group me-1"></i>
				Catégories
			</a>
			{% endif %}
		</div>
	</div>

	{# ── Barre de filtres ─────────────────────────────────────────────────── #}
	<div class="card border-0 shadow-sm mb-4">
		<div class="card-body py-2">
			<form
				method="get" class="row g-2 align-items-end">

				{# Date avec navigation jour précédent/suivant #}
				<div class="col-auto">
					<label class="form-label small fw-semibold mb-1">Date</label>
					<div class="input-group input-group-sm nav-date">
						<a class="btn btn-outline-secondary" href="?date={{ date|date_modify('-1 day')|date('Y-m-d') }}&service={{ service }}&categorie={{ categorieId }}&annee_scolaire={{ anneeScolaire }}">
							<i class="fas fa-chevron-left"></i>
						</a>
						<input type="date" name="date" class="form-control" value="{{ date }}" style="width:150px">
						<a class="btn btn-outline-secondary" href="?date={{ date|date_modify('+1 day')|date('Y-m-d') }}&service={{ service }}&categorie={{ categorieId }}&annee_scolaire={{ anneeScolaire }}">
							<i class="fas fa-chevron-right"></i>
						</a>
					</div>
				</div>

				{# Service #}
				<div class="col-auto">
					<label class="form-label small fw-semibold mb-1">Service</label>
					<select name="service" class="form-select form-select-sm">
						{% for key, label in services %}
							<option value="{{ key }}" {{ key == service ? 'selected' : '' }}>{{ label }}</option>
						{% endfor %}
					</select>
				</div>

				{# Année scolaire #}
				<div class="col-auto">
					<label class="form-label small fw-semibold mb-1">Année scolaire</label>
					<select name="annee_scolaire" class="form-select form-select-sm">
						{% for as in anneesScolaires %}
							<option value="{{ as }}" {{ as == anneeScolaire ? 'selected' : '' }}>{{ as }}</option>
						{% endfor %}
					</select>
				</div>

				{# Catégorie #}
				<div class="col-auto">
					<label class="form-label small fw-semibold mb-1">Catégorie / Groupe</label>
					<select name="categorie" class="form-select form-select-sm">
						<option value="">— Sélectionner —</option>
						{% for cat in categories %}
							<option value="{{ cat.id }}" {{ cat.id == categorieId ? 'selected' : '' }}>
								{{ cat.nom }}
							</option>
						{% endfor %}
					</select>
				</div>

				<div class="col-auto">
					<button type="submit" class="btn btn-primary btn-sm">
						<i class="fas fa-filter me-1"></i>Afficher
					</button>
				</div>
			</form>
		</div>
	</div>

	{# ── Grille de saisie ─────────────────────────────────────────────────── #}
	{% if not categorieId %}
		<div class="card border-0 shadow-sm">
			<div class="card-body text-center py-5 text-muted">
				<i class="fas fa-arrow-up fa-2x mb-3 opacity-25"></i>
				<p>Sélectionnez une catégorie pour afficher les élèves.</p>
			</div>
		</div>

	{% elseif personnes is empty %}
		<div class="card border-0 shadow-sm">
			<div class="card-body text-center py-5 text-muted">
				<i class="fas fa-user-slash fa-2x mb-3 opacity-25"></i>
				<p>Aucun élève actif dans cette catégorie.</p>
			</div>
		</div>

	{% else %}
		{# Résumé du jour #}
		{% set nbPresents = 0 %}
		{% set nbAbsents  = 0 %}
		{% set nbNonSaisi = 0 %}
		{% for personne in personnes %}
			{% if presences[personne.id] is defined %}
				{% if presences[personne.id].present %}
					{% set nbPresents = nbPresents + 1 %}
				{% else %}
					{% set nbAbsents = nbAbsents + 1 %}
				{% endif %}
			{% else %}
				{% set nbNonSaisi = nbNonSaisi + 1 %}
			{% endif %}
		{% endfor %}

		<div class="row g-3 mb-3">
			<div class="col-auto">
				<span class="badge badge-present fs-6 px-3 py-2">
					<i class="fas fa-check me-1"></i>
					{{ nbPresents }}
					présent(s)
				</span>
			</div>
			<div class="col-auto">
				<span class="badge badge-absent fs-6 px-3 py-2">
					<i class="fas fa-times me-1"></i>
					{{ nbAbsents }}
					absent(s)
				</span>
			</div>
			{% if nbNonSaisi > 0 %}
				<div class="col-auto">
					<span class="badge badge-ns fs-6 px-3 py-2">
						<i class="fas fa-question me-1"></i>
						{{ nbNonSaisi }}
						non saisi(s)
					</span>
				</div>
			{% endif %}
		</div>

		<form method="post" action="{{ path('tenant_presences_save') }}">
			<input type="hidden" name="_token" value="{{ csrf_token('presences_save') }}">
			<input type="hidden" name="date" value="{{ date }}">
			<input type="hidden" name="service" value="{{ service }}">
			<input
			type="hidden" name="categorie_id" value="{{ categorieId }}">

			{# Déclarer tous les IDs pour permettre la détection des absents #}
			{% for personne in personnes %}
				<input type="hidden" name="personnes_ids[]" value="{{ personne.id }}">
			{% endfor %}

			<div class="card border-0 shadow-sm mb-3">
				<div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
					<span class="fw-semibold">
						<i class="fas fa-list-check me-2 text-primary"></i>
						{{ categories|filter(c => c.id == categorieId)|first.nom ?? 'Groupe' }}
						—
						{{ date|date('l d/m/Y') }}
						—
						{{ services[service] }}
					</span>
					<div class="d-flex gap-2">
						<button type="button" class="btn btn-sm btn-outline-success" id="btnTousPresents">
							<i class="fas fa-check-double me-1"></i>Tous présents
						</button>
						<button type="button" class="btn btn-sm btn-outline-danger" id="btnTousAbsents">
							<i class="fas fa-times me-1"></i>Tous absents
						</button>
					</div>
				</div>
				<div class="card-body p-0">
					<table class="table table-hover mb-0">
						<thead class="table-light">
							<tr>
							<th style="width:50px" class="text-center">
								<input type="checkbox" id="cbSelectAll" class="form-check-input" title="Tout sélectionner / désélectionner">
							</th>
								<th>Nom</th>
								<th>Prénom</th>
								<th class="text-center text-muted small">Statut</th>
							</tr>
						</thead>
						<tbody>
							{% for personne in personnes %}
								{% set pr = presences[personne.id] ?? null %}
								<tr class="personne-row" onclick="toggleRow(this)">
									<td class="text-center">
										<input type="checkbox" name="presents[]" value="{{ personne.id }}" class="form-check-input presence-cb" {{ pr and pr.present ? 'checked' : '' }} onclick="event.stopPropagation()">
									</td>
									<td class="fw-semibold">{{ personne.nom }}</td>
									<td>{{ personne.prenom }}</td>
									<td class="text-center">
										{% if pr is null %}
											<span class="badge badge-ns">non saisi</span>
										{% elseif pr.present %}
											<span class="badge badge-present">présent</span>
										{% else %}
											<span class="badge badge-absent">absent</span>
										{% endif %}
									</td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div>

			{% if is_granted('ROLE_TENANT_GESTIONNAIRE') or is_granted('ROLE_TENANT_CUISINIER') %}
				<button type="submit" class="btn btn-primary btn-lg">
					<i class="fas fa-save me-1"></i>
					Enregistrer les présences
				</button>
			{% endif %}
		</form>
	{% endif %}

{% endblock %}

{% block javascripts %}
	<script>
		function toggleRow(row) {
const cb = row.querySelector('.presence-cb');
if (cb) 
cb.checked = ! cb.checked;

}
document.getElementById('btnTousPresents') ?. addEventListener('click', () => {
	document.querySelectorAll('.presence-cb').forEach(cb => cb.checked = true);
	updateSelectAll();
});
document.getElementById('btnTousAbsents') ?. addEventListener('click', () => {
	document.querySelectorAll('.presence-cb').forEach(cb => cb.checked = false);
	updateSelectAll();
});

// Checkbox "tout sélectionner"
const cbSelectAll = document.getElementById('cbSelectAll');
const allCbs = () => document.querySelectorAll('.presence-cb');

function updateSelectAll() {
	if (!cbSelectAll) return;
	const cbs = allCbs();
	const nbChecked = [...cbs].filter(cb => cb.checked).length;
	if (nbChecked === 0) {
		cbSelectAll.checked = false;
		cbSelectAll.indeterminate = false;
	} else if (nbChecked === cbs.length) {
		cbSelectAll.checked = true;
		cbSelectAll.indeterminate = false;
	} else {
		cbSelectAll.checked = false;
		cbSelectAll.indeterminate = true;
	}
}

cbSelectAll ?. addEventListener('change', () => {
	allCbs().forEach(cb => cb.checked = cbSelectAll.checked);
});

allCbs().forEach(cb => cb.addEventListener('change', updateSelectAll));

// État initial
updateSelectAll();
// Soumettre le formulaire si on change le filtre date/service
document.querySelector('[name="date"]') ?. addEventListener('change', function () {
this.closest('form').submit();
});
document.querySelector('[name="service"]') ?. addEventListener('change', function () {
this.closest('form').submit();
});
document.querySelector('[name="annee_scolaire"]') ?. addEventListener('change', function () {
this.closest('form').submit();
});
document.querySelector('[name="categorie"]') ?. addEventListener('change', function () {
this.closest('form').submit();
});
	</script>
{% endblock %}