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

{% block title %}Menus de la semaine — GestRestoSco
{% endblock %}

{% block body %}
	<div class="d-flex justify-content-between align-items-center mb-4">
		<h4 class="mb-0">
			<i class="fas fa-book-open text-primary me-2"></i>
			Gestion des menus
		</h4>
		{% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
			<a href="{{ path('tenant_menus_new') }}" class="btn btn-primary">
				<i class="fas fa-plus me-1"></i>
				Nouvelle semaine
			</a>
		{% endif %}
	</div>

	{# ── Filtres année + semaine ──────────────────────────────────────────── #}
	<div class="card border-0 shadow-sm mb-4">
		<div class="card-body py-3">
			<form method="get" class="row g-2 align-items-end" id="form-filtres">
				<div class="col-auto">
					<label class="form-label mb-1 small fw-semibold text-muted"><i class="fas fa-calendar me-1"></i>Année</label>
					<select name="annee" id="filter-annee" class="form-select form-select-sm">
						<option value="">Toutes les années</option>
						{% for a in anneesDisponibles %}
							<option value="{{ a }}" {{ a == annee ? 'selected' : '' }}>{{ a }}</option>
						{% endfor %}
					</select>
				</div>
				<div class="col-auto">
					<label class="form-label mb-1 small fw-semibold text-muted"><i class="fas fa-hashtag me-1"></i>Semaine</label>
					<select name="semaine" id="filter-semaine" class="form-select form-select-sm">
						<option value="">Toutes les semaines</option>
						{% for s in semainesDisponibles %}
							<option value="{{ s }}" {{ s == semaine ? 'selected' : '' }}>Semaine {{ s }}</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>Filtrer
					</button>
					<a href="{{ path('tenant_menus_index') }}" class="btn btn-outline-secondary btn-sm ms-1">
						<i class="fas fa-times me-1"></i>Réinitialiser
					</a>
				</div>
				<div class="col-auto ms-auto">
					<span class="text-muted small">{{ semaines|length }} semaine(s)</span>
				</div>
			</form>
		</div>
	</div>

	{% if not filtre %}
	<div class="alert alert-info py-2 mb-3 small">
		<i class="fas fa-info-circle me-1"></i>
		Affichage des <strong>5 derniers menus créés</strong>. Utilisez les filtres pour affiner votre recherche.
	</div>
	{% endif %}

	{# ── Table semaines ────────────────────────────────────────────────────── #}
	{% if semaines is empty %}
		<div class="card border-0 shadow-sm">
			<div class="card-body text-center py-5 text-muted">
				<i class="fas fa-book-open fa-3x mb-3 opacity-25"></i>
				<p class="mb-3">Aucun menu pour l'année
					{{ annee }}.</p>
				{% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
					<a href="{{ path('tenant_menus_new') }}" class="btn btn-primary">
						<i class="fas fa-plus me-1"></i>
						Créer le premier menu
					</a>
				{% endif %}
			</div>
		</div>
	{% else %}
		<div class="card border-0 shadow-sm">
			<div class="table-responsive">
				<table class="table table-hover align-middle mb-0">
					<thead class="table-light">
						<tr>
							<th>Semaine</th>
							<th>Du</th>
							<th>Au</th>
							<th>Statut</th>
							<th class="text-end">Actions</th>
						</tr>
					</thead>
					<tbody>
						{% for semaine in semaines %}
							<tr>
								<td>
									<span class="fw-semibold">S{{ semaine.numero_semaine }}</span>
									<small class="text-muted ms-1">/
										{{ semaine.annee }}</small>
								</td>
								<td>{{ semaine.date_debut|date('d/m/Y') }}</td>
								<td>{{ semaine.date_fin|date('d/m/Y') }}</td>
								<td>
									{% if semaine.active %}
										<span class="badge bg-success">
											<i class="fas fa-check-circle me-1"></i>Active
										</span>
									{% else %}
										<span class="badge bg-secondary">Inactive</span>
									{% endif %}
								</td>
								<td class="text-end">
									<div class="d-flex flex-wrap gap-1 justify-content-end">
										{# Modifier #}
										<a href="{{ path('tenant_menus_edit', {id: semaine.id}) }}"
										   class="btn btn-outline-primary btn-sm" title="Modifier">
											<i class="fas fa-edit"></i>
										</a>

										{# Imprimer #}
										<button type="button"
										        onclick="ouvrirModal({{ semaine.id }}, 'imprimer', '{{ path('tenant_menus_print', {id: semaine.id}) }}')"
										        class="btn btn-outline-secondary btn-sm" title="Imprimer">
											<i class="fas fa-print"></i>
										</button>

										{# Télécharger (PDF) #}
										<button type="button"
										        onclick="ouvrirModal({{ semaine.id }}, 'telecharger', '{{ path('tenant_menus_download', {id: semaine.id}) }}')"
										        class="btn btn-outline-secondary btn-sm" title="Télécharger (PDF)">
											<i class="fas fa-download"></i>
										</button>

										{% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
											{# Dupliquer #}
											<form method="post" action="{{ path('tenant_menus_duplicate', {id: semaine.id}) }}" class="d-inline">
												<input type="hidden" name="_token" value="{{ csrf_token('menus_duplicate_' ~ semaine.id) }}">
												<button type="submit" class="btn btn-outline-info btn-sm" title="Dupliquer">
													<i class="fas fa-copy"></i>
												</button>
											</form>

											{# Envoyer aux parents #}
											<a href="{{ path('tenant_menus_send_parents', {id: semaine.id}) }}"
											   class="btn btn-outline-warning btn-sm" title="Envoyer aux parents">
												<i class="fas fa-envelope"></i>
											</a>

											{# Activer / Désactiver #}
											{% if semaine.active %}
												<form method="post" action="{{ path('tenant_menus_deactivate', {id: semaine.id}) }}" class="d-inline"
												      onsubmit="return confirm('Désactiver la semaine S{{ semaine.numero_semaine }} ?')">
													<input type="hidden" name="_token" value="{{ csrf_token('menus_deactivate_' ~ semaine.id) }}">
													<button type="submit" class="btn btn-success btn-sm" title="Désactiver">
														<i class="fas fa-toggle-on"></i>
													</button>
												</form>
											{% else %}
												<form method="post" action="{{ path('tenant_menus_activate', {id: semaine.id}) }}" class="d-inline"
												      onsubmit="return confirm('Activer la semaine S{{ semaine.numero_semaine }} ?')">
													<input type="hidden" name="_token" value="{{ csrf_token('menus_activate_' ~ semaine.id) }}">
													<button type="submit" class="btn btn-outline-success btn-sm" title="Activer">
														<i class="fas fa-toggle-off"></i>
													</button>
												</form>
											{% endif %}

											{# Supprimer #}
											<form method="post" action="{{ path('tenant_menus_delete', {id: semaine.id}) }}" class="d-inline"
											      onsubmit="return confirm('Supprimer définitivement la semaine S{{ semaine.numero_semaine }} et tous ses menus ?')">
												<input type="hidden" name="_token" value="{{ csrf_token('menus_delete_' ~ semaine.id) }}">
												<button type="submit" class="btn btn-outline-danger btn-sm" title="Supprimer">
													<i class="fas fa-trash"></i>
												</button>
											</form>
										{% endif %}
									</div>
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	{% endif %}

{# ── Modal sélection du style de menu ─────────────────────────────────────── #}
<div class="modal fade" id="modalStyleMenu" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title"><i class="fas fa-palette me-2 text-primary"></i>Choisir le style de présentation</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
			</div>
			<div class="modal-body">
				<p class="text-muted small mb-3">Sélectionnez le style de présentation de votre menu :</p>
				<div class="row g-3">
					<div class="col-6 col-md-3">
						<div class="card style-card h-100 border-2 text-center p-3" onclick="selectStyle('actuel')" id="card-actuel">
							<input type="radio" name="style_menu" id="style_actuel" value="actuel" class="d-none" checked>
							<i class="fas fa-list fa-2x text-primary mb-2"></i>
							<h6 class="mb-1">Vertical</h6>
							<small class="text-muted">Style classique par jour</small>
						</div>
					</div>
					<div class="col-6 col-md-3">
						<div class="card style-card h-100 border-2 text-center p-3" onclick="selectStyle('cartes')" id="card-cartes">
							<input type="radio" name="style_menu" id="style_cartes" value="cartes" class="d-none">
							<i class="fas fa-th-large fa-2x text-info mb-2"></i>
							<h6 class="mb-1">Cartes</h6>
							<small class="text-muted">Grille de fiches par jour</small>
						</div>
					</div>
					<div class="col-6 col-md-3">
						<div class="card style-card h-100 border-2 text-center p-3" onclick="selectStyle('enfantin')" id="card-enfantin">
							<input type="radio" name="style_menu" id="style_enfantin" value="enfantin" class="d-none">
							<i class="fas fa-child fa-2x text-warning mb-2"></i>
							<h6 class="mb-1">Enfantin</h6>
							<small class="text-muted">Coloré &amp; ludique</small>
						</div>
					</div>
					<div class="col-6 col-md-3">
						<div class="card style-card h-100 border-2 text-center p-3" onclick="selectStyle('elegant')" id="card-elegant">
							<input type="radio" name="style_menu" id="style_elegant" value="elegant" class="d-none">
							<i class="fas fa-award fa-2x text-secondary mb-2"></i>
							<h6 class="mb-1">Élégant</h6>
							<small class="text-muted">Sobre &amp; raffiné</small>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
				<button type="button" class="btn btn-primary" onclick="confirmerStyle()">
					<i class="fas fa-check me-1"></i>Confirmer
				</button>
			</div>
		</div>
	</div>
</div>

<style>
.style-card { cursor: pointer; transition: border-color .15s, background .15s; border-color: #dee2e6 !important; }
.style-card:hover { border-color: #0d6efd !important; background: #f8f9ff; }
.style-card.selected { border-color: #0d6efd !important; background: #e7f0ff; }
</style>

<script>
let _styleSelectionne = 'actuel';
let _actionCourante   = '';
let _urlCourante      = '';

function ouvrirModal(semaineId, action, url) {
    _actionCourante = action;
    _urlCourante    = url;
    selectStyle('actuel');
    new bootstrap.Modal(document.getElementById('modalStyleMenu')).show();
}

function selectStyle(style) {
    _styleSelectionne = style;
    document.querySelectorAll('.style-card').forEach(c => c.classList.remove('selected'));
    document.getElementById('card-' + style).classList.add('selected');
    document.getElementById('style_' + style).checked = true;
}

function confirmerStyle() {
    bootstrap.Modal.getInstance(document.getElementById('modalStyleMenu')).hide();
    const url = _urlCourante + '?style=' + _styleSelectionne;
    if (_actionCourante === 'imprimer') {
        const w = window.open(url + '&auto=1', '_blank');
    } else if (_actionCourante === 'telecharger') {
        window.location.href = url;
    }
}

// Sélectionner actuel par défaut à l'ouverture
document.addEventListener('DOMContentLoaded', () => selectStyle('actuel'));

// Recharger les semaines disponibles quand l'année change
document.getElementById('filter-annee').addEventListener('change', function () {
    const annee = this.value;
    const selectSemaine = document.getElementById('filter-semaine');
    selectSemaine.innerHTML = '<option value="">Toutes les semaines</option>';
    if (!annee) return;
    fetch('{{ path('tenant_menus_index') }}?annee=' + annee + '&_semaines_only=1')
        .then(r => r.json())
        .then(data => {
            data.forEach(s => {
                const opt = document.createElement('option');
                opt.value = s;
                opt.textContent = 'Semaine ' + s;
                selectSemaine.appendChild(opt);
            });
        })
        .catch(() => {});
});
</script>

{% endblock %}