{% extends 'base.html' %}
{% block title %}Catat Pembelian{% endblock %}
{% block content %}
<div class="mb-4"><a href="{% url 'pembelian_list' %}" class="text-xs text-neutral-500 hover:text-red-600"><i class="fas fa-arrow-left mr-1"></i>Pembelian</a><h1 class="page-title mt-1">Catat Pembelian / Restock</h1><p class="page-sub">Cari varian, isi qty dan harga beli per pasang. Stok langsung bertambah saat disimpan.</p></div>
<form method="post" id="fPb" class="grid lg:grid-cols-3 gap-4">
  {% csrf_token %}
  <div class="lg:col-span-2 space-y-4">
    <div class="card p-4">
      <label class="form-label">Cari barang</label>
      <div class="relative">
        <input id="cari" class="form-input" placeholder="Ketik nama produk / SKU / ukuran..." autocomplete="off">
        <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-72 overflow-y-auto hidden"></div>
      </div>
      <p class="form-help">Varian belum ada? <a href="{% url 'produk_list' %}" class="text-red-600">Buat dulu di menu Produk</a>.</p>
    </div>
    <div class="card overflow-hidden">
      <table class="tbl"><thead><tr><th>Barang</th><th class="num" style="width:90px">Qty</th><th class="num" style="width:150px">Harga beli / psg</th><th class="num" style="width:130px">Subtotal</th><th style="width:40px"></th></tr></thead>
      <tbody id="rows"><tr id="kosong"><td colspan="5" class="text-center text-neutral-400 py-8">Belum ada barang. Cari di atas lalu klik untuk menambahkan.</td></tr></tbody>
      <tfoot><tr class="bg-neutral-50"><td class="font-bold text-right" colspan="3">Total</td><td class="num font-extrabold" id="total">Rp 0</td><td></td></tr></tfoot></table>
    </div>
  </div>
  <div class="space-y-4">
    <div class="card p-5 space-y-3">
      <div><label class="form-label">Tanggal</label><input type="date" name="tanggal" value="{{ today }}" class="form-input" required></div>
      <div><label class="form-label">Supplier</label><select name="supplier" class="form-input"><option value="">- tidak dicatat -</option>{% for s in supplier_list %}<option value="{{ s.id }}">{{ s.nama }}</option>{% endfor %}</select></div>
      <div><label class="form-label">Catatan</label><textarea name="catatan" rows="3" class="form-input" placeholder="No. nota supplier, dll."></textarea></div>
    </div>
    <button class="btn btn-accent w-full justify-center" id="btnSimpan" disabled><i class="fas fa-save"></i> Simpan Pembelian</button>
  </div>
</form>
{% endblock %}
{% block extra_js %}
<script>
const cari=document.getElementById('cari'),hasil=document.getElementById('hasil'),rows=document.getElementById('rows');
let t, hasilCache=[];
cari.addEventListener('input',()=>{clearTimeout(t);t=setTimeout(cariVarian,250);});
cari.addEventListener('focus',()=>{if(cari.value.trim())cariVarian();});
document.addEventListener('click',e=>{if(!hasil.contains(e.target)&&e.target!==cari)hasil.classList.add('hidden');});
function cariVarian(){
  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.5 hover:bg-red-50 border-b border-neutral-50 text-sm flex justify-between gap-2" onclick="tambah(hasilCache[${i}])"><span><b>${v.nama_lengkap}</b><br><span class="text-xs text-neutral-500">${v.sku||'tanpa SKU'} · stok ${v.stok} · HPP ${rp(v.hpp)}</span></span><i class="fas fa-plus text-red-600 mt-1"></i></button>`).join(''):'<p class="px-4 py-3 text-sm text-neutral-400">Tidak ditemukan</p>';
    hasil.classList.remove('hidden');
  });
}
function tambah(v){
  hasil.classList.add('hidden'); cari.value=''; cari.focus();
  const ada=rows.querySelector('[data-id="'+v.id+'"]');
  if(ada){const q=ada.querySelector('[name=qty]');q.value=Number(q.value)+1;hitung();return;}
  document.getElementById('kosong')?.remove();
  const tr=document.createElement('tr'); tr.dataset.id=v.id;
  tr.innerHTML=`<td><input type="hidden" name="varian_id" value="${v.id}"><b>${v.nama_lengkap}</b><br><span class="text-xs text-neutral-500">${v.sku||''} · stok sekarang ${v.stok}</span></td>
  <td><input name="qty" value="1" inputmode="numeric" class="form-input num text-right" oninput="hitung()"></td>
  <td><input name="harga_beli" value="${v.hpp||''}" inputmode="numeric" class="form-input text-right" placeholder="0" oninput="hitung()"></td>
  <td class="num font-semibold sub">Rp 0</td>
  <td><button type="button" class="btn btn-danger btn-xs" onclick="this.closest('tr').remove();hitung()"><i class="fas fa-times"></i></button></td>`;
  rows.appendChild(tr); hitung();
}
function hitung(){
  let total=0,n=0;
  rows.querySelectorAll('tr[data-id]').forEach(tr=>{const q=Number(tr.querySelector('[name=qty]').value)||0,h=Number(String(tr.querySelector('[name=harga_beli]').value).replace(/\D/g,''))||0;const s=q*h;total+=s;n++;tr.querySelector('.sub').textContent=rp(s);});
  document.getElementById('total').textContent=rp(total);
  document.getElementById('btnSimpan').disabled=n===0;
  if(n===0&&!document.getElementById('kosong')){rows.innerHTML='<tr id="kosong"><td colspan="5" class="text-center text-neutral-400 py-8">Belum ada barang.</td></tr>';}
}
document.getElementById('fPb').addEventListener('keydown',e=>{if(e.key==='Enter'&&e.target.id==='cari')e.preventDefault();});
</script>
{% endblock %}