{% extends 'base.html' %}{% load rp_format %}
{% block title %}{{ trx.nomor }}{% endblock %}
{% block content %}
<div class="mb-4"><a href="{% url 'riwayat' %}" class="text-xs text-neutral-500 hover:text-red-600"><i class="fas fa-arrow-left mr-1"></i>Riwayat</a></div>
<div class="flex flex-wrap items-start justify-between gap-3 mb-4">
  <div>
    <p class="font-mono text-xs text-neutral-400">{{ trx.nomor }}</p>
    <h1 class="page-title">{{ trx.nama_customer }} <span class="badge badge-{{ trx.status_color }} align-middle ml-1">{{ trx.get_status_display }}</span></h1>
    <p class="page-sub">{{ trx.tanggal|date:"l, d F Y H:i" }} · {{ trx.get_metode_bayar_display }} · {{ trx.get_sumber_display }}{% if trx.karyawan %} · dilayani {{ trx.karyawan.nama }}{% endif %}{% if trx.dibuat_oleh %} · input oleh {{ trx.dibuat_oleh.username }}{% endif %}</p>
  </div>
  <div class="flex flex-wrap gap-2">
    <button onclick="kirimStruk()" class="btn btn-success"><i class="fab fa-whatsapp"></i> Struk WA</button>
    <a href="{% url 'struk' trx.token %}" target="_blank" class="btn btn-secondary"><i class="fas fa-receipt"></i> Struk</a>
    <a href="{% url 'edit_transaksi' trx.pk %}" class="btn btn-secondary"><i class="fas fa-pen"></i> Edit</a>
    {% if trx.status == 'selesai' or trx.status == 'bukti_uploaded' %}<a href="{% url 'retur_baru' trx.pk %}" class="btn btn-secondary"><i class="fas fa-rotate-left"></i> Retur</a>{% endif %}
    {% if request.user.is_staff %}<form method="post" action="{% url 'hapus_transaksi' trx.pk %}" onsubmit="return confirm('Hapus transaksi ini? Stok akan dikembalikan.')">{% csrf_token %}<button class="btn btn-danger"><i class="fas fa-trash"></i></button></form>{% endif %}
  </div>
</div>

