{# === MODALE: Éditer le stock === #}
<div class="modal-dialog modal-xl modal-dialog-centered">
  <form id="modalEditStock"
        name="edit_stock"
        method="post"
        action="{{ path('edit_stock', {'id': stock.id }) }}"
        enctype="multipart/form-data"
        class="modal-content">

    <div class="modal-header border-0 pb-2">
      <div class="d-flex align-items-center gap-2">
        <span class="edit-stock-icon"><i class="fa fa-cubes"></i></span>
        <div>
          <h5 class="modal-title mb-0">Modifier le stock</h5>
          <small class="text-muted">Ajustement manuel</small>
        </div>
      </div>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>

    <div class="modal-body pt-2 pb-2">
      {# Déclinaison ciblée #}
      <div class="edit-stock-target mb-4">
        <div class="target-label">Déclinaison concernée</div>
        <div class="target-value">
          <span class="badge bg-light text-dark border me-1">{{ stock.declinationProduit.reference ?? '-' }}</span>
          <span class="text-muted small">{{ stock.declinationProduit.name ?? '' }}</span>
        </div>
      </div>

      {# KPI #}
      <div class="row g-2 mb-3">
        <div class="col-6 col-md-4">
          <div class="kpi text-center" data-bs-toggle="tooltip" title="Stock actuel">
            <div class="label">Actuel</div>
            <div class="value" id="current-stock">{{ stock.qtStock }}</div>
          </div>
        </div>
        <div class="col-6 col-md-4">
          <div class="kpi text-center" data-bs-toggle="tooltip" title="Stock réservé">
            <div class="label">Réservé</div>
            <div class="value">{{ stock.qtReserved ?? 0 }}</div>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="kpi text-center" id="final-kpi" data-bs-toggle="tooltip" title="Stock estimé après modification">
            <div class="label">Estimé</div>
            <div class="value" id="final-stock">{{ stock.qtStock }}</div>
          </div>
        </div>
      </div>

      <div id="neg-warning" class="alert alert-danger d-none py-2 mb-3" role="alert">
        Le stock estimé devient négatif.
      </div>

      {# Ajustement quantité #}
      <div class="row justify-content-center mb-3">
        <div class="col-12 col-md-10">
          <label for="edit_qty" class="form-label fw-semibold">Ajustement quantité</label>
          <div class="input-group input-group-sm">
            <button class="btn btn-secondary" type="button" id="qty-minus" title="Diminuer">
              <i class="fa fa-minus"></i>
            </button>
            <input id="edit_qty"
                   type="number"
                   class="form-control text-center"
                   name="edit_stock[qt]"
                   value="0"
                   step="1"
                   placeholder="0">
            <button class="btn btn-secondary" type="button" id="qty-plus" title="Augmenter">
              <i class="fa fa-plus"></i>
            </button>
          </div>
          <small class="text-muted">Valeur positive = ajout, valeur négative = retrait.</small>
        </div>
      </div>

      {# Motif + Note #}
      <div class="row g-2">
        <div class="col-12 col-md-12">
          <label for="edit_reason" class="form-label fw-semibold">Motif</label>
          {% set stockReasons = stockReasons is defined ? stockReasons : [
            {'id':'ajustement', 'name':'Ajustement inventaire'},
            {'id':'perte', 'name':'Perte / Casse'},
            {'id':'correction', 'name':'Correction d’erreur'},
            {'id':'defaut', 'name':'Défaut'},
            {'id':'retour_client', 'name':'Retour client'},
            {'id':'don', 'name':'Don / Échantillon'},
            {'id':'transfert', 'name':'Transfert entrepôt'},
            {'id':'inconnu', 'name':'Motif inconnu'}
          ] %}
          <select id="edit_reason" name="edit_stock[reason]" class="form-control">
            <option value="">Sélectionner</option>
            {% for r in stockReasons %}
              <option value="{{ r.id }}">{{ r.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-12">
          <label for="edit_note" class="form-label fw-semibold">Note (optionnel)</label>
          <input id="edit_note" type="text" class="form-control" name="edit_stock[note]" placeholder="Infos supplémentaires">
        </div>
      </div>
    </div>

    <div class="modal-footer border-0 pt-2 d-flex justify-content-end gap-2">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
        <i class="fa fa-times me-1"></i> Annuler
      </button>
      <button type="submit" class="btn btn-dark loader-submit-modal">
        <i class="fa fa-save me-1"></i> Enregistrer
      </button>
    </div>
  </form>
</div>

<style>
  #modalEditStock.modal-content { border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.10); }
  #modalEditStock .modal-title { font-size: 1.05rem; font-weight: 700; color: #111827; }
  .edit-stock-icon { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background:#eef4ff; color:#1d4ed8; }
  .edit-stock-target { border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; background:#f9fafb; }
  .edit-stock-target .target-label { font-size:.74rem; color:#6b7280; }
  .edit-stock-target .target-value { font-size:.88rem; font-weight:600; color:#111827; }
  #modalEditStock .kpi { border:1px solid #e5e7eb; border-radius:10px; background:#fff; padding:8px 10px; }
  #modalEditStock .kpi .label { font-size:.75rem; color:#6b7280; }
  #modalEditStock .kpi .value { font-size:1.1rem; font-weight:800; }
  #modalEditStock .kpi.pos { background:#e8f5e9; }
  #modalEditStock .kpi.zero { background:#f5f5f5; }
  #modalEditStock .kpi.neg { background:#fdecea; }
</style>

<script>
(function () {
  var $form  = document.getElementById('modalEditStock');
  var $qty   = document.getElementById('edit_qty');
  var $cur   = document.getElementById('current-stock');
  var $final = document.getElementById('final-stock');
  var $kpi   = document.getElementById('final-kpi');
  var $warn  = document.getElementById('neg-warning');

  if (!$form || !$qty || !$cur || !$final || !$kpi) return;

  var curVal = parseInt($cur.textContent, 10) || 0;

  function refresh() {
    var delta = parseInt($qty.value, 10) || 0;
    var est = curVal + delta;
    $final.textContent = est;

    $kpi.classList.remove('pos','zero','neg');
    if (est > 0) $kpi.classList.add('pos');
    else if (est < 0) $kpi.classList.add('neg');
    else $kpi.classList.add('zero');

    if ($warn) $warn.classList.toggle('d-none', est >= 0);
  }

  var plus = document.getElementById('qty-plus');
  var minus = document.getElementById('qty-minus');

  if (plus) plus.addEventListener('click', function () {
    $qty.value = (parseInt($qty.value || '0', 10) + 1);
    refresh();
  });

  if (minus) minus.addEventListener('click', function () {
    $qty.value = (parseInt($qty.value || '0', 10) - 1);
    refresh();
  });

  $qty.addEventListener('input', refresh);

  $form.addEventListener('submit', function (e) {
    var delta = parseInt($qty.value, 10) || 0;
    var est = curVal + delta;
    if (est < 0) {
      var ok = window.confirm('Le stock estimé devient négatif. Voulez-vous continuer ?');
      if (!ok) {
        e.preventDefault();
        e.stopPropagation();
      }
    }
  });

  refresh();
})();

$(function () {
  $('[data-bs-toggle="tooltip"]').tooltip();

  // Select motif propre en modal
  if ($('#edit_reason').length && $.fn.select2) {
    $('#edit_reason').select2({
      width: '100%',
      dropdownParent: $('#modalEditStock').closest('.modal')
    });
  }
});
</script>