{% extends 'base.html' %}{% load rp_format %}
{% block title %}Nilai Persediaan{% endblock %}
{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3 mb-4">
  <div><h1 class="page-title">Nilai Persediaan</h1><p class="page-sub">Berapa modal yang tertahan di stok, per {{ now|date:"d F Y" }}.</p></div>
  <form class="flex gap-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>
    <button class="btn btn-primary"><i class="fas fa-filter"></i></button>
  </form>
</div>
<div class="grid grid-cols-2 lg:grid-cols-5 gap-3 mb-5">
  <div class="stat"><p class="lbl">Produk</p><p class="val">{{ total.produk }}</p><p class="sub">{{ total.varian }} varian</p></div>
  <div class="stat"><p class="lbl">Total Pasang</p><p class="val">{{ total.pasang }}</p></div>
  <div class="stat"><p class="lbl">Nilai Modal (HPP)</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">Potensi Laba Kotor</p><p class="val text-green-700">{{ total.potensi_laba|rp }}</p></div>
</div>
<div class="grid lg:grid-cols-3 gap-4">
  <div class="card overflow-hidden lg:col-span-2">
    <div class="px-5 py-3 border-b border-neutral-100"><h3 class="font-bold text-sm">Per Produk</h3></div>
    <div class="overflow-x-auto"><table class="tbl"><thead><tr><th>Produk</th><th class="num">Varian</th><th class="num">Pasang</th><th class="num">Nilai Modal</th><th class="num">Nilai Jual</th></tr></thead>
    <tbody>{% for r in rows %}<tr><td><a href="{% url 'produk_detail' r.produk.pk %}" class="hover:text-red-600"><span class="text-xs text-red-600 font-bold uppercase">{{ r.produk.merek.nama }}</span><br><span class="font-medium">{{ r.produk.nama }}</span></a></td><td class="num">{{ r.varian }}</td><td class="num font-semibold">{{ r.pasang }}</td><td class="num">{{ r.modal|rp }}</td><td class="num text-neutral-500">{{ r.jual|rp }}</td></tr>
    {% empty %}<tr><td colspan="5" class="text-center text-neutral-400 py-8">Tidak ada data.</td></tr>{% endfor %}</tbody></table></div>
  </div>
  <div class="space-y-4">
  <div class="card overflow-hidden">
    <div class="px-5 py-3 border-b border-neutral-100"><h3 class="font-bold text-sm">Per Merek</h3></div>
    <table class="tbl"><thead><tr><th>Merek</th><th class="num">Pasang</th><th class="num">Modal</th></tr></thead>
    <tbody>{% for m in merek_rows %}<tr><td class="font-medium">{{ m.nama }}</td><td class="num">{{ m.pasang }}</td><td class="num">{{ m.modal|rp }}</td></tr>{% endfor %}</tbody></table>
  </div>
  <div class="card overflow-hidden">
    <div class="px-5 py-3 border-b border-neutral-100"><h3 class="font-bold text-sm">Per Kategori</h3></div>
    <table class="tbl"><thead><tr><th>Kategori</th><th class="num">Pasang</th><th class="num">Modal</th></tr></thead>
    <tbody>{% for m in kategori_rows %}<tr><td class="font-medium">{{ m.nama }}</td><td class="num">{{ m.pasang }}</td><td class="num">{{ m.modal|rp }}</td></tr>{% endfor %}</tbody></table>
  </div>
  </div>
</div>
{% endblock %}