{% extends 'base.html' %}
{% block title %}Karyawan{% endblock %}
{% block content %}
<div class="flex items-end justify-between gap-3 mb-4"><div><h1 class="page-title">Karyawan / Sales</h1><p class="page-sub">Opsional. Dipakai kalau ingin mencatat siapa yang melayani dan menghitung komisi.</p></div>
<button onclick="fillForm('fKar',{pk:'',nama:'',no_wa:'',komisi_persen:0,aktif:true});openModal('mForm')" class="btn btn-accent"><i class="fas fa-plus"></i> Tambah Karyawan</button></div>
<div class="card overflow-hidden"><table class="tbl">
<thead><tr><th>Nama</th><th>No. WA</th><th class="num">Komisi</th><th>Status</th><th></th></tr></thead>
<tbody>{% for k in daftar %}
<tr><td class="font-semibold">{{ k.nama }}</td><td class="text-xs">{{ k.no_wa|default:"-" }}</td><td class="num">{{ k.komisi_persen }}%</td>
<td><span class="badge {% if k.aktif %}badge-green{% else %}badge-gray{% endif %}">{% if k.aktif %}Aktif{% else %}Nonaktif{% endif %}</span></td>
<td class="text-right whitespace-nowrap">
<a href="{% url 'komisi' %}" class="btn btn-secondary btn-xs">Komisi</a>
<button onclick="fillForm('fKar',{pk:'{{ k.pk }}',nama:'{{ k.nama|escapejs }}',no_wa:'{{ k.no_wa|escapejs }}',komisi_persen:'{{ k.komisi_persen }}',aktif:{{ k.aktif|yesno:'true,false' }}});openModal('mForm')" class="btn btn-secondary btn-xs"><i class="fas fa-pen"></i></button>
<form method="post" action="{% url 'karyawan_hapus' k.pk %}" class="inline" onsubmit="return confirm('Hapus {{ k.nama }}?')">{% csrf_token %}<button class="btn btn-danger btn-xs"><i class="fas fa-trash"></i></button></form></td></tr>
{% empty %}<tr><td colspan="5" class="text-center text-neutral-400 py-8">Belum ada karyawan. Transaksi tetap bisa jalan tanpa karyawan.</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">Karyawan</h3><button onclick="closeModal('mForm')" class="text-neutral-400"><i class="fas fa-times"></i></button></div>
<form method="post" id="fKar" class="space-y-3">{% csrf_token %}<input type="hidden" name="pk">
<div><label class="form-label">Nama *</label><input name="nama" class="form-input" required></div>
<div class="grid grid-cols-2 gap-3"><div><label class="form-label">No. WA</label><input name="no_wa" class="form-input"></div><div><label class="form-label">Komisi (% dari total nota)</label><input name="komisi_persen" class="form-input" inputmode="decimal" value="0"></div></div>
<label class="flex items-center gap-2 text-sm"><input type="checkbox" name="aktif" checked class="w-4 h-4 accent-red-600"> Aktif</label>
<button class="btn btn-accent w-full justify-center">Simpan</button></form></div></div>
{% endblock %}