{% extends 'base.html' %}{% load rp_format %}
{% block title %}Laporan Keuangan{% endblock %}
{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3 mb-4">
  <div><h1 class="page-title">Laporan Keuangan</h1><p class="page-sub">{{ d1|date:"d M Y" }} s/d {{ d2|date:"d M Y" }}</p></div>
  <form class="flex flex-wrap 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> Tampilkan</button>
    <a href="{% url 'laporan_cetak' %}?dari={{ dari }}&sampai={{ sampai }}" target="_blank" class="btn btn-secondary"><i class="fas fa-print"></i> Cetak</a>
  </form>
</div>

<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-3">
  <div class="stat"><p class="lbl">Omzet Barang</p><p class="val">{{ omzet_bruto|rp }}</p><p class="sub">{{ jml_trx }} nota · diskon {{ diskon|rp }}{% if kirim %} · ongkir+packing {{ kirim|rp }} (titipan, tidak dihitung)</p>{% endif %}</div>
  <div class="stat"><p class="lbl">Retur</p><p class="val text-red-600">- {{ retur_total|rp }}</p><p class="sub">{{ jml_retur }} retur</p></div>
  <div class="stat"><p class="lbl">Omzet Bersih</p><p class="val">{{ omzet_bersih|rp }}</p><p class="sub">{{ pasang }} pasang terjual</p></div>
  <div class="stat"><p class="lbl">HPP (Modal Barang)</p><p class="val text-neutral-600">- {{ hpp|rp }}</p></div>
</div>
<div class="grid grid-cols-3 gap-3 mb-6">
  <div class="stat border-green-200 bg-green-50/40"><p class="lbl">Laba Kotor</p><p class="val text-green-700">{{ laba_kotor|rp }}</p><p class="sub">margin {{ margin|floatformat:1 }}%</p></div>
  <div class="stat border-red-200 bg-red-50/40"><p class="lbl">Pengeluaran</p><p class="val text-red-600">- {{ pengeluaran|rp }}</p><p class="sub">operasional & komisi</p></div>
  <div class="stat border-red-300 bg-red-50"><p class="lbl">Laba Bersih</p><p class="val {% if laba_bersih < 0 %}text-red-600{% else %}text-red-700{% endif %}">{{ laba_bersih|rp }}</p><p class="sub">laba kotor - pengeluaran</p></div>
</div>

<div class="grid lg:grid-cols-3 gap-4 mb-4">
  <div class="card p-5"><h3 class="font-bold text-sm mb-3">Per Metode Bayar</h3>
    {% for m in per_metode %}<div class="flex justify-between py-1.5 border-b border-neutral-50 text-sm"><span>{{ m.label }} <span class="text-xs text-neutral-400">({{ m.n }})</span></span><b>{{ m.t|rp }}</b></div>{% empty %}<p class="text-xs text-neutral-400">-</p>{% endfor %}</div>
  <div class="card p-5"><h3 class="font-bold text-sm mb-3">Per Sumber</h3>
    {% for s in per_sumber %}<div class="flex justify-between py-1.5 border-b border-neutral-50 text-sm"><span>{{ s.label }} <span class="text-xs text-neutral-400">({{ s.n }})</span></span><b>{{ s.t|rp }}</b></div>{% empty %}<p class="text-xs text-neutral-400">-</p>{% endfor %}</div>
  <div class="card p-5"><h3 class="font-bold text-sm mb-3">Pengeluaran per Tipe</h3>
    {% for p in peng_rows %}<div class="flex justify-between py-1.5 border-b border-neutral-50 text-sm"><span>{{ p.label|truncatechars:28 }}</span><b class="text-red-600">{{ p.total|rp }}</b></div>{% empty %}<p class="text-xs text-neutral-400">Tidak ada pengeluaran.</p>{% endfor %}
    <a href="{% url 'pengeluaran_list' %}?dari={{ dari }}&sampai={{ sampai }}" class="text-xs text-red-600 font-semibold mt-2 inline-block">Detail &rarr;</a></div>
</div>

<div class="card overflow-hidden"><div class="px-5 py-3 border-b border-neutral-100"><h3 class="font-bold text-sm">Rekap Harian</h3></div>
<div class="overflow-x-auto"><table class="tbl">
<thead><tr><th>Tanggal</th><th class="num">Nota</th><th class="num">Omzet Bersih</th><th class="num">HPP</th><th class="num">Laba Kotor</th><th class="num">Pengeluaran</th><th class="num">Laba Bersih</th></tr></thead>
<tbody>{% for r in rows %}
<tr><td class="font-medium">{{ r.tanggal|date:"D, d M Y" }}</td><td class="num">{{ r.n }}</td><td class="num">{{ r.omzet|rp }}{% if r.retur %}<br><span class="text-[10px] text-red-500">retur {{ r.retur|rp }}</span>{% endif %}</td><td class="num text-neutral-500">{{ r.hpp|rp }}</td><td class="num text-green-700 font-semibold">{{ r.laba_kotor|rp }}</td><td class="num text-red-600">{{ r.pengeluaran|rp }}</td><td class="num font-bold {% if r.laba_bersih < 0 %}text-red-600{% endif %}">{{ r.laba_bersih|rp }}</td></tr>
{% empty %}<tr><td colspan="7" class="text-center text-neutral-400 py-8">Tidak ada data di periode ini.</td></tr>{% endfor %}</tbody>
<tfoot class="bg-neutral-50 font-bold"><tr><td>Total</td><td class="num">{{ jml_trx }}</td><td class="num">{{ omzet_bersih|rp }}</td><td class="num">{{ hpp|rp }}</td><td class="num text-green-700">{{ laba_kotor|rp }}</td><td class="num text-red-600">{{ pengeluaran|rp }}</td><td class="num">{{ laba_bersih|rp }}</td></tr></tfoot></table></div></div>
{% endblock %}