{% extends 'base.html' %}{% load rp_format %}
{% block title %}Laporan Produk{% endblock %}
{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3 mb-4">
  <div><h1 class="page-title">Laporan Produk</h1><p class="page-sub">Model apa yang laku, kategori dan ukuran mana yang paling jalan, dan apa yang mandek.</p></div>
  <form class="flex gap-2 items-end"><div><label class="form-label">Dari</label><input type="date" name="dari" value="{{ dari }}" class="form-input"></div><div><label class="form-label">Sampai</label><input type="date" name="sampai" value="{{ sampai }}" class="form-input"></div><button class="btn btn-primary"><i class="fas fa-search"></i></button></form>
</div>
<div class="grid grid-cols-2 gap-3 mb-4 max-w-md">
  <div class="stat"><p class="lbl">Pasang Terjual</p><p class="val">{{ total_qty }}</p></div>
  <div class="stat"><p class="lbl">Omzet Barang</p><p class="val">{{ total_omzet|rp }}</p></div>
</div>
<div class="grid lg:grid-cols-3 gap-4 mb-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">Produk Terlaris</h3></div>
    <div class="overflow-x-auto"><table class="tbl"><thead><tr><th>#</th><th>Produk</th><th class="num">Terjual</th><th class="num">Retur</th><th class="num">Omzet</th><th class="num">Laba Kotor</th></tr></thead>
    <tbody>{% for r in per_produk %}<tr><td class="text-neutral-400">{{ forloop.counter }}</td><td>{% if r.id %}<a href="{% url 'produk_detail' r.id %}" class="font-medium hover:text-red-600">{{ r.nama }}</a>{% else %}<span class="text-neutral-400">{{ r.nama }}</span>{% endif %}</td><td class="num font-bold">{{ r.qty }}</td><td class="num text-neutral-400">{{ r.retur|default:"-" }}</td><td class="num">{{ r.omzet|rp }}</td><td class="num text-green-700 font-semibold">{{ r.laba|rp }}</td></tr>
    {% empty %}<tr><td colspan="6" class="text-center text-neutral-400 py-8">Belum ada penjualan.</td></tr>{% endfor %}</tbody></table></div></div>
  <div class="space-y-4">
    <div class="card p-5"><h3 class="font-bold text-sm mb-2">Per Merek</h3>{% for m in per_merek %}<div class="flex justify-between py-1.5 border-b border-neutral-50 text-sm"><span>{{ m.varian__produk__merek__nama|default:"-" }}</span><span><b>{{ m.qty }}</b> psg <span class="text-xs text-neutral-400">· {{ m.omzet|rp }}</span></span></div>{% empty %}<p class="text-xs text-neutral-400">-</p>{% endfor %}</div>
    <div class="card p-5"><h3 class="font-bold text-sm mb-2">Per Kategori</h3>{% for k in per_kategori %}<div class="flex justify-between py-1.5 border-b border-neutral-50 text-sm"><span>{{ k.varian__produk__kategori__nama|default:"Tanpa kategori" }}</span><span><b>{{ k.qty }}</b> psg <span class="text-xs text-neutral-400">· {{ k.omzet|rp }}</span></span></div>{% empty %}<p class="text-xs text-neutral-400">-</p>{% endfor %}</div>
    <div class="card p-5"><h3 class="font-bold text-sm mb-2">Per Ukuran</h3><div class="flex flex-wrap gap-2">{% for u in per_ukuran %}<span class="badge badge-gray">{{ u.varian__ukuran|default:"?" }} <b class="ml-1">{{ u.qty }}</b></span>{% empty %}<p class="text-xs text-neutral-400">-</p>{% endfor %}</div></div>
  </div>
</div>
<div class="card overflow-hidden"><div class="px-5 py-3 border-b border-neutral-100"><h3 class="font-bold text-sm">Tidak Laku di Periode Ini (masih ada stok)</h3></div>
  <div class="overflow-x-auto"><table class="tbl"><thead><tr><th>Produk</th><th class="num">Stok</th><th class="num">Harga</th><th></th></tr></thead>
  <tbody>{% for p in tidak_laku %}<tr><td><a href="{% url 'produk_detail' p.pk %}" class="hover:text-red-600"><span class="text-xs text-red-600 font-bold uppercase">{{ p.merek.nama }}</span> <span class="font-medium">{{ p.nama }}</span></a></td><td class="num">{{ p.stok_total }}</td><td class="num">{{ p.harga|rp }}</td><td class="text-right"><a href="{% url 'produk_edit' p.pk %}" class="btn btn-secondary btn-xs">Atur promo</a></td></tr>
  {% empty %}<tr><td colspan="4" class="text-center text-neutral-400 py-6">Semua produk berstok laku di periode ini.</td></tr>{% endfor %}</tbody></table></div></div>
{% endblock %}