{% extends "base.html" %}
{% block title %}Inventur-Wizard{% endblock %}
{% block heading %}📋 Inventur — Soll-Ist-Vergleich{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Operativ / Inventur / Wizard</p>{% endblock %}

{% block content %}
<style>
  .inv-row { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 80px; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .inv-row:hover { background:rgba(255,255,255,0.03); }
  .inv-row .label { font-weight:600; }
  .inv-row .label .desc { font-size:11px; color:rgba(255,255,255,0.55); font-weight:400; }
  .inv-row input { padding:6px 8px; background:rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.20); border-radius:5px; }
  .diff-badge { padding:2px 8px; border-radius:5px; font-size:11px; font-weight:700; text-align:center; }
  .diff-zero { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.55); }
  .diff-pos  { background:rgba(16,185,129,0.20); color:#6ee7b7; }
  .diff-neg  { background:rgba(239,68,68,0.20); color:#fca5a5; }
</style>

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;">
  <p style="font-size:13px;color:rgba(255,255,255,0.55);margin:0;">
    Pro Artikel die <strong>tatsächlich gezählte Menge</strong> eintragen → speichert direkt + zeigt Differenz.
  </p>
  <form method="get" action="/inventur/wizard" style="display:flex;gap:6px;">
    <select name="location" class="select" style="font-size:12px;">
      <option value="">— alle Lagerorte —</option>
      {% for loc in locations %}
      <option value="{{ loc }}" {% if selected_location == loc %}selected{% endif %}>{{ loc }}</option>
      {% endfor %}
    </select>
    <button type="submit" class="btn btn-sm btn-primary">Filter</button>
  </form>
</div>

<div class="card">
  <div class="card-header"><div><h2>{{ items|length }} Artikel — Erfassung</h2></div></div>

  <div class="inv-row" style="font-weight:700;text-transform:uppercase;font-size:10px;color:rgba(255,255,255,0.55);">
    <div>Artikel</div>
    <div>Lagerort</div>
    <div class="num">Soll</div>
    <div class="num">Ist (eingeben)</div>
    <div>Differenz</div>
    <div></div>
  </div>

  {% for it in items %}
  <div class="inv-row" data-item-id="{{ it.id }}" data-soll="{{ it.quantity_total or 0 }}">
    <div class="label">
      {{ it.ident or '?' }}
      {% if it.description %}<div class="desc">{{ it.description[:40] }}</div>{% endif %}
    </div>
    <div style="font-size:12px;color:rgba(255,255,255,0.55);">{{ it.location or '—' }}</div>
    <div class="num nums">{{ it.quantity_total or 0 }}</div>
    <div><input type="number" class="ist-input" min="0" placeholder="?" data-item-id="{{ it.id }}"></div>
    <div class="diff-display"><span class="diff-badge diff-zero">—</span></div>
    <div><button type="button" class="btn btn-sm btn-primary save-btn" data-item-id="{{ it.id }}">Speichern</button></div>
  </div>
  {% else %}
  <div style="padding:30px;text-align:center;color:rgba(255,255,255,0.40);">Keine Artikel gefunden.</div>
  {% endfor %}
</div>

<script>
function getCookie(n){return document.cookie.split('; ').find(r=>r.startsWith(n+'='))?.split('=')[1]||'';}

function updateDiff(itemId) {
  const row = document.querySelector(`.inv-row[data-item-id="${itemId}"]`);
  if (!row) return;
  const soll = parseInt(row.dataset.soll, 10) || 0;
  const ist = parseInt(row.querySelector('.ist-input').value, 10);
  const display = row.querySelector('.diff-display');
  if (isNaN(ist)) { display.innerHTML = '<span class="diff-badge diff-zero">—</span>'; return; }
  const diff = ist - soll;
  const cls = diff === 0 ? 'diff-zero' : (diff > 0 ? 'diff-pos' : 'diff-neg');
  const sign = diff > 0 ? '+' : '';
  display.innerHTML = `<span class="diff-badge ${cls}">${sign}${diff}</span>`;
}

document.querySelectorAll('.ist-input').forEach(inp => {
  inp.addEventListener('input', () => updateDiff(inp.dataset.itemId));
});

document.querySelectorAll('.save-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const itemId = btn.dataset.itemId;
    const row = document.querySelector(`.inv-row[data-item-id="${itemId}"]`);
    const ist = parseInt(row.querySelector('.ist-input').value, 10);
    if (isNaN(ist) || ist < 0) { alert('Bitte gültige Menge eintragen'); return; }
    const csrf = getCookie('csrf_token');
    btn.disabled = true; btn.textContent = '…';
    fetch('/inventur/correction', {
      method:'POST',
      headers:{'Content-Type':'application/json','X-CSRF-Token':csrf},
      body: JSON.stringify({item_id: parseInt(itemId), actual_qty: ist, csrf_token: csrf})
    }).then(r=>r.json()).then(d => {
      if (d.ok) {
        row.dataset.soll = String(ist);
        btn.textContent = '✓';
        btn.style.background = '#10b981';
        row.style.background = 'rgba(16,185,129,0.10)';
        setTimeout(() => { btn.textContent = 'Speichern'; btn.disabled = false; btn.style.background = ''; }, 2000);
        updateDiff(itemId);
      } else {
        btn.disabled = false; btn.textContent = 'Speichern';
        alert('Fehler: ' + (d.error||'unbekannt'));
      }
    });
  });
});
</script>

{% endblock %}