{% extends 'base.html' %}{% load rp_format %}
{% block title %}Stok{% endblock %}
{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3 mb-4">
  <div><h1 class="page-title">Stok Barang</h1><p class="page-sub">Per varian ukuran / warna. "Ditahan" = dipesan online, belum dikonfirmasi.</p></div>
  {% if request.user.is_staff %}<div class="flex gap-2"><a href="{% url 'pembelian_tambah' %}" class="btn btn-accent"><i class="fas fa-plus"></i> Restock</a><a href="{% url 'opname_baru' %}" class="btn btn-secondary"><i class="fas fa-clipboard-check"></i> Opname</a></div>{% endif %}
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
  <div class="stat"><p class="lbl">Total Pasang</p><p class="val">{{ total.pasang }}</p></div>
  <div class="stat"><p class="lbl">Nilai Modal</p><p class="val">{{ total.modal|rp }}</p></div>
  <div class="stat"><p class="lbl">Nilai Jual</p><p class="val">{{ total.jual|rp }}</p></div>
  <div class="stat"><p class="lbl">Varian Menipis</p><p class="val {% if total.menipis %}text-red-600{% endif %}">{{ total.menipis }}</p></div>
</div>
<form class="card p-3 mb-4 grid grid-cols-2 md:grid-cols-5 gap-2">
  <input name="q" value="{{ q }}" placeholder="Cari produk / SKU / ukuran" class="form-input col-span-2">
  <select name="merek" class="form-input"><option value="">Semua merek</option>{% for m in merek_list %}<option value="{{ m.id }}" {% if merek_f == m.id|stringformat:"s" %}selected{% endif %}>{{ m.nama }}</option>{% endfor %}</select>
  <select name="kategori" class="form-input"><option value="">Semua kategori</option>{% for k in kategori_list %}<option value="{{ k.id }}" {% if kategori_f == k.id|stringformat:"s" %}selected{% endif %}>{{ k.nama }}</option>{% endfor %}</select>
  <div class="flex gap-2"><select name="status" class="form-input"><option value="">Semua</option><option value="ada" {% if status_f == 'ada' %}selected{% endif %}>Ada stok</option><option value="menipis" {% if status_f == 'menipis' %}selected{% endif %}>Menipis</option><option value="habis" {% if status_f == 'habis' %}selected{% endif %}>Habis</option></select><button class="btn btn-primary"><i class="fas fa-search"></i></button></div>
</form>
<div class="card overflow-hidden"><div class="overflow-x-auto"><table class="tbl">
<thead><tr><th>Produk</th><th>Varian</th><th>SKU</th><th class="num">Harga</th>{% if request.user.is_staff %}<th class="num">HPP</th>{% endif %}<th class="num">Stok</th><th class="num">Ditahan</th><th class="num">Tersedia</th>{% if request.user.is_staff %}<th class="num">Nilai Modal</th>{% endif %}<th></th></tr></thead>
<tbody>{% for r in page %}
<tr><td><a href="{% url 'produk_detail' r.v.produk_id %}" class="hover:text-red-600"><span class="text-xs text-red-600 font-bold uppercase">{{ r.v.produk.merek.nama }}</span><br><span class="font-semibold">{{ r.v.produk.nama }}</span></a></td>
<td class="font-bold">{{ r.v.label }}</td><td class="text-xs text-neutral-500">{{ r.v.sku|default:"-" }}</td><td class="num">{{ r.v.harga_jual|rp }}</td>
{% if request.user.is_staff %}<td class="num text-neutral-500">{{ r.v.hpp|rp }}</td>{% endif %}
<td class="num"><span class="badge {% if r.v.stok <= 0 %}badge-red{% elif r.menipis %}badge-yellow{% else %}badge-green{% endif %}">{{ r.v.stok }}</span></td>
<td class="num text-neutral-400">{% if r.ditahan %}{{ r.ditahan }}{% else %}-{% endif %}</td><td class="num font-semibold">{{ r.tersedia }}</td>
{% if request.user.is_staff %}<td class="num text-neutral-500">{{ r.nilai_modal|rp }}</td>{% endif %}
<td class="text-right"><a href="{% url 'mutasi_list' %}?varian={{ r.v.id }}" class="btn btn-secondary btn-xs" title="Kartu stok"><i class="fas fa-list"></i></a></td></tr>
{% empty %}<tr><td colspan="10" class="text-center text-neutral-400 py-8">Tidak ada data.</td></tr>{% endfor %}</tbody></table></div>
{% include '_pagination.html' %}</div>
{% endblock %}