{% extends 'base.html' %}{% load rp_format %}
{% block title %}Pesanan Online{% endblock %}
{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3 mb-4">
  <div><h1 class="page-title">Pesanan Online</h1><p class="page-sub">Pesanan dari katalog. Cek bukti transfer, lalu konfirmasi supaya jadi transaksi dan stok berkurang.</p></div>
</div>
<div class="flex flex-wrap gap-2 mb-4">
  <a href="?" class="badge {% if not status_f %}badge-amber{% else %}badge-gray{% endif %} py-1.5 px-3">Semua</a>
  {% for k,v in STATUS_CHOICES %}<a href="?status={{ k }}" class="badge {% if status_f == k %}badge-amber{% else %}badge-gray{% endif %} py-1.5 px-3">{{ v }} <b class="ml-1">{{ hitung|get_item:k|default:0 }}</b></a>{% endfor %}
</div>
<form class="card p-3 mb-4 flex flex-wrap gap-2">
  {% if status_f %}<input type="hidden" name="status" value="{{ status_f }}">{% endif %}
  <input name="q" value="{{ q }}" placeholder="Nama / WA / kode" class="form-input w-56"><input type="date" name="tanggal" value="{{ tanggal_f }}" class="form-input w-44"><button class="btn btn-primary"><i class="fas fa-search"></i></button>
</form>
<div class="card overflow-hidden"><div class="overflow-x-auto"><table class="tbl">
<thead><tr><th>Kode</th><th>Masuk</th><th>Pemesan</th><th>Barang</th><th>Kirim / Bayar</th><th class="num">Total</th><th>Bukti</th><th>Status</th><th></th></tr></thead>
<tbody>{% for p in page %}
<tr><td class="font-mono text-xs font-bold">#{{ p.kode_ref }}</td><td class="text-xs text-neutral-500 whitespace-nowrap">{{ p.dibuat|date:"d/m H:i" }}{% if p.status == 'menunggu_bayar' and p.batas_bayar %}<br><span class="text-[10px] text-red-600">batas {{ p.batas_bayar|date:"d/m H:i" }}</span>{% endif %}</td>
<td><p class="font-medium">{{ p.nama_pemesan }}</p><p class="text-xs text-neutral-400">{{ p.no_wa }}</p></td>
<td class="text-xs text-neutral-500 max-w-[260px] truncate">{% for it in p.items.all %}{{ it.nama }}{% if it.qty > 1 %} x{{ it.qty }}{% endif %}{% if not forloop.last %}, {% endif %}{% endfor %}</td>
<td class="text-xs"><span class="badge badge-gray"><i class="fas {% if p.dikirim_ke_alamat %}fa-motorcycle{% else %}fa-store{% endif %} mr-1"></i>{% if p.dikirim_ke_alamat %}Antar{% else %}Ambil{% endif %}</span> <span class="badge badge-gray">{{ p.get_metode_bayar_display|cut:" Bank" }}</span></td>
<td class="num font-bold">{{ p.total|rp }}</td>
<td>{% if p.bukti_foto %}<a href="{{ p.bukti_foto.url }}" target="_blank" class="badge badge-green"><i class="fas fa-image mr-1"></i>ada</a>{% else %}<span class="badge badge-gray">belum</span>{% endif %}</td>
<td><span class="badge badge-{{ p.status_color }}">{{ p.get_status_display|truncatechars:22 }}</span></td>
<td class="text-right"><a href="{% url 'katalog:pesanan_detail' p.pk %}" class="btn {% if p.status == 'menunggu_konfirmasi' %}btn-accent{% else %}btn-secondary{% endif %} btn-xs">{% if p.status == 'menunggu_konfirmasi' %}Periksa{% else %}Detail{% endif %}</a></td></tr>
{% empty %}<tr><td colspan="9" class="text-center text-neutral-400 py-10">Belum ada pesanan.</td></tr>{% endfor %}</tbody></table></div>
{% include '_pagination.html' %}</div>
{% endblock %}