{% extends 'base.html' %}{% load rp_format %}
{% block title %}Kartu Stok{% endblock %}
{% block content %}
<div class="mb-4"><h1 class="page-title">Kartu Stok</h1>
<p class="page-sub">{% if varian_obj %}Riwayat <b>{{ varian_obj.nama_lengkap }}</b> · stok sekarang {{ varian_obj.stok }} · <a href="{% url 'mutasi_list' %}" class="text-red-600">lihat semua</a>{% else %}Semua perubahan stok: pembelian, penjualan, retur, opname, penyesuaian.{% endif %}</p></div>
<form class="card p-3 mb-4 grid grid-cols-2 md:grid-cols-6 gap-2">
  {% if varian_id %}<input type="hidden" name="varian" value="{{ varian_id }}">{% endif %}
  <input name="q" value="{{ q }}" placeholder="Produk / SKU / referensi" class="form-input col-span-2">
  <select name="tipe" class="form-input"><option value="">Semua tipe</option>{% for k,v in tipe_choices %}<option value="{{ k }}" {% if tipe_f == k %}selected{% endif %}>{{ v }}</option>{% endfor %}</select>
  <input type="date" name="dari" value="{{ dari }}" class="form-input"><input type="date" name="sampai" value="{{ sampai }}" class="form-input">
  <button class="btn btn-primary"><i class="fas fa-search"></i> Filter</button>
</form>
<div class="flex gap-3 mb-3 text-xs"><span class="badge badge-green">Masuk: {{ masuk }} psg</span><span class="badge badge-red">Keluar: {{ keluar }} psg</span></div>
<div class="card overflow-hidden"><div class="overflow-x-auto"><table class="tbl">
<thead><tr><th>Waktu</th><th>Varian</th><th>Tipe</th><th class="num">Qty</th><th class="num">Sebelum</th><th class="num">Sesudah</th><th>Referensi</th><th>Keterangan</th><th>Oleh</th></tr></thead>
<tbody>{% for m in page %}
<tr><td class="text-xs text-neutral-500 whitespace-nowrap">{{ m.dibuat|date:"d/m/Y H:i" }}</td>
<td><a href="?varian={{ m.varian_id }}" class="hover:text-red-600"><span class="font-medium">{{ m.varian.produk.nama_lengkap }}</span> <span class="text-neutral-500">({{ m.varian.label }})</span></a></td>
<td><span class="badge {% if m.qty > 0 %}badge-green{% else %}badge-red{% endif %}">{{ m.get_tipe_display }}</span></td>
<td class="num font-bold {% if m.qty > 0 %}text-green-700{% else %}text-red-600{% endif %}">{{ m.qty|stringformat:"+d" }}</td>
<td class="num text-neutral-400">{{ m.stok_sebelum }}</td><td class="num font-semibold">{{ m.stok_sesudah }}</td>
<td class="text-xs font-mono">{{ m.referensi|default:"-" }}</td><td class="text-xs text-neutral-500">{{ m.keterangan|default:"-" }}</td><td class="text-xs text-neutral-500">{{ m.dibuat_oleh.username|default:"-" }}</td></tr>
{% empty %}<tr><td colspan="9" class="text-center text-neutral-400 py-8">Belum ada mutasi.</td></tr>{% endfor %}</tbody></table></div>
{% include '_pagination.html' %}</div>
{% endblock %}