{% extends 'base.html' %}{% load rp_format %}
{% block title %}Riwayat Transaksi{% endblock %}
{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3 mb-4">
  <div><h1 class="page-title">Riwayat Transaksi</h1><p class="page-sub">{{ jml_trx }} nota lunas · {{ pasang }} pasang</p></div>
  <a href="{% url 'pos' %}" class="btn btn-accent"><i class="fas fa-plus"></i> Transaksi Baru</a>
</div>
<form class="card p-3 mb-4 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-2">
  <input type="date" name="dari" value="{{ dari }}" class="form-input"><input type="date" name="sampai" value="{{ sampai }}" class="form-input">
  <input name="q" value="{{ q }}" placeholder="Nama / nomor / barang" class="form-input col-span-2">
  <select name="status" class="form-input"><option value="">Semua status</option>{% for k,v in status_choices %}<option value="{{ k }}" {% if status_f == k %}selected{% endif %}>{{ v }}</option>{% endfor %}</select>
  <select name="metode" class="form-input"><option value="">Semua metode</option>{% for k,v in metode_choices %}<option value="{{ k }}" {% if metode_f == k %}selected{% endif %}>{{ v }}</option>{% endfor %}</select>
  <select name="sumber" class="form-input"><option value="">Kasir & online</option>{% for k,v in sumber_choices %}<option value="{{ k }}" {% if sumber_f == k %}selected{% endif %}>{{ v }}</option>{% endfor %}</select>
  <div class="flex gap-2">{% if karyawan_list %}<select name="karyawan" class="form-input"><option value="">Semua karyawan</option>{% for k in karyawan_list %}<option value="{{ k.id }}" {% if karyawan_f == k.id|stringformat:"s" %}selected{% endif %}>{{ k.nama }}</option>{% endfor %}</select>{% endif %}<button class="btn btn-primary"><i class="fas fa-search"></i></button></div>
</form>
<div class="grid grid-cols-2 gap-3 mb-4 max-w-md">
  <div class="stat"><p class="lbl">Omzet (lunas)</p><p class="val">{{ total_omzet|rp }}</p></div>
  {% if request.user.is_staff %}<div class="stat"><p class="lbl">Laba Kotor</p><p class="val text-green-700">{{ total_laba|rp }}</p></div>{% endif %}
</div>
<div class="card overflow-hidden"><div class="overflow-x-auto"><table class="tbl">
<thead><tr><th>Waktu</th><th>Nomor</th><th>Customer</th><th>Barang</th><th>Metode</th><th class="num">Total</th><th>Status</th><th></th></tr></thead>
<tbody>{% for t in page %}
<tr>
  <td class="text-xs text-neutral-500 whitespace-nowrap">{{ t.tanggal|date:"d/m/Y H:i" }}</td>
  <td class="font-mono text-xs"><a href="#" onclick="lihat({{ t.id }});return false" class="hover:text-red-600">{{ t.nomor|slice:"3:" }}</a>{% if t.sumber == 'online' %}<br><span class="badge badge-blue">online</span>{% endif %}</td>
  <td><p class="font-medium">{{ t.nama_customer }}</p>{% if t.no_wa %}<p class="text-xs text-neutral-400">{{ t.no_wa }}</p>{% endif %}</td>
  <td class="text-xs text-neutral-500 max-w-[260px]"><p class="truncate">{% for it in t.items.all %}{{ it.nama }}{% if it.qty > 1 %} x{{ it.qty }}{% endif %}{% if not forloop.last %}, {% endif %}{% endfor %}</p>{% if t.karyawan %}<p class="text-[11px] text-neutral-400"><i class="fas fa-user-tie mr-1"></i>{{ t.karyawan.nama }}</p>{% endif %}</td>
  <td class="text-xs">{{ t.get_metode_bayar_display }}</td>
  <td class="num font-bold">{{ t.total|rp }}{% if t.diskon %}<br><span class="text-[10px] text-neutral-400 font-normal">disc {{ t.diskon|rp }}</span>{% endif %}</td>
  <td><span class="badge badge-{{ t.status_color }}">{{ t.get_status_display|truncatechars:18 }}</span></td>
  <td class="text-right whitespace-nowrap">
    <button onclick="lihat({{ t.id }})" class="btn btn-secondary btn-xs" title="Detail cepat"><i class="fas fa-eye"></i></button>
    <a href="{% url 'detail_transaksi' t.pk %}" class="btn btn-secondary btn-xs" title="Halaman detail"><i class="fas fa-arrow-up-right-from-square"></i></a>
    {% if request.user.is_staff %}<form method="post" action="{% url 'hapus_transaksi' t.pk %}" class="inline" onsubmit="return confirm('Hapus transaksi {{ t.nomor }}? Stok akan dikembalikan.')">{% csrf_token %}<input type="hidden" name="next" value="{{ request.get_full_path }}"><button class="btn btn-danger btn-xs"><i class="fas fa-trash"></i></button></form>{% endif %}
  </td>
</tr>
{% empty %}<tr><td colspan="8" class="text-center text-neutral-400 py-10">Tidak ada transaksi di periode ini.</td></tr>{% endfor %}</tbody></table></div>
{% include '_pagination.html' %}</div>

<div class="modal-bg" id="mDetail"><div class="modal" id="mDetailBody"></div></div>
{% endblock %}
{% block extra_js %}
<script>
let curId=null;
function lihat(id){
  curId=id;
  fetch('/transaksi/detail-ajax/'+id+'/').then(r=>r.json()).then(d=>{
    const items=d.items.map(i=>`<tr><td class="py-1.5 text-sm">${i.nama}${i.sku?'<br><span class="text-[11px] text-neutral-400">'+i.sku+'</span>':''}</td><td class="py-1.5 text-sm text-right">${i.qty} x ${rp(i.harga)}</td><td class="py-1.5 text-sm text-right font-semibold">${rp(i.subtotal)}</td></tr>`).join('');
    document.getElementById('mDetailBody').innerHTML=`
      <div class="flex items-start justify-between mb-3"><div><p class="font-mono text-xs text-neutral-400">${d.nomor}</p><h3 class="font-bold text-lg">${d.nama_customer}</h3><p class="text-xs text-neutral-500">${d.tanggal} · ${d.metode} · ${d.sumber}${d.karyawan!=='-'?' · '+d.karyawan:''}</p></div><button onclick="closeModal('mDetail')" class="text-neutral-400"><i class="fas fa-times"></i></button></div>
      <table class="w-full mb-3 border-y border-neutral-100">${items}</table>
      <div class="text-sm space-y-1 mb-3"><div class="flex justify-between text-neutral-500"><span>Subtotal</span><span>${rp(d.subtotal)}</span></div>${d.diskon?`<div class="flex justify-between text-neutral-500"><span>Diskon</span><span>- ${rp(d.diskon)}</span></div>`:''}<div class="flex justify-between font-extrabold text-lg"><span>Total</span><span>${rp(d.total)}</span></div>
      ${d.laba_kotor!==undefined?`<div class="flex justify-between text-xs text-green-700 pt-1 border-t border-neutral-100"><span>Laba kotor (internal)</span><span>${rp(d.laba_kotor)}</span></div>`:''}</div>
      ${d.catatan?`<p class="text-xs text-neutral-500 bg-neutral-50 rounded-lg p-2 mb-3"><b>Catatan:</b> ${d.catatan}</p>`:''}
      ${d.bukti_foto?`<a href="${d.bukti_foto}" target="_blank" class="block mb-3"><img src="${d.bukti_foto}" class="max-h-40 rounded-lg mx-auto"></a>`:''}
      <div class="grid grid-cols-3 gap-2">
        <button onclick="kirimStruk(${d.id},'${(d.no_wa||'').replace(/'/g,'')}')" class="btn btn-success btn-sm justify-center"><i class="fab fa-whatsapp"></i> Struk WA</button>
        <a href="${d.struk_url}" target="_blank" class="btn btn-secondary btn-sm justify-center"><i class="fas fa-receipt"></i> Struk</a>
        <a href="/transaksi/detail/${d.id}/" class="btn btn-primary btn-sm justify-center"><i class="fas fa-pen"></i> Kelola</a>
      </div>`;
    openModal('mDetail');
  });
}
function kirimStruk(id,no){
  const kirim=(n)=>{const fd=new FormData(); if(n)fd.append('no_wa',n);
    fetch('/transaksi/kirim-struk/'+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);
}
</script>
{% endblock %}