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

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

{% block title %}Achats
	{{ moisNoms[mois] }}
	{{ annee }}
	— GestRestoSco
{% endblock %}

{% block body %}

	{# ── En-tête ───────────────────────────────────────────────────────── #}
	<div class="d-flex align-items-center justify-content-between mb-4 gap-2 flex-wrap">
		<h1 class="h4 fw-bold mb-0 page-title">
			<i class="fas fa-receipt me-2"></i>Achats
		</h1>
		<div class="d-flex gap-2 align-items-center flex-wrap">
			<button type="button" id="btnConvertirStocks" class="btn btn-success d-none" onclick="convertirEnStocks()" disabled>
				<i class="fas fa-boxes me-1"></i><span id="btnConvertirLabel">Basculer en stocks</span>
			</button>
			<button type="button" class="btn btn-app-primary" data-bs-toggle="modal" data-bs-target="#modalNouvelAchat">
				<i class="fas fa-plus me-1"></i>Nouvel achat
			</button>
		</div>
	</div>

	{# ── Navigation mois ───────────────────────────────────────────────── #}
	<div class="card border-0 shadow-sm rounded-3 mb-4">
		<div class="card-body py-3">
			<div
				class="row align-items-center g-2">

				{# Flèches navigation #}
				<div class="col-auto">
					<a href="{{ path('tenant_achats_index', {annee: prevAnnee, mois: prevMois, fournisseur: fournisseur}) }}" class="btn btn-outline-secondary btn-sm">
						<i class="fas fa-chevron-left"></i>
					</a>
				</div>

				<div class="col-auto">
					<span class="fw-semibold fs-5">{{ moisNoms[mois] }}
						{{ annee }}</span>
				</div>

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

				{# Aller au mois courant #}
				<div class="col-auto">
					<a href="{{ path('tenant_achats_index') }}" class="btn btn-outline-secondary btn-sm">
						Aujourd'hui
					</a>
				</div>

				{# Filtre fournisseur #}
				<div class="col ms-auto" style="max-width:280px;">
					<form method="get" action="{{ path('tenant_achats_index') }}" id="filtreForm">
						<input type="hidden" name="annee" value="{{ annee }}">
						<input type="hidden" name="mois" value="{{ mois }}">
						<select name="fournisseur" class="form-select form-select-sm" onchange="document.getElementById('filtreForm').submit()">
							<option value="">— Tous les fournisseurs —</option>
							{% for f in fournisseurs %}
								<option value="{{ f.nom }}" {{ fournisseur == f.nom ? 'selected' }}>
									{{ f.nom }}
								</option>
							{% endfor %}
						</select>
					</form>
				</div>

			</div>
		</div>
	</div>

	{# ── Totaux ────────────────────────────────────────────────────────── #}
	<div class="row g-3 mb-4">
		<div class="col-sm-6 col-xl-3">
			<div class="card stat-card h-100">
				<div class="card-body d-flex align-items-center gap-3 p-3">
					<div class="stat-icon stat-icon-blue rounded-circle d-flex align-items-center justify-content-center">
						🧾
					</div>
					<div>
						<div class="text-muted small">Achats TTC</div>
						<div class="fw-bold fs-5 lh-1">{{ totalTTC|number_format(2, ',', ' ') }}
							€</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-6 col-xl-3">
			<div class="card stat-card h-100">
				<div class="card-body d-flex align-items-center gap-3 p-3">
					<div class="stat-icon stat-icon-green rounded-circle d-flex align-items-center justify-content-center">
						💰
					</div>
					<div>
						<div class="text-muted small">Achats HT</div>
						<div class="fw-bold fs-5 lh-1">{{ totalHT|number_format(2, ',', ' ') }}
							€</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-6 col-xl-3">
			<div class="card stat-card h-100">
				<div class="card-body d-flex align-items-center gap-3 p-3">
					<div class="stat-icon stat-icon-yellow rounded-circle d-flex align-items-center justify-content-center">
						📦
					</div>
					<div>
						<div class="text-muted small">Lignes</div>
						<div class="fw-bold fs-5 lh-1">{{ achats|length }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-6 col-xl-3">
			<div class="card stat-card h-100">
				<div class="card-body d-flex align-items-center gap-3 p-3">
					<div class="stat-icon stat-icon-red rounded-circle d-flex align-items-center justify-content-center">
						🏭
					</div>
					<div>
						<div class="text-muted small">Fournisseurs</div>
						<div class="fw-bold fs-5 lh-1">
							{{ nbFournisseurs }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	{# ── Tableau ───────────────────────────────────────────────────────── #}
	<div class="card border-0 shadow-sm rounded-3">
		<div class="card-body p-0">
			{% if achats is empty %}
				<div class="text-center py-5 text-muted">
					<i class="fas fa-receipt fa-3x mb-3 opacity-25"></i>
					<p class="mb-0">Aucun achat pour
						{{ moisNoms[mois] }}
						{{ annee }}
						{% if fournisseur %}
							·
							{{ fournisseur }}
						{% endif %}
					</p>
					<button type="button" class="btn btn-app-primary mt-3" data-bs-toggle="modal" data-bs-target="#modalNouvelAchat">
						<i class="fas fa-plus me-1"></i>Enregistrer le premier achat
					</button>
				</div>
			{% else %}
				<div class="table-responsive">
					<table class="table table-hover align-middle mb-0" id="tableAchats">
						<thead class="table-light">
							<tr>
								<th style="width:36px;">
									<input type="checkbox" class="form-check-input" id="selectAll" title="Tout sélectionner">
								</th>
								<th>Date</th>
								<th>Description</th>
								<th class="text-end">Qté</th>
								<th>Unité</th>
								<th class="text-end">PU TTC</th>
								<th class="text-end">Total TTC</th>
								<th class="text-end">Total HT</th>
								<th class="text-center">TVA</th>
								<th class="text-center">Stock</th>
								<th class="text-end" style="width:90px;">Actions</th>
							</tr>
						</thead>
						<tbody>
							{% set currentFournisseur = null %}
							{% for achat in achats %}

								{# ── Ligne de groupe fournisseur ── #}
								{% if achat.fournisseur != currentFournisseur %}
									{% set currentFournisseur = achat.fournisseur %}
									<tr class="table-secondary fournisseur-header" data-fournisseur="{{ achat.fournisseur }}">
										<td>
											<input type="checkbox" class="form-check-input fournisseur-select-all"
												   data-fournisseur="{{ achat.fournisseur }}"
												   title="Tout sélectionner pour {{ achat.fournisseur }}">
										</td>
										<td colspan="10" class="fw-bold py-2 ps-2">
											<i class="fas fa-truck me-2 text-muted"></i>{{ achat.fournisseur }}
										</td>
									</tr>
								{% endif %}

								{# ── Ligne achat ── #}
								<tr class="achat-row {% if achat.converti_en_stock %}table-light text-muted{% endif %}"
								    data-fournisseur="{{ achat.fournisseur }}">
									<td>
										{% if achat.converti_en_stock %}
											<span class="text-success" title="Déjà en stock"><i class="fas fa-check-circle"></i></span>
										{% else %}
											<input type="checkbox" class="form-check-input achat-checkbox"
												   value="{{ achat.id }}"
												   data-fournisseur="{{ achat.fournisseur }}">
										{% endif %}
									</td>
									<td class="text-muted small text-nowrap">
										{{ achat.date_achat|date('d/m/Y') }}
									</td>
									<td {% if achat.converti_en_stock %}class="text-decoration-line-through text-muted"{% endif %}>
										{{ achat.description }}
									</td>
									<td class="text-end text-muted small">
										{{ achat.quantite|number_format(3, ',', ' ')|replace({',000': '', ',00': ''})|trim }}
									</td>
									<td class="text-muted small">{{ achat.unite ?: '—' }}</td>
									<td class="text-end text-muted small">
										{{ achat.prix_unitaire|number_format(2, ',', ' ') }} €
									</td>
									<td class="text-end fw-semibold">
										{{ achat.montant_total|number_format(2, ',', ' ') }} €
									</td>
									<td class="text-end text-muted small">
										{{ achat.montant_ht ? achat.montant_ht|number_format(2, ',', ' ') ~ ' €' : '—' }}
									</td>
									<td class="text-center text-muted small">
										{{ achat.taux_tva|number_format(1, ',') }}%
									</td>
									<td class="text-center">
										{% if achat.converti_en_stock %}
											<span class="badge bg-success-subtle text-success border border-success-subtle small">En stock</span>
										{% else %}
											<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle small">–</span>
										{% endif %}
									</td>
									<td class="text-end">
										<a href="{{ path('tenant_achats_edit', {id: achat.id}) }}" class="btn btn-sm btn-outline-secondary" title="Modifier">
											<i class="fas fa-pencil-alt"></i>
										</a>
										<form method="post" action="{{ path('tenant_achats_delete', {id: achat.id}) }}" class="d-inline" onsubmit="return confirm('Supprimer cet achat ?')">
											<input type="hidden" name="_token" value="{{ csrf_token('achat_delete_' ~ achat.id) }}">
											<input type="hidden" name="annee" value="{{ annee }}">
											<input type="hidden" name="mois" value="{{ mois }}">
											<button type="submit" class="btn btn-sm btn-outline-danger" title="Supprimer">
												<i class="fas fa-trash-alt"></i>
											</button>
										</form>
										{% if not achat.is_avoir %}
										<button type="button" class="btn btn-sm btn-outline-secondary" title="Déclarer un avoir"
											onclick="ouvrirModalAvoir(
												{{ achat.id }},
												'{{ achat.fournisseur|e('js') }}',
												'{{ achat.description|e('js') }}',
												{{ achat.montant_total }},
												{{ achat.montant_ht ?: 0 }},
												{{ achat.taux_tva ?: 20 }},
												{{ achat.quantite ?: 0 }},
												{{ achat.montant_ht ?: 0 }},
												'{{ achat.unite|default('')|e('js') }}'
											)">🏷️</button>
										{% endif %}
									</td>
								</tr>
							{% endfor %}
						</tbody>
						<tfoot class="table-light fw-bold">
							<tr>
								<td colspan="7" class="text-end text-muted small">Total
									{{ moisNoms[mois] }} :</td>
								<td class="text-end">{{ totalTTC|number_format(2, ',', ' ') }} €</td>
								<td class="text-end text-muted small">{{ totalHT|number_format(2, ',', ' ') }} €</td>
								<td colspan="3"></td>
							</tr>
						</tfoot>
					</table>
				</div>
			{% endif %}
		</div>
	</div>
	{# ── Section avoirs appliqués (hors tableau achats, non convertibles en stock) ──── #}
	{% if avoirsLignes is not empty %}
	<div class="card mt-3 border-warning">
		<div class="card-header bg-warning bg-opacity-10 d-flex align-items-center gap-2">
			<i class="fas fa-tag text-warning"></i>
			<h5 class="mb-0">Avoirs appliqués ce mois</h5>
			<span class="badge bg-warning text-dark">{{ avoirsLignes|length }}</span>
			<small class="text-muted ms-2">— Ces lignes ne sont pas convertibles en stock</small>
		</div>
		<div class="card-body p-0">
			<div class="table-responsive">
				<table class="table table-sm mb-0">
					<thead class="table-warning">
						<tr>
							<th>Date</th>
							<th>Fournisseur</th>
							<th>Description</th>
							<th class="text-end">Montant HT</th>
							<th class="text-end">Montant TTC</th>
						</tr>
					</thead>
					<tbody>
						{% set totalAvoirsHT = 0 %}
						{% set totalAvoirsTTC = 0 %}
						{% for av in avoirsLignes %}
							{% set totalAvoirsHT = totalAvoirsHT + (av.montant_ht ?: 0) %}
							{% set totalAvoirsTTC = totalAvoirsTTC + av.montant_total %}
							<tr>
								<td class="text-nowrap small">{{ av.date_achat|date('d/m/Y') }}</td>
								<td class="small">{{ av.fournisseur }}</td>
								<td><i class="fas fa-tag me-1 text-warning"></i><em>{{ av.description }}</em></td>
								<td class="text-end text-danger fw-bold small">{{ (av.montant_ht ?: 0)|number_format(2, ',', ' ') }} €</td>
								<td class="text-end text-danger fw-bold">{{ av.montant_total|number_format(2, ',', ' ') }} €</td>
							</tr>
						{% endfor %}
					</tbody>
					<tfoot class="table-light">
						<tr class="fw-bold">
							<td colspan="3" class="text-end text-muted small">Total avoirs :</td>
							<td class="text-end text-danger small">{{ totalAvoirsHT|number_format(2, ',', ' ') }} €</td>
							<td class="text-end text-danger">{{ totalAvoirsTTC|number_format(2, ',', ' ') }} €</td>
						</tr>
						<tr class="fw-bold">
							<td colspan="3" class="text-end text-muted small">Net achats (après avoirs) :</td>
							<td class="text-end text-success small">{{ (totalHT + totalAvoirsHT)|number_format(2, ',', ' ') }} €</td>
							<td class="text-end text-success">{{ (totalTTC + totalAvoirsTTC)|number_format(2, ',', ' ') }} €</td>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>
	</div>
	{% endif %}
	{# ── Token CSRF pour la conversion AJAX ───────────────────────────── #}
	<span id="csrfConvertirStocks" data-token="{{ csrf_token('achat_convertir_stocks') }}" class="d-none"></span>
	<span id="urlConvertirStocks" data-url="{{ path('tenant_achats_convertir_stocks') }}" class="d-none"></span>

	{# ── Modal nouvel achat ────────────────────────────────────────────── #}
	<div class="modal fade" id="modalNouvelAchat" tabindex="-1" aria-labelledby="modalNouvelAchatLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg modal-dialog-centered">
			<div class="modal-content">
				<form method="post" action="{{ path('tenant_achats_new') }}">
					<input type="hidden" name="_token" value="{{ csrf_token('achat_form') }}">
					<input type="hidden" name="annee" value="{{ annee }}">
					<input type="hidden" name="mois" value="{{ mois }}">

					<div class="modal-header">
						<h5 class="modal-title page-title" id="modalNouvelAchatLabel">
							<i class="fas fa-plus-circle me-2"></i>Nouvel achat
						</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
					</div>

					<div class="modal-body">
						<div class="row g-3">

							<div class="col-sm-6">
								<label for="date_achat" class="form-label fw-semibold">
									Date
									<span class="text-danger">*</span>
								</label>
								<input type="date" id="date_achat" name="date_achat" class="form-control" value="{{ "now"|date("Y-m-d") }}" required>
							</div>

							<div class="col-sm-6">
								<label for="fournisseur" class="form-label fw-semibold">
									Fournisseur
									<span class="text-danger">*</span>
								</label>
								<input type="text" id="fournisseur" name="fournisseur" class="form-control" list="listeFournisseurs" autocomplete="off" required placeholder="Nom du fournisseur">
								<datalist id="listeFournisseurs">
									{% for f in fournisseurs %}
										<option value="{{ f.nom }}">
										{% endfor %}
									</datalist>
								</div>

								<div class="col-12">
									<label for="description" class="form-label fw-semibold">
										Description / Produit
										<span class="text-danger">*</span>
									</label>
									<input type="text" id="description" name="description" class="form-control" required placeholder="Ex : Carottes bio, Poulet fermier…">
								</div>

								<div class="col-sm-3">
									<label for="quantite" class="form-label fw-semibold">
										Quantité
										<span class="text-danger">*</span>
									</label>
									<input type="number" id="quantite" name="quantite" class="form-control" step="0.001" min="0" required placeholder="0.00" oninput="calcAchatTotal()">
								</div>

								<div class="col-sm-3">
									<label for="unite" class="form-label fw-semibold">Unité</label>
									<select id="unite" name="unite" class="form-select">
										<option value="">—</option>
										{% for u in unites %}
											<option value="{{ u }}">{{ u }}</option>
										{% endfor %}
									</select>
								</div>

								<div class="col-sm-3">
									<label for="prix_unitaire" class="form-label fw-semibold" id="labelPrixUnitaire">
										Prix unitaire <span id="badgePrixType" class="badge bg-secondary ms-1 fw-normal" style="font-size:.7rem">TTC</span>
										<span class="text-danger">*</span>
									</label>
									<div class="input-group">
										<input type="number" id="prix_unitaire" name="prix_unitaire" class="form-control" step="0.001" min="0" required placeholder="0.00" oninput="calcAchatTotal()">
										<span class="input-group-text">€</span>
									</div>
									<div class="d-flex gap-3 mt-1">
										<div class="form-check form-check-inline mb-0">
											<input class="form-check-input" type="radio" name="type_prix" id="type_prix_ttc" value="ttc" checked onchange="calcAchatTotal()">
											<label class="form-check-label small" for="type_prix_ttc">TTC</label>
										</div>
										<div class="form-check form-check-inline mb-0">
											<input class="form-check-input" type="radio" name="type_prix" id="type_prix_ht" value="ht" onchange="calcAchatTotal()">
											<label class="form-check-label small" for="type_prix_ht">HT</label>
										</div>
									</div>
								</div>

								<div class="col-sm-3">
									<label for="taux_tva" class="form-label fw-semibold">TVA</label>
									<select id="taux_tva" name="taux_tva" class="form-select" onchange="calcAchatTotal()">
										{% for t in tauxTva %}
											<option value="{{ t }}" {{ t == 20 ? 'selected' }}>
												{{ t|number_format(1, ',') }}%
											</option>
										{% endfor %}
									</select>
								</div>

								<div class="col-sm-6">
									<label class="form-label fw-semibold text-muted">Total TTC calculé</label>
									<div class="form-control bg-light fw-bold" id="displayTTC">0,00 €</div>
								</div>

								<div class="col-sm-6">
									<label class="form-label fw-semibold text-muted">Total HT calculé</label>
									<div class="form-control bg-light text-muted" id="displayHT">0,00 €</div>
								</div>

							</div>
						</div>

						<div class="modal-footer">
							<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
							<button type="submit" class="btn btn-app-primary">
								<i class="fas fa-save me-1"></i>Enregistrer
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>

	{# ── Avoirs en attente ─────────────────────────────────────────────── #}
	{% if avoirsEnAttente is defined and avoirsEnAttente|length > 0 %}
	<div class="card mt-4 border-warning">
		<div class="card-header bg-warning text-dark d-flex justify-content-between align-items-center">
			<span><i class="fas fa-tag me-2"></i><strong>Avoirs en attente d'application</strong></span>
			<a href="{{ path('tenant_avoirs_index') }}" class="btn btn-sm btn-dark">Voir tous →</a>
		</div>
		<div class="table-responsive">
			<table class="table table-sm mb-0">
				<thead class="table-light">
					<tr>
						<th>Fournisseur</th>
						<th>Description</th>
						<th class="text-end">Montant TTC</th>
						<th>Déclaré le</th>
						<th>Action</th>
					</tr>
				</thead>
				<tbody>
				{% for av in avoirsEnAttente %}
					<tr>
						<td class="fw-semibold">{{ av.fournisseur }}</td>
						<td>{{ av.description }}</td>
						<td class="text-end text-danger fw-semibold">{{ av.montant_ttc|number_format(2, ',', ' ') }} €</td>
						<td>{{ av.date_creation|date('d/m/Y') }}</td>
						<td>
							<a href="{{ path('tenant_avoirs_index') }}" class="btn btn-sm btn-success">
								<i class="fas fa-check-circle"></i> Appliquer
							</a>
						</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
	</div>
	{% endif %}

	{# ── Modal déclarer avoir ──────────────────────────────────────────── #}
	{% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
	<div class="modal fade" id="modalDeclarerAvoir" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">🏷️ Déclarer un avoir fournisseur</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
				</div>
				<form method="post" action="{{ path('tenant_avoirs_declarer') }}">
					<input type="hidden" name="_token" value="{{ csrf_token('avoir_declarer') }}">
					<input type="hidden" name="achat_source_id" id="avoir_achat_source_id">
					<input type="hidden" name="annee" value="{{ annee }}">
					<input type="hidden" name="mois" value="{{ mois }}">
					<div class="modal-body">
						<div class="alert alert-info small py-2">
							<i class="fas fa-info-circle me-1"></i>
							L'avoir sera en attente jusqu'à son <a href="{{ path('tenant_avoirs_index') }}">application</a>.
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold">Fournisseur</label>
							<input type="text" class="form-control" name="fournisseur" id="avoir_fournisseur" readonly>
						</div>
						<div class="mb-3">
							<label class="form-label fw-semibold">Description</label>
							<input type="text" class="form-control" name="description" id="avoir_description" placeholder="Ex : Produit non conforme — salade iceberg">
						</div>
						{# Calculateur quantité livrée ≠ quantité facturée #}
						<div class="card bg-light border-0 mb-3" id="avoir_bloc_qte" style="display:none">
							<div class="card-body p-2">
								<p class="small fw-semibold mb-2 text-secondary"><i class="fas fa-calculator me-1"></i>Calculer l'avoir par quantité manquante</p>
								<div class="row g-2 align-items-end">
									<div class="col">
										<label class="form-label small mb-1">Qté facturée</label>
										<div class="input-group input-group-sm">
											<input type="number" step="0.001" class="form-control form-control-sm bg-white" id="avoir_qte_facturee" readonly>
											<span class="input-group-text" id="avoir_unite_label"></span>
										</div>
									</div>
									<div class="col">
										<label class="form-label small mb-1 text-danger fw-semibold">Qté réellement livrée</label>
										<div class="input-group input-group-sm">
											<input type="number" step="0.001" min="0" class="form-control form-control-sm border-danger" id="avoir_qte_livree" oninput="recalculerAvoirParQte()" placeholder="0">
											<span class="input-group-text" id="avoir_unite_label2"></span>
										</div>
									</div>
									<div class="col-auto">
										<button type="button" class="btn btn-sm btn-outline-primary" onclick="appliquerAvoirQte()">
											<i class="fas fa-arrow-down"></i> Appliquer
										</button>
									</div>
								</div>
								<div id="avoir_qte_preview" class="small text-muted mt-1" style="min-height:1.2em"></div>
							</div>
						</div>
						<div class="row g-2">
							<div class="col-4">
								<label class="form-label fw-semibold small">TVA (%)</label>
								<select class="form-select form-select-sm" name="taux_tva" id="avoir_taux_tva" onchange="recalculerAvoir()">
									<option value="20">20%</option>
									<option value="10">10%</option>
									<option value="5.5">5,5%</option>
									<option value="2.1">2,1%</option>
									<option value="0">0%</option>
								</select>
							</div>
							<div class="col-4">
								<label class="form-label fw-semibold small">Montant HT (€)</label>
								<input type="number" step="0.01" class="form-control form-control-sm" name="montant_ht" id="avoir_montant_ht" oninput="recalculerAvoirDepuisHT()">
							</div>
							<div class="col-4">
								<label class="form-label fw-semibold small">Montant TTC (€)</label>
								<input type="number" step="0.01" class="form-control form-control-sm" name="montant_ttc" id="avoir_montant_ttc" required oninput="recalculerAvoirDepuisTTC()">
							</div>
						</div>
						<div class="mb-3 mt-2">
							<label class="form-label fw-semibold small">Notes (optionnel)</label>
							<textarea class="form-control form-control-sm" name="notes" id="avoir_notes" rows="2" placeholder="Raison du retour, N° bon…"></textarea>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
						<button type="submit" class="btn btn-warning btn-sm">
							<i class="fas fa-tag me-1"></i> Enregistrer l'avoir
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	{% endif %}

	{% endblock %}

	{% block javascripts %}
		{{ parent() }}
		<script>
			function calcAchatTotal() {
			const qte = parseFloat(document.getElementById('quantite').value.replace(',', '.')) || 0;
			const pu = parseFloat(document.getElementById('prix_unitaire').value.replace(',', '.')) || 0;
			const tva = parseFloat(document.getElementById('taux_tva').value) || 0;
			const typePrix = document.querySelector('input[name="type_prix"]:checked')?.value ?? 'ttc';
			const estHT = typePrix === 'ht';
			const ttc = estHT ? qte * pu * (1 + tva / 100) : qte * pu;
			const ht  = estHT ? qte * pu : (tva > 0 ? qte * pu / (1 + tva / 100) : qte * pu);
			const fmt = v => v.toFixed(2).replace('.', ',') + ' €';
			document.getElementById('displayTTC').textContent = fmt(ttc);
			document.getElementById('displayHT').textContent = fmt(ht);
			const badge = document.getElementById('badgePrixType');
			if (badge) badge.textContent = estHT ? 'HT' : 'TTC';
		}

// ── Gestion des checkboxes ──────────────────────────────────────────
const selectAll          = document.getElementById('selectAll');
const btnConvertir       = document.getElementById('btnConvertirStocks');
const btnConvertirLabel  = document.getElementById('btnConvertirLabel');

function getChecked() {
    return Array.from(document.querySelectorAll('.achat-checkbox:checked'));
}

function updateBouton() {
    const checked = getChecked();
    if (checked.length === 0) {
        btnConvertir.classList.add('d-none');
        btnConvertir.disabled = true;
    } else {
        btnConvertir.classList.remove('d-none');
        btnConvertir.disabled = false;
        btnConvertirLabel.textContent = `Basculer ${checked.length} ligne${checked.length > 1 ? 's' : ''} en stocks`;
    }
    // État indéterminé du selectAll global
    const total = document.querySelectorAll('.achat-checkbox').length;
    if (selectAll) {
        selectAll.indeterminate = checked.length > 0 && checked.length < total;
        selectAll.checked       = checked.length === total && total > 0;
    }
}

// Tout sélectionner (global)
if (selectAll) {
    selectAll.addEventListener('change', () => {
        document.querySelectorAll('.achat-checkbox').forEach(cb => cb.checked = selectAll.checked);
        updateBouton();
    });
}

// Tout sélectionner par fournisseur
document.querySelectorAll('.fournisseur-select-all').forEach(cb => {
    cb.addEventListener('change', () => {
        const f = cb.dataset.fournisseur;
        document.querySelectorAll(`.achat-checkbox[data-fournisseur="${CSS.escape(f)}"]`)
            .forEach(c => c.checked = cb.checked);
        updateBouton();
    });
});

// Chaque checkbox individuelle
document.querySelectorAll('.achat-checkbox').forEach(cb => {
    cb.addEventListener('change', () => {
        // Sync le select-all du fournisseur
        const f = cb.dataset.fournisseur;
        const cbsGroup  = document.querySelectorAll(`.achat-checkbox[data-fournisseur="${CSS.escape(f)}"]`);
        const cbsHeader = document.querySelector(`.fournisseur-select-all[data-fournisseur="${CSS.escape(f)}"]`);
        if (cbsHeader) {
            const checkedInGroup = Array.from(cbsGroup).filter(c => c.checked).length;
            cbsHeader.checked       = checkedInGroup === cbsGroup.length;
            cbsHeader.indeterminate = checkedInGroup > 0 && checkedInGroup < cbsGroup.length;
        }
        updateBouton();
    });
});

// ── Conversion AJAX ────────────────────────────────────────────────
async function convertirEnStocks() {
    const ids = getChecked().map(cb => cb.value);
    if (ids.length === 0) return;

    if (!confirm(`Basculer ${ids.length} ligne(s) achat en stock ?\nCette action est irréversible.`)) return;

    btnConvertir.disabled = true;
    btnConvertirLabel.textContent = 'Conversion en cours…';

    const token = document.getElementById('csrfConvertirStocks').dataset.token;
    const url   = document.getElementById('urlConvertirStocks').dataset.url;

    try {
        const res  = await fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
            body: `_token=${encodeURIComponent(token)}&achat_ids=${encodeURIComponent(ids.join(','))}`
        });
        const data = await res.json();

        if (data.success) {
            // Mettre à jour visuellement les lignes converties
            data.ids_convertis.forEach(id => {
                const cb  = document.querySelector(`.achat-checkbox[value="${id}"]`);
                if (cb) {
                    const tr = cb.closest('tr');
                    cb.replaceWith(Object.assign(document.createElement('span'), {
                        className: 'text-success', title: 'En stock',
                        innerHTML: '<i class="fas fa-check-circle"></i>'
                    }));
                    tr.classList.add('table-light', 'text-muted');
                    // Badge
                    const badgeCell = tr.querySelector('.badge');
                    if (badgeCell) {
                        badgeCell.className = 'badge bg-success-subtle text-success border border-success-subtle small';
                        badgeCell.textContent = 'En stock';
                    }
                }
            });
            // Toast / flash
            alert('✅ ' + data.message);
            btnConvertir.classList.add('d-none');
        } else {
            alert('Erreur : ' + data.message);
            btnConvertir.disabled = false;
            btnConvertirLabel.textContent = 'Basculer en stocks';
        }
    } catch (e) {
        alert('Erreur réseau. Veuillez réessayer.');
        btnConvertir.disabled = false;
        btnConvertirLabel.textContent = 'Basculer en stocks';
    }
}

function ouvrirModalAvoir(achatId, fournisseur, description, montantTtc, montantHt, tauxTva, quantite, montantHtTotal, unite) {
    document.getElementById('avoir_achat_source_id').value = achatId;
    document.getElementById('avoir_fournisseur').value = fournisseur;
    document.getElementById('avoir_description').value = 'Avoir sur : ' + description;
    document.getElementById('avoir_montant_ttc').value = Math.abs(parseFloat(montantTtc) || 0).toFixed(2);
    document.getElementById('avoir_montant_ht').value = Math.abs(parseFloat(montantHt) || 0).toFixed(2);
    var sel = document.getElementById('avoir_taux_tva');
    var tvafloat = parseFloat(tauxTva);
    for (var i = 0; i < sel.options.length; i++) {
        if (Math.abs(parseFloat(sel.options[i].value) - tvafloat) < 0.01) { sel.selectedIndex = i; break; }
    }
    // Bloc calculateur quantité — prix unitaire HT calculé depuis montant_ht / quantite
    var qteF = parseFloat(quantite) || 0;
    var totalHt = parseFloat(montantHtTotal) || 0;
    var puHt = (qteF > 0 && totalHt > 0) ? totalHt / qteF : 0;
    window._avoirQteFact = qteF;
    window._avoirPuHt    = puHt;
    document.getElementById('avoir_qte_facturee').value = qteF > 0 ? qteF : '';
    document.getElementById('avoir_qte_livree').value   = '';
    document.getElementById('avoir_unite_label').textContent  = unite || '';
    document.getElementById('avoir_unite_label2').textContent = unite || '';
    document.getElementById('avoir_qte_preview').textContent  = '';
    document.getElementById('avoir_bloc_qte').style.display = (qteF > 0 && puHt > 0) ? '' : 'none';
    new bootstrap.Modal(document.getElementById('modalDeclarerAvoir')).show();
}

function recalculerAvoirParQte() {
    var qteF  = window._avoirQteFact || 0;
    var puHt  = window._avoirPuHt    || 0;
    var qteL  = parseFloat(document.getElementById('avoir_qte_livree').value) || 0;
    var diff  = qteF - qteL;
    var prev  = document.getElementById('avoir_qte_preview');
    if (diff <= 0 || qteL < 0) {
        prev.textContent = diff === 0 ? 'Aucun écart.' : (diff < 0 ? 'Qté livrée supérieure à la qté facturée.' : '');
        prev.className = 'small text-danger mt-1';
        return;
    }
    var tva    = parseFloat(document.getElementById('avoir_taux_tva').value) || 0;
    var avoirHT  = Math.round(diff * puHt * 100) / 100;
    var avoirTTC = Math.round(avoirHT * (1 + tva / 100) * 100) / 100;
    prev.innerHTML = 'Écart : <strong>' + diff.toFixed(3) + '</strong> × ' + puHt.toFixed(4) + ' € = <strong class="text-danger">' + avoirHT.toFixed(2) + ' € HT / ' + avoirTTC.toFixed(2) + ' € TTC</strong>';
    prev.className = 'small text-secondary mt-1';
}

function appliquerAvoirQte() {
    var qteF  = window._avoirQteFact || 0;
    var puHt  = window._avoirPuHt    || 0;
    var qteL  = parseFloat(document.getElementById('avoir_qte_livree').value) || 0;
    var diff  = qteF - qteL;
    if (diff <= 0) return;
    var tva    = parseFloat(document.getElementById('avoir_taux_tva').value) || 0;
    var avoirHT  = Math.round(diff * puHt * 100) / 100;
    var avoirTTC = Math.round(avoirHT * (1 + tva / 100) * 100) / 100;
    document.getElementById('avoir_montant_ht').value  = avoirHT.toFixed(2);
    document.getElementById('avoir_montant_ttc').value = avoirTTC.toFixed(2);
}

function recalculerAvoirDepuisTTC() {
    var ttc = parseFloat(document.getElementById('avoir_montant_ttc').value) || 0;
    var tva = parseFloat(document.getElementById('avoir_taux_tva').value) || 20;
    document.getElementById('avoir_montant_ht').value = (ttc / (1 + tva / 100)).toFixed(2);
}

function recalculerAvoirDepuisHT() {
    var ht = parseFloat(document.getElementById('avoir_montant_ht').value) || 0;
    var tva = parseFloat(document.getElementById('avoir_taux_tva').value) || 20;
    document.getElementById('avoir_montant_ttc').value = (ht * (1 + tva / 100)).toFixed(2);
}

function recalculerAvoir() { recalculerAvoirDepuisHT(); }
		</script>
	{% endblock %}