{% extends 'base.html' %}{% load rp_format %}
{% block title %}Kasbon{% endblock %}
{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3 mb-4">
  <div><h1 class="page-title">Kasbon Karyawan</h1><p class="page-sub">Pinjaman yang dipotong otomatis saat komisi dibayar. Total belum terpotong: <b class="text-red-600">{{ total_pending|rp }}</b></p></div>
  <button onclick="openModal('mForm')" class="btn btn-accent"><i class="fas fa-plus"></i> Catat Kasbon</button>
</div>
<form class="card p-3 mb-4 flex gap-2">
  <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>
  <select name="status" class="form-input"><option value="">Semua status</option><option value="pending" {% if status_f == 'pending' %}selected{% endif %}>Belum terpotong</option><option value="terpotong" {% if status_f == 'terpotong' %}selected{% endif %}>Sudah terpotong</option></select>
  <button class="btn btn-primary"><i class="fas fa-search"></i></button>
</form>
<div class="card overflow-hidden"><table class="tbl">
<thead><tr><th>Tanggal</th><th>Karyawan</th><th class="num">Jumlah</th><th>Keterangan</th><th>Status</th><th>Oleh</th><th></th></tr></thead>
<tbody>{% for k in qs %}
<tr><td class="text-xs">{{ k.tanggal|date:"d M Y" }}</td><td class="font-semibold">{{ k.karyawan.nama }}</td><td class="num font-semibold">{{ k.jumlah|rp }}</td><td class="text-xs text-neutral-500">{{ k.keterangan|default:"-" }}</td>
<td>{% if k.status == 'pending' %}<span class="badge badge-yellow">Belum terpotong</span>{% else %}<span class="badge badge-green">Terpotong {{ k.dipotong_tgl|date:"d/m/Y" }}</span>{% endif %}</td><td class="text-xs text-neutral-500">{{ k.dibuat_oleh.username|default:"-" }}</td>
<td class="text-right"><form method="post" action="{% url 'kasbon_hapus' k.pk %}" onsubmit="return confirm('Hapus kasbon ini?')">{% csrf_token %}<button class="btn btn-danger btn-xs"><i class="fas fa-trash"></i></button></form></td></tr>
{% empty %}<tr><td colspan="7" class="text-center text-neutral-400 py-8">Tidak ada kasbon.</td></tr>{% endfor %}</tbody></table></div>

<div class="modal-bg" id="mForm"><div class="modal">
<div class="flex items-center justify-between mb-4"><h3 class="font-bold">Catat Kasbon</h3><button onclick="closeModal('mForm')" class="text-neutral-400"><i class="fas fa-times"></i></button></div>
<form method="post" action="{% url 'kasbon_tambah' %}" class="space-y-3">{% csrf_token %}
<div><label class="form-label">Karyawan *</label><select name="karyawan" class="form-input" required><option value="">Pilih</option>{% for k in karyawan_list %}<option value="{{ k.id }}">{{ k.nama }}</option>{% endfor %}</select></div>
<div class="grid grid-cols-2 gap-3"><div><label class="form-label">Jumlah *</label><input name="jumlah" class="form-input" inputmode="numeric" required></div><div><label class="form-label">Tanggal</label><input type="date" name="tanggal" value="{{ today }}" class="form-input"></div></div>
<div><label class="form-label">Keterangan</label><input name="keterangan" class="form-input"></div>
<button class="btn btn-accent w-full justify-center">Simpan</button></form></div></div>
{% endblock %}