{% extends 'base.html' %}{% load rp_format %}
{% block title %}Pengeluaran{% endblock %}
{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3 mb-4">
  <div><h1 class="page-title">Pengeluaran</h1><p class="page-sub">Biaya operasional. Komisi yang dibayar otomatis masuk ke sini.</p></div>
  <a href="{% url 'pengeluaran_tambah' %}" class="btn btn-accent"><i class="fas fa-plus"></i> Catat Pengeluaran</a>
</div>
<form class="card p-3 mb-4 flex flex-wrap gap-2 items-end">
  <div><label class="form-label">Dari</label><input type="date" name="dari" value="{{ dari }}" class="form-input"></div>
  <div><label class="form-label">Sampai</label><input type="date" name="sampai" value="{{ sampai }}" class="form-input"></div>
  <div><label class="form-label">Tipe</label><select name="tipe" class="form-input"><option value="">Semua</option>{% for k,v in tipe_choices %}<option value="{{ k }}" {% if tipe_f == k %}selected{% endif %}>{{ v }}</option>{% endfor %}</select></div>
  <button class="btn btn-primary"><i class="fas fa-search"></i> Filter</button>
  <div class="ml-auto text-right"><p class="text-xs text-neutral-500">Total periode</p><p class="font-extrabold text-lg text-red-600">{{ total|rp }}</p></div>
</form>
{% if per_tipe %}<div class="flex flex-wrap gap-2 mb-4">{% for p in per_tipe %}<span class="badge badge-gray">{{ p.label|truncatechars:24 }}: <b class="ml-1">{{ p.t|rp }}</b></span>{% endfor %}</div>{% endif %}
<div class="card overflow-hidden"><div class="overflow-x-auto"><table class="tbl">
<thead><tr><th>Tanggal</th><th>Nama</th><th>Tipe</th><th>Catatan</th><th class="num">Nominal</th><th>Oleh</th><th></th></tr></thead>
<tbody>{% for p in page %}
<tr><td class="text-xs whitespace-nowrap">{{ p.tanggal|date:"d M Y" }}</td><td class="font-medium">{{ p.nama }}</td><td><span class="badge badge-gray">{{ p.get_tipe_display|truncatechars:18 }}</span></td><td class="text-xs text-neutral-500 max-w-[260px] truncate">{{ p.catatan|default:"-" }}</td><td class="num font-semibold text-red-600">{{ p.nominal|rp }}</td><td class="text-xs text-neutral-500">{{ p.dibuat_oleh.username|default:"-" }}</td>
<td class="text-right whitespace-nowrap"><a href="{% url 'pengeluaran_edit' p.pk %}" class="btn btn-secondary btn-xs"><i class="fas fa-pen"></i></a>{% if request.user.is_staff %}<form method="post" action="{% url 'pengeluaran_hapus' p.pk %}" class="inline" onsubmit="return confirm('Hapus pengeluaran ini?')">{% csrf_token %}<button class="btn btn-danger btn-xs"><i class="fas fa-trash"></i></button></form>{% endif %}</td></tr>
{% empty %}<tr><td colspan="7" class="text-center text-neutral-400 py-8">Tidak ada pengeluaran di periode ini.</td></tr>{% endfor %}</tbody></table></div>
{% include '_pagination.html' %}</div>
{% endblock %}