{% extends 'base.html' %}{% load static %}
{% block title %}Kasir{% endblock %}
{% block extra_head %}
<style>
.pcard { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:10px; cursor:pointer; transition:all .15s; }
.pcard:hover { border-color:#e10600; box-shadow:0 4px 14px rgba(0,0,0,.06); transform:translateY(-1px); }
.pcard.habis { opacity:.5; }
.vbtn { border:1px solid #e5e7eb; border-radius:10px; padding:10px 8px; text-align:center; cursor:pointer; transition:all .15s; background:#fff; }
.vbtn:hover:not(:disabled) { border-color:#e10600; background:#fef2f2; }
.vbtn:disabled { opacity:.4; cursor:not-allowed; background:#f9fafb; }
.cart-item { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #f3f4f6; animation:slideDown .25s ease; }
.pcard img { transition:transform .4s; } .pcard:hover img { transform:scale(1.04); }
.qbtn { width:26px; height:26px; border-radius:7px; border:1px solid #d1d5db; background:#fff; font-weight:700; font-size:13px; }
.qbtn:hover { background:#f3f4f6; }
</style>
{% endblock %}
{% block content %}
<div class="grid lg:grid-cols-5 gap-4">
  <!-- KIRI: pencarian produk -->
  <div class="lg:col-span-3">
    <div class="card p-3 mb-3 sticky top-0 z-10">
      <div class="relative">
        <i class="fas fa-search absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400"></i>
        <input id="cari" class="form-input pl-10 pr-10 py-3 text-base" placeholder="Cari nama model / kategori / SKU, atau scan barcode lalu Enter" autofocus autocomplete="off">
        <button onclick="document.getElementById('cari').value='';cariProduk()" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600"><i class="fas fa-times"></i></button>
      </div>
      <p class="text-[11px] text-neutral-400 mt-2"><i class="fas fa-barcode mr-1"></i>Scanner: arahkan ke kolom ini, hasil scan + Enter langsung masuk keranjang. <span id="info-hasil" class="ml-2 font-semibold text-neutral-500"></span></p>
    </div>
    <div id="grid" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3"></div>
  </div>

  <!-- KANAN: keranjang -->
  <div class="lg:col-span-2">
    <div class="card p-4 lg:sticky lg:top-0">
      <div class="flex items-center justify-between mb-2">
        <h3 class="font-bold">Keranjang <span id="cart-count" class="badge badge-amber ml-1">0</span></h3>
        <button onclick="kosongkan()" class="text-xs text-neutral-400 hover:text-red-600"><i class="fas fa-trash mr-1"></i>Kosongkan</button>
      </div>
      <div id="cart" class="max-h-[32vh] overflow-y-auto mb-3"></div>

      <div class="grid grid-cols-2 gap-2 mb-2">
        <input id="nama" class="form-input" placeholder="Nama customer (opsional)">
        <input id="no_wa" class="form-input" placeholder="No. WA (untuk struk)" inputmode="tel">
      </div>
      <div class="grid grid-cols-2 gap-2 mb-2">
        <select id="metode" class="form-input">{% for k,v in metode_choices %}<option value="{{ k }}">{{ v }}</option>{% endfor %}</select>
        <select id="karyawan" class="form-input"><option value="">Tanpa karyawan</option>{% for k in karyawan_list %}<option value="{{ k.id }}">{{ k.nama }}{% if k.komisi_persen %} ({{ k.komisi_persen }}%){% endif %}</option>{% endfor %}</select>
      </div>
      <div class="grid grid-cols-2 gap-2 mb-2">
        <input id="diskon" class="form-input" placeholder="Diskon nota (Rp)" inputmode="numeric" oninput="renderCart()">
        <input id="tanggal" type="datetime-local" class="form-input" value="{{ now_str }}">
      </div>
      <input id="catatan" class="form-input mb-3" placeholder="Catatan (opsional)">

      <div class="bg-neutral-50 rounded-xl p-3 text-sm space-y-1 mb-3">
        <div class="flex justify-between text-neutral-500"><span>Subtotal</span><span id="s-sub">Rp 0</span></div>
        <div class="flex justify-between text-neutral-500"><span>Diskon</span><span id="s-dis">- Rp 0</span></div>
        <div class="flex justify-between font-extrabold text-xl pt-1 border-t border-neutral-200"><span>Total</span><span id="s-tot">Rp 0</span></div>
      </div>
      <button id="btnSimpan" onclick="simpan()" class="btn btn-accent w-full justify-center py-3 text-base" disabled><i class="fas fa-check"></i> Simpan Transaksi</button>
    </div>
  </div>
</div>

<!-- Modal pilih varian -->
<div class="modal-bg" id="mVarian"><div class="modal">
  <div class="flex items-start gap-3 mb-4">
    <img id="mv-foto" class="w-16 h-16 rounded-lg object-cover bg-neutral-100" src="">
    <div class="flex-1"><p id="mv-merek" class="text-xs text-neutral-500"></p><h3 id="mv-nama" class="font-bold leading-tight"></h3><p id="mv-harga" class="text-red-600 font-bold text-sm mt-1"></p></div>
    <button onclick="closeModal('mVarian')" class="text-neutral-400 hover:text-neutral-700"><i class="fas fa-times"></i></button>
  </div>
  <p class="form-label">Pilih ukuran / warna</p>
  <div id="mv-list" class="grid grid-cols-3 sm:grid-cols-4 gap-2"></div>
</div></div>

<!-- Modal sukses -->
<div class="modal-bg" id="mSukses"><div class="modal text-center">
  <div class="w-16 h-16 rounded-full bg-green-100 text-green-600 flex items-center justify-center mx-auto mb-3 text-2xl" style="animation:popIn .4s .1s both cubic-bezier(.2,.9,.3,1.4)"><i class="fas fa-check"></i></div>
  <h3 class="font-extrabold text-lg">Transaksi Tersimpan</h3>
  <p id="ms-nomor" class="text-xs text-neutral-400 font-mono mt-1"></p>
  <p id="ms-total" class="text-3xl font-extrabold my-3"></p>
  <div id="ms-bukti" class="hidden text-left bg-red-50 border border-red-200 rounded-xl p-3 mb-3">
    <p class="text-xs font-semibold text-red-800 mb-2"><i class="fas fa-triangle-exclamation mr-1"></i>Pembayaran non-tunai: upload bukti transfer / QRIS</p>
    <input type="file" id="ms-file" accept="image/*" capture="environment" class="form-input text-xs mb-2">
    <button onclick="uploadBukti()" class="btn btn-primary btn-sm w-full justify-center" id="ms-btn-upload"><i class="fas fa-upload"></i> Upload Bukti</button>
    <p id="ms-upload-status" class="text-xs mt-1"></p>
  </div>
  <div class="grid grid-cols-2 gap-2">
    <button onclick="kirimStruk()" class="btn btn-success justify-center"><i class="fab fa-whatsapp"></i> Kirim Struk WA</button>
    <a id="ms-struk" href="#" target="_blank" class="btn btn-secondary justify-center"><i class="fas fa-receipt"></i> Lihat Struk</a>
  </div>
  <button onclick="baru()" class="btn btn-accent w-full justify-center mt-2"><i class="fas fa-plus"></i> Transaksi Baru</button>
</div></div>
{% endblock %}
{% block extra_js %}
<script>
const PLACEHOLDER="{% static 'img/placeholder.svg' %}";
let produkCache=[], cart=[], lastTrx=null;
try{cart=JSON.parse(localStorage.getItem('ioss_cart')||'[]');}catch(e){cart=[];}
const cari=document.getElementById('cari'); let timer;
cari.addEventListener('input',()=>{clearTimeout(timer);timer=setTimeout(cariProduk,250);});
cari.addEventListener('keydown',e=>{ if(e.key==='Enter'){e.preventDefault();scanKode();} });

function cariProduk(){
  const q=cari.value.trim();
  fetch('/api/produk/?q='+encodeURIComponent(q)).then(r=>r.json()).then(d=>{produkCache=d.produk;renderGrid();});
}
function renderGrid(){
  const g=document.getElementById('grid');
  document.getElementById('info-hasil').textContent=produkCache.length?produkCache.length+' produk':'';
  if(!produkCache.length){g.innerHTML='<p class="col-span-full text-center text-neutral-400 py-10 text-sm">Produk tidak ditemukan.</p>';return;}
  g.innerHTML=produkCache.map((p,i)=>`<div class="pcard ${p.tersedia<=0?'habis':''}" onclick="bukaVarian(${i})">
    <img src="${p.foto||PLACEHOLDER}" class="w-full aspect-square object-cover rounded-lg bg-neutral-100 mb-2" loading="lazy">
    <p class="text-[11px] text-red-600 font-bold uppercase truncate">${p.merek}</p>
    <p class="text-sm font-semibold leading-tight line-clamp-2" style="min-height:2.4em">${p.nama}</p>
    <div class="flex items-center justify-between mt-1.5"><span class="text-sm font-bold">${rp(p.harga)}</span><span class="badge ${p.tersedia<=0?'badge-red':'badge-green'}">${p.tersedia<=0?'Habis':p.tersedia+' psg'}</span></div>
  </div>`).join('');
}
function bukaVarian(i){
  const p=produkCache[i];
  document.getElementById('mv-foto').src=p.foto||PLACEHOLDER;
  document.getElementById('mv-merek').textContent=p.merek+(p.kategori?' · '+p.kategori:'');
  document.getElementById('mv-nama').textContent=p.nama;
  document.getElementById('mv-harga').textContent=rp(p.harga);
  document.getElementById('mv-list').innerHTML=p.varian.length?p.varian.map((v,j)=>{
    const dik=cart.find(c=>c.id===v.id)?.qty||0, sisa=v.tersedia-dik;
    return `<button class="vbtn" ${sisa<=0?'disabled':''} onclick="addVarian(${i},${j})">
      <p class="font-bold text-base">${v.ukuran}</p>${v.warna?`<p class="text-[11px] text-neutral-500 truncate">${v.warna}</p>`:''}
      <p class="text-[11px] ${sisa<=0?'text-red-500':'text-green-600'} font-semibold mt-0.5">${sisa<=0?'habis':'sisa '+sisa}</p>
      ${v.harga!==p.harga?`<p class="text-[10px] text-red-600">${rp(v.harga)}</p>`:''}</button>`;
  }).join(''):'<p class="col-span-full text-sm text-neutral-400">Produk ini belum punya varian. Tambahkan dulu di menu Produk.</p>';
  openModal('mVarian');
}
function addVarian(i,j){
  // Lewat index, bukan JSON di atribut, supaya nama berisi tanda kutip (mis. Air Force 1 '07) aman
  const p=produkCache[i],v=p.varian[j];
  addCart({id:v.id,nama:p.nama_lengkap,label:v.label,harga:v.harga,tersedia:v.tersedia,sku:v.sku});
}
function scanKode(){
  const kode=cari.value.trim(); if(!kode)return;
  fetch('/api/varian/?kode='+encodeURIComponent(kode)).then(r=>r.json()).then(d=>{
    if(d.varian){const v=d.varian;addCart({id:v.id,nama:v.produk,label:v.label,harga:v.harga,tersedia:v.tersedia,sku:v.sku});cari.value='';cariProduk();cari.focus();}
    else if(produkCache.length===1&&produkCache[0].varian.length===1){const p=produkCache[0],v=p.varian[0];addCart({id:v.id,nama:p.nama_lengkap,label:v.label,harga:v.harga,tersedia:v.tersedia,sku:v.sku});cari.value='';cariProduk();}
    else if(produkCache.length===1){bukaVarian(0);}
  });
}
function addCart(v){
  const ada=cart.find(c=>c.id===v.id);
  if(ada){ if(ada.qty+1>v.tersedia){alert('Stok tersedia hanya '+v.tersedia);return;} ada.qty++; ada.tersedia=v.tersedia; }
  else { if(v.tersedia<=0){alert('Stok habis');return;} cart.push({...v,qty:1}); }
  closeModal('mVarian'); renderCart();
}
function ubahQty(id,d){const c=cart.find(x=>x.id===id);if(!c)return;c.qty+=d;if(c.qty<=0)cart=cart.filter(x=>x.id!==id);else if(c.qty>c.tersedia){c.qty=c.tersedia;alert('Stok tersedia hanya '+c.tersedia);}renderCart();}
function hapusItem(id){cart=cart.filter(x=>x.id!==id);renderCart();}
function kosongkan(){if(!cart.length||confirm('Kosongkan keranjang?')){cart=[];renderCart();}}
function renderCart(){
  localStorage.setItem('ioss_cart',JSON.stringify(cart));
  const el=document.getElementById('cart');
  document.getElementById('cart-count').textContent=cart.reduce((a,c)=>a+c.qty,0);
  if(!cart.length){el.innerHTML='<p class="text-center text-neutral-400 text-sm py-8"><i class="fas fa-basket-shopping text-2xl block mb-2 opacity-40"></i>Belum ada barang.<br>Klik produk di kiri atau scan barcode.</p>';}
  else el.innerHTML=cart.map(c=>`<div class="cart-item">
    <div class="flex-1 min-w-0"><p class="text-sm font-semibold truncate">${c.nama}</p><p class="text-xs text-neutral-500">${c.label}${c.sku?' · '+c.sku:''} · ${rp(c.harga)}</p></div>
    <div class="flex items-center gap-1"><button class="qbtn" onclick="ubahQty(${c.id},-1)">-</button><span class="w-6 text-center text-sm font-bold">${c.qty}</span><button class="qbtn" onclick="ubahQty(${c.id},1)">+</button></div>
    <div class="text-right w-24"><p class="text-sm font-bold">${rp(c.harga*c.qty)}</p><button onclick="hapusItem(${c.id})" class="text-[11px] text-red-500 hover:underline">hapus</button></div>
  </div>`).join('');
  const sub=cart.reduce((a,c)=>a+c.harga*c.qty,0);
  let dis=Number(String(document.getElementById('diskon').value).replace(/\D/g,''))||0; if(dis>sub)dis=sub;
  document.getElementById('s-sub').textContent=rp(sub);
  document.getElementById('s-dis').textContent='- '+rp(dis);
  document.getElementById('s-tot').textContent=rp(sub-dis);
  document.getElementById('btnSimpan').disabled=!cart.length;
}
function simpan(){
  const btn=document.getElementById('btnSimpan'); btn.disabled=true; btn.innerHTML='<i class="fas fa-spinner fa-spin"></i> Menyimpan...';
  const data={items:cart.map(c=>({id:c.id,qty:c.qty})),nama_customer:document.getElementById('nama').value,no_wa:document.getElementById('no_wa').value,
    metode_bayar:document.getElementById('metode').value,karyawan_id:document.getElementById('karyawan').value,diskon:String(document.getElementById('diskon').value).replace(/\D/g,''),
    catatan:document.getElementById('catatan').value,tanggal:document.getElementById('tanggal').value};
  fetch('/transaksi/simpan/',{method:'POST',headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},body:JSON.stringify(data)})
  .then(r=>r.json()).then(d=>{
    btn.innerHTML='<i class="fas fa-check"></i> Simpan Transaksi'; btn.disabled=false;
    if(!d.success){alert(d.error||'Gagal menyimpan');cariProduk();return;}
    lastTrx=d;
    document.getElementById('ms-nomor').textContent=d.nomor;
    document.getElementById('ms-total').textContent=d.total_fmt;
    document.getElementById('ms-struk').href=d.struk_url;
    document.getElementById('ms-bukti').classList.toggle('hidden',!d.perlu_bukti);
    document.getElementById('ms-upload-status').textContent='';
    document.getElementById('ms-file').value='';
    cart=[]; renderCart(); openModal('mSukses'); cariProduk();
  }).catch(()=>{btn.innerHTML='<i class="fas fa-check"></i> Simpan Transaksi';btn.disabled=false;alert('Koneksi bermasalah');});
}
function uploadBukti(){
  const f=document.getElementById('ms-file').files[0]; if(!f){alert('Pilih foto dulu');return;}
  const fd=new FormData(); fd.append('foto',f); fd.append('ajax','1');
  const st=document.getElementById('ms-upload-status'); st.textContent='Mengupload...';
  fetch('/transaksi/upload-bukti/'+lastTrx.id+'/',{method:'POST',headers:{'X-CSRFToken':CSRF,'X-Requested-With':'XMLHttpRequest'},body:fd}).then(r=>r.json()).then(d=>{
    if(d.success){st.innerHTML='<span class="text-green-700 font-semibold"><i class="fas fa-check mr-1"></i>Bukti tersimpan, transaksi masuk omzet.</span>';document.getElementById('ms-btn-upload').disabled=true;}
    else st.innerHTML='<span class="text-red-600">'+(d.error||'Gagal')+'</span>';
  });
}
function kirimStruk(){
  let no=document.getElementById('no_wa').value.trim();
  const kirim=(n)=>{const fd=new FormData(); if(n)fd.append('no_wa',n);
    fetch('/transaksi/kirim-struk/'+lastTrx.id+'/',{method:'POST',headers:{'X-CSRFToken':CSRF},body:fd}).then(r=>r.json()).then(d=>{
      if(d.success)window.open(d.wa_url,'_blank');
      else if(d.butuh_no_wa){const x=prompt('Nomor WhatsApp customer:');if(x)kirim(x);}
      else alert(d.error||'Gagal');});};
  kirim(no);
}
function baru(){closeModal('mSukses');['nama','no_wa','diskon','catatan'].forEach(i=>document.getElementById(i).value='');document.getElementById('karyawan').value='';document.getElementById('metode').value='tunai';document.getElementById('tanggal').value=new Date(Date.now()-new Date().getTimezoneOffset()*60000).toISOString().slice(0,16);cari.focus();}
renderCart(); cariProduk();
</script>
{% endblock %}