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

{% block title %}Stocks{% 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 %}

{% 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-warehouse me-2"></i>Stocks
		</h1>
	</div>
	<div class="d-flex gap-2 flex-wrap">
		<a href="{{ path('tenant_stocks_valorisation') }}" class="btn btn-outline-info btn-sm">
			<i class="fas fa-chart-bar me-1"></i>Valorisation
		</a>
		<a href="{{ path('tenant_stocks_cloture', {annee: annee, mois: mois}) }}" class="btn btn-outline-warning btn-sm">
			<i class="fas fa-calendar-check me-1"></i>Clôture de mois
		</a>
		<a href="{{ path('tenant_stocks_mouvements') }}" class="btn btn-outline-dark btn-sm">
			<i class="fas fa-history me-1"></i>Mouvements
		</a>
		<button type="button" class="btn btn-outline-secondary btn-sm" onclick="imprimerStocks()">
			<i class="fas fa-print me-1"></i>Imprimer
		</button>
		<form method="post" action="{{ path('tenant_stocks_synchroniser_categories') }}" class="d-inline"
		      onsubmit="return confirm('Remplir automatiquement les catégories manquantes depuis la mercuriale ?')">
			<input type="hidden" name="_token" value="{{ csrf_token('stock_sync_cat') }}">
			<button type="submit" class="btn btn-outline-success btn-sm">
				<i class="fas fa-tags me-1"></i>Sync. catégories
			</button>
		</form>
		{% if not modeHistorique %}
		<a href="{{ path('tenant_stocks_new') }}" class="btn btn-primary btn-sm">
			<i class="fas fa-plus me-1"></i>Nouveau produit
		</a>
		{% endif %}
	</div>
</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_index', {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 modeHistorique %}
				<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_index') }}" class="btn btn-sm btn-outline-primary">
					<i class="fas fa-sync me-1"></i>Stock actuel
				</a>
			{% else %}
				<span class="fw-semibold fs-5 text-success"><i class="fas fa-circle me-2"></i>Stock actuel — {{ moisNoms[mois] }} {{ annee }}</span>
			{% 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 archivé…</option>
				{% for m in moisDisponibles %}
					<option value="{{ path('tenant_stocks_index', {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_index', {annee: nextAnn, mois: nextMois}) }}"
		   class="btn btn-sm btn-outline-secondary"><i class="fas fa-chevron-right"></i></a>
	</div>
</div>

{% if modeHistorique and dateValo %}
<div class="alert alert-warning d-flex align-items-center gap-2 mb-3 py-2">
	<i class="fas fa-archive"></i>
	<span>Vue archivée — valorisation du <strong>{{ dateValo|date('d/m/Y à H:i') }}</strong>. Les modifications ne sont pas disponibles.</span>
</div>
{% elseif modeHistorique %}
<div class="alert alert-secondary d-flex align-items-center gap-2 mb-3 py-2">
	<i class="fas fa-exclamation-triangle"></i>
	<span>Aucune valorisation archivée pour {{ moisNoms[mois] }} {{ annee }}.</span>
</div>
{% endif %}

{# ── Stats ─────────────────────────────────────────────────────────────── #}
<div class="row g-3 mb-4">
	<div class="col-sm-4">
		<div class="card border-0 shadow-sm">
			<div class="card-body text-center py-3">
				<div class="text-muted small">Articles</div>
				<div class="fw-bold fs-4">{{ stocks|length }}</div>
			</div>
		</div>
	</div>
	<div class="col-sm-4">
		<div class="card border-0 shadow-sm">
			<div class="card-body text-center py-3">
				<div class="text-muted small">Alertes stock</div>
				{% if modeHistorique %}
				<div class="fw-bold fs-4 text-muted">—</div>
				{% else %}
				<div class="fw-bold fs-4 {{ nbAlertes > 0 ? 'text-danger' : 'text-success' }}">{{ nbAlertes }}</div>
				{% endif %}
			</div>
		</div>
	</div>
	<div class="col-sm-4">
		<div class="card border-0 shadow-sm">
			<div class="card-body text-center py-3">
				<div class="text-muted small">Valeur totale TTC</div>
				<div class="fw-bold fs-4">{{ valeur|number_format(2, ',', ' ') }} €</div>
			</div>
		</div>
	</div>
</div>

{# ── Barre de recherche ────────────────────────────────────────────────── #}
<div class="mb-3">
	<input type="text" id="rechercheStock" class="form-control"
		placeholder="Rechercher un produit, catégorie, unité…"
		oninput="filtrerStocks()" autocomplete="off">
</div>

{# ── Filtre catégorie ──────────────────────────────────────────────────── #}
<div class="mb-3">
	<select id="filtreCategorie" class="form-select"
	        onchange="window.location.href = this.value">
		<option value="{{ path('tenant_stocks_index') }}" {{ categorie == '' ? 'selected' }}>
			Toutes les catégories
		</option>
		{% for cat in categories %}
			<option value="{{ path('tenant_stocks_index', {categorie: cat}) }}" {{ categorie == cat ? 'selected' }}>
				{{ cat }}
			</option>
		{% endfor %}
	</select>
</div>

{# ── Tableau ───────────────────────────────────────────────────────────── #}
<div class="card border-0 shadow-sm rounded-3">
	<div class="card-body p-0">
		{% if stocks is empty %}
			<div class="text-center py-5 text-muted">
				<i class="fas fa-warehouse fa-2x mb-3 d-block"></i>
				Aucun produit en stock
			</div>
		{% else %}
			<div class="table-responsive">
				<table class="table table-hover mb-0 align-middle" id="tableStocks">
					<thead class="table-light">
						<tr>
							<th>Produit</th>
							<th>Catégorie</th>
							<th class="text-end">Quantité</th>
							<th>Unité</th>
							<th class="text-end">Prix unit. TTC</th>
							<th class="text-end">Valeur TTC</th>
							<th>Seuil alerte</th>
							<th>Mise à jour</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						{% set totalValeur = 0 %}
						{% for s in stocks %}
							{% set valeurLigne = s.quantite * s.prix_unitaire %}
							{% set totalValeur  = totalValeur + valeurLigne %}
							<tr class="stock-row {{ s.quantite <= s.seuil_alerte ? 'table-warning' : '' }}"
								data-produit="{{ s.produit|lower }}"
								data-categorie="{{ (s.categorie ?? '')|lower }}"
								data-unite="{{ s.unite|lower }}">
								<td class="fw-semibold">{{ s.produit }}</td>
								<td><span class="badge bg-light text-dark border">{{ s.categorie ?: '—' }}</span></td>
								<td class="text-end">{{ s.quantite|number_format(3, ',', ' ') }}</td>
								<td>{{ s.unite }}</td>
								<td class="text-end">{{ s.prix_unitaire|number_format(3, ',', ' ') }} €</td>
								<td class="text-end fw-semibold">{{ valeurLigne|number_format(2, ',', ' ') }} €</td>
								<td>{{ s.seuil_alerte }}</td>
								<td class="text-muted small">{{ s.date_maj ? s.date_maj|date('d/m/Y') : '—' }}</td>
								<td class="text-end text-nowrap">
									{% if not modeHistorique %}

								<a href="{{ path('tenant_stocks_mouvement', {id: s.id}) }}"
								   class="btn btn-sm btn-outline-info me-1"
								   title="Enregistrer un mouvement">
									<i class="fas fa-exchange-alt"></i>
								</a>									
								<a href="{{ path('tenant_stocks_edit', {id: s.id}) }}" class="btn btn-xs btn-outline-secondary btn-sm me-1"><i class="fas fa-pencil-alt"></i>
								</a>
									<form method="post" action="{{ path('tenant_stocks_delete', {id: s.id}) }}" class="d-inline" onsubmit="return confirm('Supprimer cet article ?')">
										<input type="hidden" name="_token" value="{{ csrf_token('stock_delete_' ~ s.id) }}">
										<button class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i></button>
									</form>
								
									{% endif %}
								</td>
							</tr>
						{% endfor %}
					</tbody>
					<tfoot class="table-light fw-semibold" id="tfootStocks">
						<tr>
							<td colspan="5" class="text-end">Total visible :</td>
							<td class="text-end" id="totalValeurVisible">{{ totalValeur|number_format(2, ',', ' ') }} €</td>
							<td colspan="3"></td>
						</tr>
					</tfoot>
				</table>
			</div>
		{% endif %}
	</div>
</div>

<script>
function normaliserTexte(str) {
    return str.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}

function filtrerStocks() {
    const texte = normaliserTexte(document.getElementById('rechercheStock').value.trim());
    const rows  = document.querySelectorAll('#tableStocks .stock-row');
    let total   = 0;

    rows.forEach(tr => {
        const produit   = normaliserTexte(tr.dataset.produit   || '');
        const categorie = normaliserTexte(tr.dataset.categorie || '');
        const unite     = normaliserTexte(tr.dataset.unite     || '');
        const match     = !texte || produit.includes(texte) || categorie.includes(texte) || unite.includes(texte);

        tr.style.display = match ? '' : 'none';

        if (match) {
            // Valeur cell = 6ème colonne (index 5)
            const valCell = tr.cells[5];
            if (valCell) {
                const val = parseFloat(valCell.textContent.replace(/\s/g, '').replace(',', '.').replace('€', '')) || 0;
                total += val;
            }
        }
    });

    const totalCell = document.getElementById('totalValeurVisible');
    if (totalCell) {
        totalCell.textContent = total.toLocaleString('fr-FR', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' €';
    }
}

function imprimerStocks() {
    const rows    = document.querySelectorAll('#tableStocks .stock-row');
    const lignes  = [];
    let   total   = 0;

    rows.forEach(tr => {
        if (tr.style.display === 'none') return;
        const cells = tr.cells;
        const valeur = parseFloat((cells[5]?.textContent || '0').replace(/\s/g, '').replace(',', '.').replace('€', '')) || 0;
        total += valeur;
        lignes.push([
            cells[0]?.textContent?.trim() || '',
            cells[1]?.textContent?.trim() || '',
            cells[2]?.textContent?.trim() || '',
            cells[3]?.textContent?.trim() || '',
            cells[4]?.textContent?.trim() || '',
            cells[5]?.textContent?.trim() || '',
        ]);
    });

    const now  = new Date().toLocaleDateString('fr-FR', {day:'2-digit', month:'2-digit', year:'numeric'});
    const html = `<!DOCTYPE html>
<html lang="fr"><head><meta charset="UTF-8">
<title>Stocks — ${now}</title>
<style>
  body { font-family: Arial, sans-serif; font-size: 11px; margin: 20px; }
  h1   { font-size: 16px; margin-bottom: 4px; }
  .sous { color: #666; margin-bottom: 12px; }
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #ccc; padding: 4px 6px; }
  thead  { background: #f0f0f0; font-weight: bold; }
  tfoot  { background: #f0f0f0; font-weight: bold; }
  td:nth-child(3), td:nth-child(5), td:nth-child(6) { text-align: right; }
  @media print { @page { size: A4 landscape; margin: 15mm; } }
</style></head><body>
<h1>État des stocks</h1>
<div class="sous">Imprimé le ${now}</div>
<table>
  <thead><tr>
    <th>Produit</th><th>Catégorie</th><th>Quantité</th><th>Unité</th>
    <th>Prix unit. TTC</th><th>Valeur TTC</th>
  </tr></thead>
  <tbody>
  ${ lignes.map(c => `<tr>${c.map(v => `<td>${v}</td>`).join('')}</tr>`).join('') }
  </tbody>
  <tfoot><tr>
    <td colspan="5" style="text-align:right">Total :</td>
    <td style="text-align:right">${total.toLocaleString('fr-FR', {minimumFractionDigits:2, maximumFractionDigits:2})} €</td>
  </tr></tfoot>
</table>
</body></html>`;

    const w = window.open('', '_blank');
    w.document.write(html);
    w.document.close();
    w.print();
}
</script>
{% endblock body %}