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

{% block title %}{{ cession ? 'Modifier la cession' : 'Nouvelle cession' }} — GestRestoSco{% endblock %}

{% block body %}

	{# ── En-tête ─────────────────────────────────────────────────────────── #}
	<div class="d-flex align-items-center justify-content-between mb-4">
		<h1 class="h4 fw-bold mb-0 page-title">
			<i class="fas fa-exchange-alt me-2"></i>
			{{ cession ? 'Modifier la cession #' ~ cession.id : 'Nouvelle cession inter-services' }}
		</h1>
		<a href="{{ path('tenant_cessions_index', {annee: annee, mois: mois}) }}" class="btn btn-outline-secondary btn-sm">
			<i class="fas fa-arrow-left me-1"></i>Retour
		</a>
	</div>

	<form method="post" action="{{ cession ? path('tenant_cessions_edit', {id: cession.id}) : path('tenant_cessions_new') }}" id="cessionForm">
		<input type="hidden" name="_token" value="{{ csrf_token('cession_form') }}">

		{# ── En-tête de la cession ───────────────────────────────────────── #}
		<div class="card border-0 shadow-sm rounded-3 mb-4">
			<div class="card-header bg-white border-bottom fw-semibold py-3">
				<i class="fas fa-info-circle me-2"></i>Informations générales
			</div>
			<div class="card-body">
				<div class="row g-3">
					<div class="col-md-3">
						<label class="form-label fw-semibold">Date de cession <span class="text-danger">*</span></label>
						<input type="date" name="date_cession" class="form-control"
							value="{{ cession ? cession.date_cession : (annee ~ '-' ~ '%02d'|format(mois)) }}" required>
					</div>
					<div class="col-md-5">
						<label class="form-label fw-semibold">Entité bénéficiaire <span class="text-danger">*</span></label>
						<input type="text" name="entite_beneficiaire" class="form-control"
							list="listeEntites" placeholder="Ex : Mairie, EHPAD Les Roses..."
							value="{{ cession ? cession.entite_beneficiaire : '' }}" required>
						<datalist id="listeEntites">
							{% for entite in entites %}
								<option value="{{ entite }}">
							{% endfor %}
						</datalist>
					</div>
					<div class="col-md-4">
						<label class="form-label fw-semibold">Statut</label>
						<select name="statut" class="form-select">
							<option value="brouillon" {{ (cession is null or cession.statut == 'brouillon') ? 'selected' : '' }}>Brouillon</option>
							<option value="validée" {{ (cession and cession.statut == 'validée') ? 'selected' : '' }}>Validée ✓ (impact synthèse)</option>
						</select>
					</div>
					<div class="col-12">
						<label class="form-label fw-semibold">Motif / Objet</label>
						<input type="text" name="motif" class="form-control"
							placeholder="Ex : Repas seniors Fête de la Commune du 15 mars"
							value="{{ cession ? (cession.motif ?? '') : '' }}">
					</div>
				</div>
			</div>
		</div>

		{# ── Lignes de détail ────────────────────────────────────────────── #}
		<div class="card border-0 shadow-sm rounded-3 mb-4">
			<div class="card-header bg-white border-bottom fw-semibold py-3 d-flex justify-content-between align-items-center">
				<span><i class="fas fa-list me-2"></i>Détail des matières cédées</span>
				<button type="button" class="btn btn-sm btn-outline-primary" id="btnAjouterLigne">
					<i class="fas fa-plus me-1"></i>Ajouter une ligne
				</button>
			</div>
			<div class="card-body p-0">
				<div class="table-responsive">
					<table class="table mb-0 align-middle" id="tableLignes">
						<thead class="table-light">
							<tr>
								<th style="min-width:220px">Description</th>
								<th style="width:90px">Quantité</th>
								<th style="width:110px">Unité</th>
								<th style="width:140px">Prix ↕ HT/TTC</th>
								<th style="width:100px">TVA %</th>
								<th style="width:110px" class="text-end">Montant HT</th>
								<th style="width:110px" class="text-end">Montant TTC</th>
								<th style="width:50px"></th>
							</tr>
						</thead>
						<tbody id="corpsTablLignes">
							{% for i, ligne in lignes %}
								<tr class="ligne-cession">
									<td><input type="text" name="lignes[{{ i }}][description]" class="form-control form-control-sm" value="{{ ligne.description }}" placeholder="Produit / article" required></td>
									<td><input type="number" name="lignes[{{ i }}][quantite]" class="form-control form-control-sm champ-calcul" value="{{ ligne.quantite }}" step="0.001" min="0.001" required></td>
									<td>
										<input type="text" name="lignes[{{ i }}][unite]" class="form-control form-control-sm" list="listeUnites" value="{{ ligne.unite }}">
									</td>
									<td>
										{# Champ HT réel (toujours soumis) #}
										<input type="hidden" name="lignes[{{ i }}][prix_unitaire_ht]" class="ligne-prix" value="{{ ligne.prix_unitaire_ht }}">
										{# Champ visible : HT par défaut #}
										<div class="input-group input-group-sm">
											<input type="number" class="form-control form-control-sm ligne-prix-visible" value="{{ ligne.prix_unitaire_ht }}" step="0.001" min="0" required>
											<button type="button" class="btn btn-outline-secondary btn-toggle-mode ligne-toggle-mode px-1" title="Basculer HT/TTC" style="font-size:.7rem;min-width:36px">HT</button>
										</div>
										<input type="hidden" class="ligne-mode" value="HT">
									</td>
									<td>
										<select name="lignes[{{ i }}][taux_tva]" class="form-select form-select-sm champ-calcul">
											{% for taux in tauxTva %}
												<option value="{{ taux }}" {{ ligne.taux_tva == taux ? 'selected' : '' }}>{{ taux }}%</option>
											{% endfor %}
										</select>
									</td>
									<td class="text-end"><span class="montant-ht fw-semibold">{{ ligne.montant_ht|number_format(2, ',', ' ') }}</span> €</td>
									<td class="text-end"><span class="montant-ttc fw-semibold">{{ ligne.montant_ttc|number_format(2, ',', ' ') }}</span> €</td>
									<td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger btn-suppr-ligne"><i class="fas fa-times"></i></button></td>
								</tr>
							{% else %}
								{# Ligne vide par défaut #}
								<tr class="ligne-cession">
									<td><input type="text" name="lignes[0][description]" class="form-control form-control-sm" placeholder="Produit / article" required></td>
									<td><input type="number" name="lignes[0][quantite]" class="form-control form-control-sm champ-calcul" value="1" step="0.001" min="0.001" required></td>
									<td>
										<input type="text" name="lignes[0][unite]" class="form-control form-control-sm" list="listeUnites" value="">
									</td>
									<td>
										<input type="hidden" name="lignes[0][prix_unitaire_ht]" class="ligne-prix" value="">
										<div class="input-group input-group-sm">
											<input type="number" class="form-control form-control-sm ligne-prix-visible" value="" step="0.001" min="0" required>
											<button type="button" class="btn btn-outline-secondary btn-toggle-mode ligne-toggle-mode px-1" title="Basculer HT/TTC" style="font-size:.7rem;min-width:36px">HT</button>
										</div>
										<input type="hidden" class="ligne-mode" value="HT">
									</td>
									<td>
										<select name="lignes[0][taux_tva]" class="form-select form-select-sm champ-calcul">
											{% for taux in tauxTva %}
												<option value="{{ taux }}" {{ taux == 5.5 ? 'selected' : '' }}>{{ taux }}%</option>
											{% endfor %}
										</select>
									</td>
									<td class="text-end"><span class="montant-ht fw-semibold">0,00</span> €</td>
									<td class="text-end"><span class="montant-ttc fw-semibold">0,00</span> €</td>
									<td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger btn-suppr-ligne"><i class="fas fa-times"></i></button></td>
								</tr>
							{% endfor %}
						</tbody>
						<tfoot>
							<tr class="table-light fw-bold">
								<td colspan="5" class="text-end">TOTAL</td>
								<td class="text-end"><span id="totalHT">0,00</span> €</td>
								<td class="text-end"><span id="totalTTC">0,00</span> €</td>
								<td></td>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>

		<datalist id="listeUnites">
			{% for u in unites %}<option value="{{ u }}">{% endfor %}
		</datalist>

		<div class="d-flex justify-content-end gap-2">
			<a href="{{ path('tenant_cessions_index', {annee: annee, mois: mois}) }}" class="btn btn-outline-secondary">Annuler</a>
			<button type="submit" class="btn btn-app-primary">
				<i class="fas fa-save me-1"></i>{{ cession ? 'Enregistrer les modifications' : 'Créer la cession' }}
			</button>
		</div>
	</form>

{% endblock body %}

{% block javascripts %}
	{{ parent() }}
	<script>
		(function () {
			let ligneIndex = document.querySelectorAll('.ligne-cession').length;

			// ── Toggle HT / TTC ─────────────────────────────────────────────
			function toggleModePrix(btn) {
				const tr     = btn.closest('.ligne-cession');
				const modeEl = tr.querySelector('.ligne-mode');
				const champHT  = tr.querySelector('.ligne-prix');          // hidden, soumis
				const champVis = tr.querySelector('.ligne-prix-visible');  // affiché
				const tva      = parseFloat(tr.querySelector('[name*="[taux_tva]"]')?.value) || 0;
				const mode     = modeEl.value;
				const val      = parseFloat(champVis.value) || 0;

				if (mode === 'HT') {
					// On passe en TTC : afficher TTC calculé
					const valTTC   = Math.round(val * (1 + tva / 100) * 1000) / 1000;
					champHT.value  = val.toString();
					champVis.value = valTTC.toString();
					btn.textContent = 'TTC';
					btn.classList.replace('btn-outline-secondary', 'btn-outline-warning');
					modeEl.value = 'TTC';
				} else {
					// On repasse en HT : convert TTC → HT
					const valHT    = tva > 0 ? Math.round((val / (1 + tva / 100)) * 1000) / 1000 : val;
					champHT.value  = valHT.toString();
					champVis.value = valHT.toString();
					btn.textContent = 'HT';
					btn.classList.replace('btn-outline-warning', 'btn-outline-secondary');
					modeEl.value = 'HT';
				}
				calculerLigne(tr);
				recalculerTotaux();
			}

			// ── Calcul d'une ligne ──────────────────────────────────────────
			function calculerLigne(tr) {
				const qte  = parseFloat(tr.querySelector('[name*="[quantite]"]')?.value) || 0;
				const tva  = parseFloat(tr.querySelector('[name*="[taux_tva]"]')?.value) || 0;
				const mode = tr.querySelector('.ligne-mode')?.value || 'HT';
				const vis  = parseFloat(tr.querySelector('.ligne-prix-visible')?.value) || 0;

				let puHT;
				if (mode === 'TTC') {
					puHT = tva > 0 ? Math.round((vis / (1 + tva / 100)) * 1000) / 1000 : vis;
					tr.querySelector('.ligne-prix').value = puHT.toString();
				} else {
					puHT = vis;
					tr.querySelector('.ligne-prix').value = puHT.toString();
				}

				const mHT  = Math.round(qte * puHT * 100) / 100;
				const mTTC = Math.round(mHT * (1 + tva / 100) * 100) / 100;
				tr.querySelector('.montant-ht').textContent  = mHT.toFixed(2).replace('.', ',');
				tr.querySelector('.montant-ttc').textContent = mTTC.toFixed(2).replace('.', ',');
				return { mHT, mTTC };
			}

			// ── Recalcul des totaux ─────────────────────────────────────────
			function recalculerTotaux() {
				let tHT = 0, tTTC = 0;
				document.querySelectorAll('.ligne-cession').forEach(tr => {
					const r = calculerLigne(tr);
					tHT  += r.mHT;
					tTTC += r.mTTC;
				});
				document.getElementById('totalHT').textContent  = tHT.toFixed(2).replace('.', ',');
				document.getElementById('totalTTC').textContent = tTTC.toFixed(2).replace('.', ',');
			}

			// ── Ajout d'une ligne ───────────────────────────────────────────
			function nouvelleLigne() {
				const tbody = document.getElementById('corpsTablLignes');
				const idx   = ligneIndex++;
				const tauxOptions = [0, 5.5, 10, 20].map(t =>
					`<option value="${t}"${t === 5.5 ? ' selected' : ''}>${t}%</option>`
				).join('');
				const tr = document.createElement('tr');
				tr.className = 'ligne-cession';
				tr.innerHTML = `
					<td><input type="text" name="lignes[${idx}][description]" class="form-control form-control-sm" placeholder="Produit / article" required></td>
					<td><input type="number" name="lignes[${idx}][quantite]" class="form-control form-control-sm" value="1" step="0.001" min="0.001" required></td>
					<td><input type="text" name="lignes[${idx}][unite]" class="form-control form-control-sm" list="listeUnites"></td>
					<td>
						<input type="hidden" name="lignes[${idx}][prix_unitaire_ht]" class="ligne-prix" value="">
						<div class="input-group input-group-sm">
							<input type="number" class="form-control form-control-sm ligne-prix-visible" value="" step="0.001" min="0" required>
							<button type="button" class="btn btn-outline-secondary btn-toggle-mode ligne-toggle-mode px-1" title="Basculer HT/TTC" style="font-size:.7rem;min-width:36px">HT</button>
						</div>
						<input type="hidden" class="ligne-mode" value="HT">
					</td>
					<td><select name="lignes[${idx}][taux_tva]" class="form-select form-select-sm champ-calcul">${tauxOptions}</select></td>
					<td class="text-end"><span class="montant-ht fw-semibold">0,00</span> €</td>
					<td class="text-end"><span class="montant-ttc fw-semibold">0,00</span> €</td>
					<td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger btn-suppr-ligne"><i class="fas fa-times"></i></button></td>
				`;
				tbody.appendChild(tr);
				tr.querySelector('input[type="text"]').focus();
			}

			// ── Suppression d'une ligne ─────────────────────────────────────
			document.getElementById('corpsTablLignes').addEventListener('click', function (e) {
				const btnSuppr = e.target.closest('.btn-suppr-ligne');
				if (btnSuppr) {
					const lignes = document.querySelectorAll('.ligne-cession');
					if (lignes.length <= 1) return;
					btnSuppr.closest('tr').remove();
					recalculerTotaux();
					return;
				}
				const btnToggle = e.target.closest('.btn-toggle-mode');
				if (btnToggle) {
					toggleModePrix(btnToggle);
				}
			});

			// ── Événements de calcul ────────────────────────────────────────
			document.getElementById('tableLignes').addEventListener('input', function (e) {
				if (e.target.matches('.ligne-prix-visible, select.champ-calcul')) {
					recalculerTotaux();
				}
			});
			document.getElementById('tableLignes').addEventListener('change', function (e) {
				if (e.target.matches('select.champ-calcul')) {
					recalculerTotaux();
				}
			});

			document.getElementById('btnAjouterLigne').addEventListener('click', function () {
				nouvelleLigne();
				recalculerTotaux();
			});

			// Calcul initial
			recalculerTotaux();
		})();
	</script>
{% endblock %}