{% extends 'base.html' %}
{% block title %}Penyesuaian Stok{% endblock %}
{% block content %}
<div class="mb-4"><h1 class="page-title">Penyesuaian Stok Manual</h1><p class="page-sub">Untuk barang rusak, hilang, hadiah, salah input, dll. Wajib isi keterangan supaya jejaknya jelas.</p></div>
<div class="grid lg:grid-cols-3 gap-4">
  <form method="post" class="card p-5 space-y-3 lg:col-span-1">
    {% csrf_token %}<input type="hidden" name="varian_id" id="varian_id">
    <div><label class="form-label">Cari varian *</label>
      <div class="relative"><input id="cari" class="form-input" placeholder="Nama produk / SKU / ukuran" autocomplete="off" required>
      <div id="hasil" class="absolute z-20 left-0 right-0 bg-white border border-neutral-200 rounded-xl shadow-lg mt-1 max-h-64 overflow-y-auto hidden"></div></div>
      <p class="form-help" id="pilih">Belum dipilih</p></div>
    <div><label class="form-label">Arah</label><div class="grid grid-cols-2 gap-2">
      <label class="flex items-center gap-2 border border-neutral-200 rounded-lg px-3 py-2 text-sm cursor-pointer has-[:checked]:border-green-500 has-[:checked]:bg-green-50"><input type="radio" name="arah" value="masuk" checked class="accent-green-600"> <i class="fas fa-arrow-down text-green-600"></i> Masuk</label>
      <label class="flex items-center gap-2 border border-neutral-200 rounded-lg px-3 py-2 text-sm cursor-pointer has-[:checked]:border-red-500 has-[:checked]:bg-red-50"><input type="radio" name="arah" value="keluar" class="accent-red-600"> <i class="fas fa-arrow-up text-red-600"></i> Keluar</label></div></div>
    <div><label class="form-label">Qty (pasang) *</label><input name="qty" inputmode="numeric" class="form-input" value="1" required></div>
    <div><label class="form-label">Keterangan *</label><input name="keterangan" class="form-input" placeholder="mis. Rusak / cacat produksi" required></div>
    <button class="btn btn-accent w-full justify-center"><i class="fas fa-check"></i> Simpan Penyesuaian</button>
  </form>
  <div class="card overflow-hidden lg:col-span-2">
    <div class="px-5 py-3 border-b border-neutral-100"><h3 class="font-bold text-sm">Penyesuaian Terakhir</h3></div>
    <table class="tbl"><thead><tr><th>Waktu</th><th>Varian</th><th class="num">Qty</th><th class="num">Sesudah</th><th>Keterangan</th><th>Oleh</th></tr></thead>
    <tbody>{% for m in terakhir %}
    <tr><td class="text-xs text-neutral-500 whitespace-nowrap">{{ m.dibuat|date:"d/m H:i" }}</td><td class="text-sm">{{ m.varian.produk.nama_lengkap }} <span class="text-neutral-500">({{ m.varian.label }})</span></td>
    <td class="num font-bold {% if m.qty > 0 %}text-green-700{% else %}text-red-600{% endif %}">{{ m.qty|stringformat:"+d" }}</td><td class="num">{{ m.stok_sesudah }}</td><td class="text-xs text-neutral-500">{{ m.keterangan }}</td><td class="text-xs text-neutral-500">{{ m.dibuat_oleh.username|default:"-" }}</td></tr>
    {% empty %}<tr><td colspan="6" class="text-center text-neutral-400 py-8">Belum ada penyesuaian.</td></tr>{% endfor %}</tbody></table>
  </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
const cari=document.getElementById('cari'),hasil=document.getElementById('hasil');let t,hasilCache=[];
cari.addEventListener('input',()=>{document.getElementById('varian_id').value='';document.getElementById('pilih').textContent='Belum dipilih';clearTimeout(t);t=setTimeout(()=>{const q=cari.value.trim();if(!q){hasil.classList.add('hidden');return;}
fetch('/api/cari-varian/?q='+encodeURIComponent(q)).then(r=>r.json()).then(d=>{hasilCache=d.varian;hasil.innerHTML=d.varian.length?d.varian.map((v,i)=>`<button type="button" class="w-full text-left px-4 py-2 hover:bg-red-50 border-b border-neutral-50 text-sm" onclick="pilih(hasilCache[${i}])"><b>${v.nama_lengkap}</b><br><span class="text-xs text-neutral-500">${v.sku||'tanpa SKU'} · stok ${v.stok}</span></button>`).join(''):'<p class="px-4 py-3 text-sm text-neutral-400">Tidak ditemukan</p>';hasil.classList.remove('hidden');});},250);});
function pilih(v){document.getElementById('varian_id').value=v.id;cari.value=v.nama_lengkap;document.getElementById('pilih').innerHTML='<span class="text-green-700 font-semibold">Dipilih:</span> '+v.nama_lengkap+' · stok sekarang <b>'+v.stok+'</b>';hasil.classList.add('hidden');}
document.addEventListener('click',e=>{if(!hasil.contains(e.target)&&e.target!==cari)hasil.classList.add('hidden');});
cari.addEventListener('keydown',e=>{if(e.key==='Enter')e.preventDefault();});
</script>
{% endblock %}