{% extends 'base.html' %}{% load rp_format %}
{% block title %}Komisi Karyawan{% endblock %}
{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3 mb-4">
  <div><h1 class="page-title">Komisi Karyawan</h1><p class="page-sub">Komisi dihitung dari transaksi lunas. Saat dibayar, kasbon pending dipotong lebih dulu dan sisanya dicatat sebagai pengeluaran.</p></div>
  <form class="flex gap-2"><select name="bulan" class="form-input">{% for b in bulan_list %}<option value="{{ b }}" {% if b == bulan %}selected{% endif %}>{{ b|stringformat:"02d" }}</option>{% endfor %}</select><select name="tahun" class="form-input">{% for t in tahun_list %}<option value="{{ t }}" {% if t == tahun %}selected{% endif %}>{{ t }}</option>{% endfor %}</select><button class="btn btn-primary"><i class="fas fa-search"></i></button></form>
</div>
<div class="card overflow-hidden mb-4"><div class="overflow-x-auto"><table class="tbl">
<thead><tr><th>Karyawan</th><th class="num">Nota</th><th class="num">Omzet</th><th class="num">Total Komisi</th><th class="num">Dibayar</th><th class="num">Belum</th><th class="num">Kasbon</th><th class="num">Dibayar Bersih</th><th></th></tr></thead>
<tbody>{% for r in recap %}
<tr><td class="font-semibold">{{ r.karyawan.nama }} <span class="text-xs text-neutral-400">({{ r.karyawan.komisi_persen }}%)</span></td><td class="num">{{ r.n }}</td><td class="num text-neutral-500">{{ r.omzet|rp }}</td><td class="num font-semibold">{{ r.total|rp }}</td><td class="num text-green-700">{{ r.dibayar|rp }}</td><td class="num text-red-600 font-semibold">{{ r.belum|rp }}</td><td class="num text-red-600">{% if r.kasbon %}{{ r.kasbon|rp }}{% else %}-{% endif %}</td><td class="num font-bold">{{ r.bersih|rp }}</td>
<td class="text-right">{% if r.belum > 0 %}<form method="post" action="{% url 'bayar_komisi' r.karyawan.pk %}" onsubmit="return confirm('Bayar komisi {{ r.karyawan.nama }} {{ r.bersih|rp }}{% if r.potong %} (setelah potong kasbon {{ r.potong|rp }}){% endif %}?')">{% csrf_token %}<input type="hidden" name="bulan" value="{{ bulan }}"><input type="hidden" name="tahun" value="{{ tahun }}"><button class="btn btn-success btn-sm"><i class="fas fa-money-bill"></i> Bayar</button></form>{% else %}<span class="badge badge-green">Lunas</span>{% endif %}</td></tr>
{% empty %}<tr><td colspan="9" class="text-center text-neutral-400 py-8">Tidak ada transaksi berkaryawan di bulan ini.</td></tr>{% endfor %}</tbody></table></div></div>
<div class="card overflow-hidden"><div class="px-5 py-3 border-b border-neutral-100"><h3 class="font-bold text-sm">Detail Transaksi</h3></div>
<div class="overflow-x-auto"><table class="tbl"><thead><tr><th>Tanggal</th><th>Karyawan</th><th>Nomor</th><th>Customer</th><th class="num">Total</th><th class="num">Komisi</th><th>Status</th></tr></thead>
<tbody>{% for t in detail %}<tr><td class="text-xs">{{ t.tanggal|date:"d/m H:i" }}</td><td>{{ t.karyawan.nama }}</td><td class="font-mono text-xs"><a href="{% url 'detail_transaksi' t.pk %}" class="hover:text-red-600">{{ t.nomor|slice:"3:" }}</a></td><td>{{ t.nama_customer }}</td><td class="num">{{ t.total|rp }}</td><td class="num font-semibold">{{ t.komisi|rp }}</td><td>{% if t.komisi_dibayar %}<span class="badge badge-green">dibayar {{ t.komisi_dibayar_tgl|date:"d/m" }}</span>{% else %}<span class="badge badge-yellow">belum</span>{% endif %}</td></tr>
{% empty %}<tr><td colspan="7" class="text-center text-neutral-400 py-6">-</td></tr>{% endfor %}</tbody></table></div></div>
{% endblock %}