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

{% block title %}Mouvements de stock par mois{% endblock %}

{% set moisNoms = ['', 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'] %}

{% set prevMois = mois - 1 %}{% set prevAnn = annee %}
{% if prevMois < 1 %}{% set prevMois = 12 %}{% set prevAnn = annee - 1 %}{% endif %}
{% set nextMois = mois + 1 %}{% set nextAnn = annee %}
{% if nextMois > 12 %}{% set nextMois = 1 %}{% set nextAnn = annee + 1 %}{% endif %}

{% set estMoisCourant = (annee == 'now'|date('Y')|number_format(0,'','') and mois == 'now'|date('n')|number_format(0,'','')) %}

{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
	<div>
		<h1 class="h3 fw-bold page-title mb-0">
			<i class="fas fa-history me-2"></i>Mouvements de stock
		</h1>
		<div class="text-muted small mt-1">Entrées, sorties et ajustements (hors clôtures)</div>
	</div>
	<a href="{{ path('tenant_stocks_index') }}" class="btn btn-outline-secondary btn-sm">
		<i class="fas fa-arrow-left me-1"></i>Retour aux stocks
	</a>
</div>

{# ── Navigation mois ─────────────────────────────────────────────────── #}
<div class="card border-0 shadow-sm rounded-3 mb-3">
	<div class="card-body py-2 px-3 d-flex align-items-center justify-content-between">
		<a href="{{ path('tenant_stocks_mouvements', {annee: prevAnn, mois: prevMois}) }}"
		   class="btn btn-sm btn-outline-secondary"><i class="fas fa-chevron-left"></i></a>

		<div class="d-flex align-items-center gap-3">
			{% if estMoisCourant %}
				<span class="fw-semibold fs-5 text-success">
					<i class="fas fa-circle me-2"></i>{{ moisNoms[mois] }} {{ annee }}
				</span>
			{% else %}
				<span class="fw-semibold fs-5 text-warning">
					<i class="fas fa-archive me-2"></i>{{ moisNoms[mois] }} {{ annee }}
				</span>
				<a href="{{ path('tenant_stocks_mouvements') }}" class="btn btn-sm btn-outline-primary">
					<i class="fas fa-sync me-1"></i>Mois actuel
				</a>
			{% endif %}

			{% if moisDisponibles is not empty %}
			<select class="form-select form-select-sm w-auto"
			        onchange="if(this.value) window.location.href = this.value">
				<option value="">Aller à un mois…</option>
				{% for m in moisDisponibles %}
					<option value="{{ path('tenant_stocks_mouvements', {annee: m.annee, mois: m.mois}) }}"
					        {{ annee == m.annee and mois == m.mois ? 'selected' }}>
						{{ moisNoms[m.mois] }} {{ m.annee }}
					</option>
				{% endfor %}
			</select>
			{% endif %}
		</div>

		<a href="{{ path('tenant_stocks_mouvements', {annee: nextAnn, mois: nextMois}) }}"
		   class="btn btn-sm btn-outline-secondary"><i class="fas fa-chevron-right"></i></a>
	</div>
</div>

{% if mouvements is empty %}
	<div class="card border-0 shadow-sm">
		<div class="card-body text-center py-5 text-muted">
			<i class="fas fa-history fa-2x mb-3 d-block"></i>
			Aucun mouvement enregistré pour {{ moisNoms[mois] }} {{ annee }}.
		</div>
	</div>
{% else %}
	<div class="mb-3">
		<input type="text" id="rechercheMouvements" class="form-control"
		       placeholder="Rechercher un produit ou un motif…"
		       oninput="filtrerMouvements()" autocomplete="off">
	</div>

	<div class="card border-0 shadow-sm rounded-3">
		<div class="card-body p-0">
			<div class="table-responsive">
				<table class="table table-hover mb-0 align-middle" id="tableMouvements">
					<thead class="table-light">
						<tr>
							<th>Date</th>
							<th>Produit</th>
							<th>Type</th>
							<th class="text-end">Qté avant</th>
							<th class="text-end">Qté après</th>
							<th class="text-end">Écart</th>
							<th>Motif</th>
						</tr>
					</thead>
					<tbody>
						{% for m in mouvements %}
							{% set ecart = m.quantite_apres - m.quantite_avant %}
							<tr class="mvt-row"
							    data-search="{{ (m.produit ~ ' ' ~ (m.motif ?? ''))|lower }}">
								<td class="text-nowrap small">{{ m.date_mouvement|date('d/m/Y H:i') }}</td>
								<td class="fw-semibold">{{ m.produit ?? '—' }}</td>
								<td>
									{% if m.type_mouvement == 'sortie' %}
										<span class="badge bg-warning text-dark">Sortie</span>
									{% elseif m.type_mouvement == 'ajustement' %}
										<span class="badge bg-info text-white">Inventaire</span>
									{% else %}
										<span class="badge bg-success">Entrée</span>
									{% endif %}
								</td>
								<td class="text-end text-muted">
									{{ m.quantite_avant|number_format(3, ',', ' ') }} {{ m.unite ?? '' }}
								</td>
								<td class="text-end">
									{{ m.quantite_apres|number_format(3, ',', ' ') }} {{ m.unite ?? '' }}
								</td>
								<td class="text-end fw-semibold
								    {{ ecart < 0 ? 'text-danger' : (ecart > 0 ? 'text-success' : 'text-muted') }}">
									{{ ecart >= 0 ? '+' : '' }}{{ ecart|number_format(3, ',', ' ') }}
								</td>
								<td class="text-muted small">{{ m.motif ?? '—' }}</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>
{% endif %}

<script>
function filtrerMouvements() {
	const texte = document.getElementById('rechercheMouvements').value.toLowerCase().trim();
	document.querySelectorAll('#tableMouvements .mvt-row').forEach(tr => {
		const val = tr.dataset.search || '';
		tr.style.display = !texte || val.includes(texte) ? '' : 'none';
	});
}
</script>
{% endblock body %}