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

{% block title %}Ajustement d'inventaire — {{ 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-balance-scale me-2 text-info"></i>Ajustement d'inventaire
	</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é théorique : <strong>{{ stock.quantite|number_format(3, ',', ' ') }} {{ stock.unite }}</strong>
					{% if stock.categorie %} · {{ stock.categorie }}{% endif %}
				</div>
			</div>
			<div class="card-body">
				<div class="alert alert-info py-2 small mb-3">
					<i class="fas fa-info-circle me-1"></i>
					Saisissez la quantité <strong>réelle comptée</strong> lors de l'inventaire physique.
					L'écart sera tracé dans l'historique des mouvements.
				</div>

				<form method="post">
					<input type="hidden" name="_token" value="{{ csrf_token('stock_ajustement_' ~ stock.id) }}">

					<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 }}"
							       required autofocus>
							<span class="input-group-text">{{ stock.unite }}</span>
						</div>
						<div class="form-text" id="ecartInfo">
							Écart : <span id="ecartVal">0</span> {{ stock.unite }}
						</div>
					</div>

					<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 : Inventaire mensuel {{ 'now'|date('m/Y') }}, correction de saisie…">
					</div>

					<div class="d-flex gap-2">
						<button type="submit" class="btn btn-info text-white">
							<i class="fas fa-balance-scale me-1"></i>Valider l'ajustement
						</button>
						<a href="{{ path('tenant_stocks_index') }}" class="btn btn-outline-secondary">Annuler</a>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<script>
(function () {
	const input   = document.getElementById('nouvelle_quantite');
	const ecartEl = document.getElementById('ecartVal');
	const base    = {{ stock.quantite }};

	function maj() {
		const val   = parseFloat(input.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' : '';
	}

	input.addEventListener('input', maj);
	maj();
})();
</script>
{% endblock body %}