<div class="grid lg:grid-cols-3 gap-4">
  <div class="lg:col-span-2 space-y-4">
    <div class="card overflow-hidden">
      <table class="tbl"><thead><tr><th>Barang</th><th class="num">Harga</th><th class="num">Qty</th><th class="num">Subtotal</th>{% if request.user.is_staff %}<th class="num">HPP</th>{% endif %}</tr></thead>
      <tbody>{% for it in trx.items.all %}
      <tr><td><p class="font-medium">{{ it.nama }}</p><p class="text-xs text-neutral-400">{{ it.sku|default:"" }}{% with d=diretur|get_item:it.id %}{% if d %} <span class="badge badge-yellow">diretur {{ d }}</span>{% endif %}{% endwith %}</p></td>
      <td class="num">{{ it.harga|rp }}</td><td class="num">{{ it.qty }}</td><td class="num font-semibold">{{ it.subtotal|rp }}</td>{% if request.user.is_staff %}<td class="num text-neutral-400">{{ it.hpp|rp }}</td>{% endif %}</tr>
      {% endfor %}</tbody>
      <tfoot class="bg-neutral-50">
        <tr><td colspan="3" class="text-right text-neutral-500">Subtotal</td><td class="num">{{ trx.subtotal|rp }}</td>{% if request.user.is_staff %}<td></td>{% endif %}</tr>
        {% if trx.diskon %}<tr><td colspan="3" class="text-right text-neutral-500">Diskon</td><td class="num text-red-600">- {{ trx.diskon|rp }}</td>{% if request.user.is_staff %}<td></td>{% endif %}</tr>{% endif %}
        {% if trx.ongkir or trx.biaya_packing %}<tr><td colspan="3" class="text-right text-neutral-500">Ongkir + packing</td><td class="num">{{ trx.ongkir|add:trx.biaya_packing|rp }}</td>{% if request.user.is_staff %}<td></td>{% endif %}</tr>{% endif %}
        <tr><td colspan="3" class="text-right font-bold">Total</td><td class="num font-extrabold text-lg">{{ trx.total|rp }}</td>{% if request.user.is_staff %}<td class="num text-xs text-neutral-400">{{ trx.hpp_total|rp }}</td>{% endif %}</tr>
        {% if request.user.is_staff %}<tr><td colspan="3" class="text-right text-xs text-green-700">Laba kotor</td><td class="num text-green-700 font-semibold">{{ trx.laba_kotor|rp }}</td><td></td></tr>
        {% if trx.komisi %}<tr><td colspan="3" class="text-right text-xs text-neutral-500">Komisi {{ trx.karyawan.nama }} {% if trx.komisi_dibayar %}(dibayar {{ trx.komisi_dibayar_tgl|date:"d/m" }}){% else %}(belum dibayar){% endif %}</td><td class="num text-xs">{{ trx.komisi|rp }}</td><td></td></tr>{% endif %}{% endif %}
      </tfoot></table>
    </div>
    {% if trx.catatan %}<div class="card p-4 text-sm"><b>Catatan:</b> {{ trx.catatan }}</div>{% endif %}
    {% if trx.retur.all %}
    <div class="card overflow-hidden"><div class="px-5 py-3 border-b border-neutral-100"><h3 class="font-bold text-sm">Retur</h3></div>
      <table class="tbl"><thead><tr><th>Nomor</th><th>Tanggal</th><th>Barang</th><th>Alasan</th><th class="num">Refund</th></tr></thead>
      <tbody>{% for r in trx.retur.all %}<tr><td class="font-mono text-xs">{{ r.nomor }}</td><td class="text-xs">{{ r.tanggal|date:"d/m/Y" }}</td><td class="text-xs">{% for ir in r.items.all %}{{ ir.nama }} x{{ ir.qty }}{% if not forloop.last %}, {% endif %}{% endfor %}</td><td class="text-xs text-neutral-500">{{ r.alasan|default:"-" }}</td><td class="num font-semibold text-red-600">{{ r.total_refund|rp }}</td></tr>{% endfor %}</tbody></table></div>
    {% endif %}
  </div>
  <div class="space-y-4">
    <div class="card p-5">
      <h3 class="font-bold text-sm mb-3">Customer</h3>
      <p class="font-semibold">{{ trx.nama_customer }}</p>
      <p class="text-sm text-neutral-500">{{ trx.no_wa|default:"No. WA belum diisi" }}</p>
      {% if trx.sumber_pesanan %}<a href="{% url 'katalog:pesanan_detail' trx.sumber_pesanan.pk %}" class="btn btn-secondary btn-xs mt-3"><i class="fas fa-bag-shopping"></i> Lihat pesanan online #{{ trx.sumber_pesanan.kode_ref }}</a>{% endif %}
    </div>
    <div class="card p-5">
      <h3 class="font-bold text-sm mb-3">Bukti Pembayaran</h3>
      {% if trx.bukti_foto %}<a href="{{ trx.bukti_foto.url }}" target="_blank"><img src="{{ trx.bukti_foto.url }}" class="rounded-lg w-full max-h-72 object-contain bg-neutral-50"></a>
      {% else %}<p class="text-xs text-neutral-400 mb-3">{% if trx.metode_bayar == 'tunai' %}Tunai, tidak perlu bukti.{% else %}Belum ada bukti.{% if trx.status == 'pending' %} Transaksi belum dihitung sebagai omzet.{% endif %}{% endif %}</p>{% endif %}
      {% if trx.metode_bayar != 'tunai' %}
      <form method="post" action="{% url 'upload_bukti' trx.pk %}" enctype="multipart/form-data" class="mt-3">{% csrf_token %}
        <input type="file" name="foto" accept="image/*" class="form-input text-xs mb-2" required>
        <button class="btn btn-primary btn-sm w-full justify-center"><i class="fas fa-upload"></i> {% if trx.bukti_foto %}Ganti{% else %}Upload{% endif %} Bukti</button></form>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function kirimStruk(){
  const kirim=(n)=>{const fd=new FormData(); if(n)fd.append('no_wa',n);
    fetch('{% url "kirim_struk" trx.pk %}',{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('');
}
</script>
{% endblock %}