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

{% block title %}Mouvement de stock — {{ stock.produit }}{% endblock %}

{% block body %}
<div class="d-flex align-items-center gap-3 mb-4">
	<a href="{{ path('tenant_stocks_index') }}" class="btn btn-sm btn-outline-secondary">
		<i class="fas fa-arrow-left"></i>
	</a>
	<h1 class="h3 fw-bold page-title mb-0">
		<i class="fas fa-exchange-alt me-2 text-info"></i>Mouvement de stock
	</h1>
</div>

<div class="row justify-content-center">
	<div class="col-md-6">
		<div class="card border-0 shadow-sm">
			<div class="card-header bg-info bg-opacity-10 border-0 py-3">
				<div class="fw-semibold">{{ stock.produit }}</div>
				<div class="text-muted small">
					Quantité actuelle : <strong id="qteActuelle">{{ stock.quantite|number_format(3, ',', ' ') }} {{ stock.unite }}</strong>
					{% if stock.categorie %} · {{ stock.categorie }}{% endif %}
				</div>
			</div>
			<div class="card-body">
				<form method="post" id="formMouvement">
					<input type="hidden" name="_token" value="{{ csrf_token('stock_mouvement_' ~ stock.id) }}">

					{# Type de mouvement #}
					<div class="mb-3">
						<label class="form-label fw-semibold">Type de mouvement <span class="text-danger">*</span></label>
						<div class="d-flex gap-2">
							<input type="radio" class="btn-check" name="type" id="typeEntree"   value="entree"     autocomplete="off" checked>
							<label class="btn btn-outline-success flex-fill text-center" for="typeEntree">
								<i class="fas fa-arrow-up me-1"></i>Entrée
							</label>

							<input type="radio" class="btn-check" name="type" id="typeSortie"   value="sortie"     autocomplete="off">
							<label class="btn btn-outline-warning flex-fill text-center" for="typeSortie">
								<i class="fas fa-arrow-down me-1"></i>Sortie
							</label>

							<input type="radio" class="btn-check" name="type" id="typeAjust"    value="ajustement" autocomplete="off">
							<label class="btn btn-outline-info flex-fill text-center" for="typeAjust">
								<i class="fas fa-balance-scale me-1"></i>Inventaire
							</label>
						</div>
					</div>

					{# Date du mouvement #}
					<div class="mb-3">
						<label for="date" class="form-label fw-semibold">Date du mouvement</label>
						<input type="date" id="date" name="date"
						       class="form-control"
						       value="{{ 'now'|date('Y-m-d') }}"
						       max="{{ 'now'|date('Y-m-d') }}">
					</div>

					{# Zone Entrée / Sortie #}
					<div id="zoneQte">
						<div class="mb-3">
							<label for="quantite" class="form-label fw-semibold" id="labelQte">
								Quantité <span class="text-danger">*</span>
							</label>
							<div class="input-group">
								<input type="number" id="quantite" name="quantite"
								       class="form-control"
								       min="0.001" step="0.001"
								       placeholder="0.000"
								       required autofocus>
								<span class="input-group-text">{{ stock.unite }}</span>
							</div>
						</div>
					</div>

					{# Zone Ajustement inventaire #}
					<div id="zoneAjust" class="d-none">
						<div class="alert alert-info py-2 small mb-3">
							<i class="fas fa-info-circle me-1"></i>
							Saisissez la <strong>quantité réelle comptée</strong> lors de l'inventaire physique.
							L'écart sera tracé dans l'historique.
						</div>
						<div class="mb-3">
							<label for="nouvelle_quantite" class="form-label fw-semibold">
								Quantité réelle (inventaire) <span class="text-danger">*</span>
							</label>
							<div class="input-group">
								<input type="number" id="nouvelle_quantite" name="nouvelle_quantite"
								       class="form-control"
								       min="0" step="0.001"
								       value="{{ stock.quantite }}">
								<span class="input-group-text">{{ stock.unite }}</span>
							</div>
							<div class="form-text">
								Écart : <span id="ecartVal">0</span> {{ stock.unite }}
							</div>
						</div>
					</div>

					{# Motif #}
					<div class="mb-4">
						<label for="motif" class="form-label fw-semibold">
							Motif <span class="text-muted fw-normal">(optionnel)</span>
						</label>
						<input type="text" id="motif" name="motif" class="form-control"
						       maxlength="255"
						       placeholder="Ex : Livraison fournisseur, inventaire mensuel, perte…">
					</div>

					<div class="d-flex gap-2">
						<button type="submit" class="btn text-white flex-fill" id="btnSubmit">
							<i class="fas fa-check me-1" id="btnIcon"></i>
							<span id="btnLabel">Valider l'entrée</span>
						</button>
						<a href="{{ path('tenant_stocks_index') }}" class="btn btn-outline-secondary">Annuler</a>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<script>
(function () {
	const radios  = document.querySelectorAll('input[name="type"]');
	const zoneQte   = document.getElementById('zoneQte');
	const zoneAjust = document.getElementById('zoneAjust');
	const qteInput  = document.getElementById('quantite');
	const ajustInput= document.getElementById('nouvelle_quantite');
	const ecartEl   = document.getElementById('ecartVal');
	const btnSubmit = document.getElementById('btnSubmit');
	const btnLabel  = document.getElementById('btnLabel');
	const btnIcon   = document.getElementById('btnIcon');
	const labelQte  = document.getElementById('labelQte');
	const base      = {{ stock.quantite }};

	const config = {
		entree:     { label: "Quantité entrante", btn: "Valider l'entrée",    cls: "btn-success", icon: "fa-arrow-up" },
		sortie:     { label: "Quantité sortante", btn: "Valider la sortie",   cls: "btn-warning", icon: "fa-arrow-down" },
		ajustement: { label: "",                  btn: "Valider l'inventaire",cls: "btn-info",    icon: "fa-balance-scale" },
	};

	function majEcart() {
		const val   = parseFloat(ajustInput.value) || 0;
		const ecart = val - base;
		ecartEl.textContent = (ecart >= 0 ? '+' : '') +
			ecart.toLocaleString('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 3 });
		ecartEl.className = ecart < 0 ? 'text-danger fw-semibold' :
		                    ecart > 0 ? 'text-success fw-semibold' : '';
	}

	function applyType(type) {
		const c = config[type];
		if (type === 'ajustement') {
			zoneQte.classList.add('d-none');
			zoneAjust.classList.remove('d-none');
			qteInput.removeAttribute('required');
			ajustInput.setAttribute('required', '');
		} else {
			zoneQte.classList.remove('d-none');
			zoneAjust.classList.add('d-none');
			qteInput.setAttribute('required', '');
			ajustInput.removeAttribute('required');
			labelQte.childNodes[0].textContent = c.label + ' ';
		}
		btnSubmit.className = 'btn text-white flex-fill ' + c.cls;
		btnLabel.textContent = c.btn;
		btnIcon.className = 'fas me-1 ' + c.icon;
	}

	radios.forEach(r => r.addEventListener('change', () => applyType(r.value)));
	ajustInput.addEventListener('input', majEcart);
	majEcart();
	applyType('entree');
})();
</script>
{% endblock body %}