{% extends 'base.html' %}
{% block title %}Opname Baru{% endblock %}
{% block content %}
<div class="mb-4"><a href="{% url 'opname_list' %}" class="text-xs text-neutral-500 hover:text-red-600"><i class="fas fa-arrow-left mr-1"></i>Stock Opname</a><h1 class="page-title mt-1">Opname Baru</h1><p class="page-sub">Isi kolom "Fisik" hanya untuk varian yang dihitung. Yang kosong dilewati. Bisa difilter per kategori supaya tidak terlalu panjang.</p></div>
<form class="card p-3 mb-4 grid grid-cols-2 md:grid-cols-5 gap-2">
  <input name="q" value="{{ q }}" placeholder="Cari produk / SKU" class="form-input col-span-2">
  <select name="kategori" class="form-input col-span-2 md:col-span-2"><option value="">Semua kategori</option>{% for k in kategori_list %}<option value="{{ k.id }}" {% if kategori_f == k.id|stringformat:"s" %}selected{% endif %}>{{ k.nama }}</option>{% endfor %}</select>
  <button class="btn btn-primary"><i class="fas fa-filter"></i> Filter</button>
</form>
<form method="post" id="fSo">
  {% csrf_token %}
  <div class="card p-4 mb-4 flex flex-wrap gap-3 items-end">
    <div><label class="form-label">Tanggal</label><input type="date" name="tanggal" value="{{ today }}" class="form-input" required></div>
    <div class="flex-1 min-w-[200px]"><label class="form-label">Catatan</label><input name="catatan" class="form-input" placeholder="mis. Opname akhir bulan"></div>
    <button type="button" onclick="isiSama()" class="btn btn-secondary"><i class="fas fa-equals"></i> Isi semua = sistem</button>
    <button class="btn btn-accent" id="btnSimpan"><i class="fas fa-save"></i> Simpan Opname (<span id="jml">0</span> varian)</button>
  </div>
  <div class="card overflow-hidden"><div class="overflow-x-auto"><table class="tbl">
    <thead><tr><th>Produk</th><th>Varian</th><th>SKU</th><th class="num">Sistem</th><th class="num" style="width:120px">Fisik</th><th class="num">Selisih</th></tr></thead>
    <tbody>{% for v in varian_list %}
    <tr><td><span class="font-medium">{{ v.produk.nama }}</span></td><td class="font-bold">{{ v.label }}</td><td class="text-xs text-neutral-500">{{ v.sku|default:"-" }}</td>
    <td class="num sistem">{{ v.stok }}</td>
    <td><input name="fisik_{{ v.id }}" inputmode="numeric" class="form-input text-right fisik" placeholder="-" oninput="hitung(this)"></td>
    <td class="num selisih text-neutral-300">-</td></tr>
    {% empty %}<tr><td colspan="6" class="text-center text-neutral-400 py-8">Tidak ada varian.</td></tr>{% endfor %}</tbody></table></div></div>
</form>
{% endblock %}
{% block extra_js %}
<script>
function hitung(inp){
  const tr=inp.closest('tr'),sis=Number(tr.querySelector('.sistem').textContent),sel=tr.querySelector('.selisih');
  if(inp.value.trim()===''){sel.textContent='-';sel.className='num selisih text-neutral-300';}
  else{const d=Number(inp.value)-sis;sel.textContent=(d>0?'+':'')+d;sel.className='num selisih font-bold '+(d<0?'text-red-600':d>0?'text-green-700':'text-neutral-400');}
  document.getElementById('jml').textContent=[...document.querySelectorAll('.fisik')].filter(i=>i.value.trim()!=='').length;
}
function isiSama(){document.querySelectorAll('.fisik').forEach(i=>{if(i.value.trim()==='')i.value=i.closest('tr').querySelector('.sistem').textContent;hitung(i);});}
document.getElementById('fSo').addEventListener('submit',e=>{const n=Number(document.getElementById('jml').textContent);if(!n){e.preventDefault();alert('Isi minimal satu hitungan fisik');return;}if(!confirm('Simpan opname untuk '+n+' varian? Stok sistem akan disesuaikan ke hitungan fisik.'))e.preventDefault();});
document.querySelectorAll('.fisik').forEach(i=>i.addEventListener('keydown',e=>{if(e.key==='Enter'){e.preventDefault();const all=[...document.querySelectorAll('.fisik')];const nx=all[all.indexOf(i)+1];if(nx)nx.focus();}}));
</script>
{% endblock %}