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

{% set months_fr = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] %}
{% set today_day  = 'now'|date('j')|number_format %}
{% set today_month = 'now'|date('n')|number_format %}
{% set today_year  = 'now'|date('Y')|number_format %}
{% set is_current_month = (filter.month == today_month and filter.year == today_year) %}

{% block body %}
<div id="horaires-month-wrap">

	{# ── Formulaire ─────────────────────────────────────────── #}
	<div class="hm-filter-bar position-sticky">
		{{ form_start(form, { attr: { class: 'hm-form' } }) }}
		{% if form_errors(form) %}
			<div class="alert-danger small px-2">{{ form_errors(form) }}</div>
		{% endif %}
		<div class="hm-form-row">
			<div class="hm-select-wrap hm-select-masjid">
				<i class="fas fa-mosque hm-select-icon"></i>
				{{ form_widget(form.id_masjid, { attr: { class: 'form-select form-select-sm' } }) }}
			</div>
			<div class="hm-select-wrap">
				<i class="fas fa-calendar-alt hm-select-icon"></i>
				{{ form_widget(form.month, { attr: { class: 'form-select form-select-sm' } }) }}
			</div>
			<div class="hm-select-wrap hm-select-year">
				{{ form_widget(form.year, { attr: { class: 'form-select form-select-sm' } }) }}
			</div>
			<button type="submit" class="btn btn-quaternary btn-sm hm-submit" data-turbo="false">
				<i class="fas fa-search"></i>
			</button>
		</div>
		{{ form_end(form) }}
	</div>

	{# ── Titre contextuel ────────────────────────────────────── #}
	<div class="hm-title small text-center text-white bg-tertiary py-1">
		<i class="fas fa-calendar-check me-1"></i>
		{{ months_fr[filter.month - 1] }} {{ filter.year }}
	</div>

	{# ── Tableau ─────────────────────────────────────────────── #}
	<div class="container-sticky small m-1">
		<table class="table-sticky small w-100">
			<thead>
				<tr>
					<th class="th-header bg-success text-white" scope="col"><i class="fas fa-calendar-day"></i></th>
					<th class="th-header bg-success text-white" scope="col">Fajr</th>
					<th class="th-header bg-success text-white" scope="col">Dohr</th>
					<th class="th-header bg-success text-white" scope="col">Asr</th>
					<th class="th-header bg-success text-white" scope="col">Maghreb</th>
					<th class="th-header bg-success text-white" scope="col">Ichaa</th>
				</tr>
			</thead>
			<tbody>
				{% for horaire in horaires %}
					{% set is_today = is_current_month and horaire.jour.day == today_day %}
					<tr class="{% if is_today %}hm-today{% elseif loop.index0 is odd %}bg-white{% else %}bg-secondary{% endif %}">
						<td class="hm-day-cell{% if is_today %} fw-bold{% endif %}">
							<div class="hm-day-num">{{ horaire.jour.day }}</div>
							<div class="hm-day-miladi">{{ horaire.jour.dmy_m }}</div>
							<div class="hm-day-hijri">{{ horaire.jour.dmy_h }}</div>
						</td>
						<td>{{ horaire.horaire_fajr }}</td>
						<td>{{ horaire.horaire_dohr }}</td>
						<td>{{ horaire.horaire_asr }}</td>
						<td>{{ horaire.horaire_maghreb }}</td>
						<td>{{ horaire.horaire_ichaa }}</td>
					</tr>
				{% endfor %}
			</tbody>
		</table>
	</div>

	<div class="text-center my-2">
		<a href="{{ path('horaires') }}" class="btn btn-primary btn-sm text-white">
			<i class="fas fa-mosque"></i> Revenir à la page principale
		</a>
	</div>

</div>
{% endblock %}
{% block nav %}
	{% include 'layout/navbar.html.twig'%}
{% endblock %}