{% extends 'base.html' %}{% load rp_format %}
{% block title %}Dashboard · {{ toko.nama }}{% endblock %}
{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3 mb-5">
  <div>
    <h1 class="page-title">Dashboard</h1>
    <p class="page-sub">Ringkasan hari ini dan bulan ini</p>
  </div>
  <div class="flex gap-2">
    <a href="{% url 'pos' %}" class="btn btn-accent"><i class="fas fa-cash-register"></i> Transaksi Baru</a>
    {% if request.user.is_staff %}<a href="{% url 'laporan' %}" class="btn btn-secondary"><i class="fas fa-chart-line"></i> Laporan</a>{% endif %}
  </div>
</div>

{% if pesanan_baru_count or pending_bukti or menipis_count %}
<div class="flex flex-wrap gap-2 mb-5">
  {% if pesanan_baru_count %}<a href="{% url 'katalog:kelola_pesanan' %}?status=menunggu_konfirmasi" class="alert alert-info mb-0 hover:brightness-95"><i class="fas fa-bag-shopping mt-0.5"></i><span><b>{{ pesanan_baru_count }} pesanan online</b> menunggu konfirmasi bukti transfer</span></a>{% endif %}
  {% if pending_bukti %}<a href="{% url 'riwayat' %}?status=pending&dari=2020-01-01" class="alert alert-warning mb-0 hover:brightness-95"><i class="fas fa-clock mt-0.5"></i><span><b>{{ pending_bukti }} transaksi</b> non-tunai belum ada bukti bayar</span></a>{% endif %}
  {% if menipis_count %}<a href="{% url 'stok_list' %}?status=menipis" class="alert alert-error mb-0 hover:brightness-95"><i class="fas fa-triangle-exclamation mt-0.5"></i><span><b>{{ menipis_count }} varian</b> stoknya menipis / habis</span></a>{% endif %}
</div>
{% endif %}

<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
  <div class="stat"><p class="lbl">Omzet Barang Hari Ini</p><p class="val">{{ hari.omzet|rp }}</p><p class="sub">{{ hari.n }} nota · {{ hari.pasang }} pasang{% if hari.kirim %} · ongkir {{ hari.kirim|rp }}{% endif %}</p></div>
  <div class="stat"><p class="lbl">Laba Kotor Hari Ini</p><p class="val text-green-700">{{ hari.laba_kotor|rp }}</p><p class="sub">omzet - modal barang</p></div>
  <div class="stat"><p class="lbl">Pengeluaran Hari Ini</p><p class="val text-red-600">{{ hari.pengeluaran|rp }}</p><p class="sub">{% if hari.retur %}retur {{ hari.retur|rp }}{% else %}operasional{% endif %}</p></div>
  <div class="stat"><p class="lbl">Laba Bersih Hari Ini</p><p class="val {% if hari.laba_bersih < 0 %}text-red-600{% endif %}">{{ hari.laba_bersih|rp }}</p><p class="sub">laba kotor - pengeluaran</p></div>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
  <div class="stat border-red-200 bg-red-50/40"><p class="lbl">Omzet Bulan Ini</p><p class="val">{{ bulan.omzet|rp }}</p><p class="sub">{{ bulan.n }} nota · {{ bulan.pasang }} pasang</p></div>
  <div class="stat border-red-200 bg-red-50/40"><p class="lbl">Laba Kotor Bulan Ini</p><p class="val text-green-700">{{ bulan.laba_kotor|rp }}</p><p class="sub">modal {{ bulan.hpp|rp }}</p></div>
  <div class="stat border-red-200 bg-red-50/40"><p class="lbl">Laba Bersih Bulan Ini</p><p class="val {% if bulan.laba_bersih < 0 %}text-red-600{% endif %}">{{ bulan.laba_bersih|rp }}</p><p class="sub">pengeluaran {{ bulan.pengeluaran|rp }}</p></div>
  <div class="stat border-red-200 bg-red-50/40"><p class="lbl">Nilai Stok Saat Ini</p><p class="val">{{ persediaan.modal|rp }}</p><p class="sub">{{ persediaan.pasang }} pasang (harga modal)</p></div>
</div>

<div class="grid lg:grid-cols-3 gap-4 mb-4">
  <div class="card p-5 lg:col-span-2">
    <div class="flex items-center justify-between mb-3"><h3 class="font-bold text-sm">Omzet 7 Hari Terakhir</h3></div>
    <div style="height:220px"><canvas id="chart"></canvas></div>
  </div>
  <div class="card p-5">
    <h3 class="font-bold text-sm mb-3">Terlaris Bulan Ini</h3>
    {% for t in terlaris %}
    <div class="flex items-center justify-between py-2 border-b border-neutral-50 last:border-0">
      <div class="min-w-0"><p class="text-sm font-medium truncate">{{ t.varian__produk__merek__nama }} {{ t.varian__produk__nama|default:"(terhapus)" }}</p><p class="text-xs text-neutral-400">{{ t.omzet|rp }}</p></div>
      <span class="badge badge-amber">{{ t.qty }} psg</span>
    </div>
    {% empty %}<p class="text-xs text-neutral-400">Belum ada penjualan bulan ini.</p>{% endfor %}
  </div>
</div>

<div class="grid lg:grid-cols-3 gap-4">
  <div class="card lg:col-span-2 overflow-hidden">
    <div class="px-5 py-3 border-b border-neutral-100 flex items-center justify-between"><h3 class="font-bold text-sm">Transaksi Terbaru</h3><a href="{% url 'riwayat' %}" class="text-xs text-red-600 font-semibold">Lihat semua &rarr;</a></div>
    <div class="overflow-x-auto"><table class="tbl">
      <thead><tr><th>Waktu</th><th>Customer</th><th>Barang</th><th>Metode</th><th class="num">Total</th><th>Status</th></tr></thead>
      <tbody>
      {% for t in trx_terbaru %}
      <tr>
        <td class="text-neutral-500 whitespace-nowrap">{{ t.tanggal|date:"d/m H:i" }}</td>
        <td><a href="{% url 'detail_transaksi' t.pk %}" class="font-medium hover:text-red-600">{{ t.nama_customer }}</a>{% if t.sumber == 'online' %} <span class="badge badge-blue">online</span>{% endif %}</td>
        <td class="text-xs text-neutral-500 max-w-[220px] truncate">{% for it in t.items.all %}{{ it.nama }}{% if it.qty > 1 %} x{{ it.qty }}{% endif %}{% if not forloop.last %}, {% endif %}{% endfor %}</td>
        <td class="text-xs">{{ t.get_metode_bayar_display }}</td>
        <td class="num font-semibold">{{ t.total|rp }}</td>
        <td><span class="badge badge-{{ t.status_color }}">{{ t.get_status_display|truncatechars:16 }}</span></td>
      </tr>
      {% empty %}<tr><td colspan="6" class="text-center text-neutral-400 py-6">Belum ada transaksi.</td></tr>{% endfor %}
      </tbody></table></div>
  </div>
  <div class="card overflow-hidden">
    <div class="px-5 py-3 border-b border-neutral-100 flex items-center justify-between"><h3 class="font-bold text-sm">Stok Menipis</h3><a href="{% url 'stok_list' %}?status=menipis" class="text-xs text-red-600 font-semibold">Semua &rarr;</a></div>
    {% for v in menipis %}
    <div class="px-5 py-2.5 border-b border-neutral-50 last:border-0 flex items-center justify-between gap-2">
      <div class="min-w-0"><p class="text-sm font-medium truncate">{{ v.produk.nama_lengkap }}</p><p class="text-xs text-neutral-400">{{ v.label }}{% if v.sku %} · {{ v.sku }}{% endif %}</p></div>
      <span class="badge {% if v.stok <= 0 %}badge-red{% else %}badge-yellow{% endif %}">{{ v.stok }} psg</span>
    </div>
    {% empty %}<p class="px-5 py-6 text-xs text-neutral-400 text-center">Semua stok aman (batas {{ default_min }} pasang).</p>{% endfor %}
  </div>
</div>

{% if pesanan_baru %}
<div class="card overflow-hidden mt-4">
  <div class="px-5 py-3 border-b border-neutral-100 flex items-center justify-between"><h3 class="font-bold text-sm">Pesanan Online Menunggu Konfirmasi</h3><a href="{% url 'katalog:kelola_pesanan' %}" class="text-xs text-red-600 font-semibold">Kelola &rarr;</a></div>
  <div class="overflow-x-auto"><table class="tbl">
    <thead><tr><th>Kode</th><th>Pemesan</th><th>Barang</th><th class="num">Total</th><th>Masuk</th><th></th></tr></thead>
    <tbody>{% for p in pesanan_baru %}
    <tr><td class="font-mono text-xs">#{{ p.kode_ref }}</td><td class="font-medium">{{ p.nama_pemesan }}<br><span class="text-xs text-neutral-400">{{ p.no_wa }}</span></td>
      <td class="text-xs text-neutral-500">{% for it in p.items.all %}{{ it.nama }}{% if it.qty > 1 %} x{{ it.qty }}{% endif %}{% if not forloop.last %}, {% endif %}{% endfor %}</td>
      <td class="num font-semibold">{{ p.total|rp }}</td><td class="text-xs text-neutral-500">{{ p.dibuat|date:"d/m H:i" }}</td>
      <td><a href="{% url 'katalog:pesanan_detail' p.pk %}" class="btn btn-primary btn-xs">Periksa</a></td></tr>
    {% endfor %}</tbody></table></div>
</div>
{% endif %}
{% endblock %}
{% block extra_js %}
<script>
new Chart(document.getElementById('chart'),{type:'bar',data:{labels:{{ labels|safe }},datasets:[{label:'Omzet',data:{{ data_omzet|safe }},backgroundColor:'#e10600',hoverBackgroundColor:'#0a0a0a',borderRadius:6}]},
options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{callbacks:{label:c=>rp(c.raw)}}},scales:{y:{beginAtZero:true,suggestedMax:500000,ticks:{callback:v=>'Rp '+Math.round(v/1000)+'k',font:{size:10}},grid:{color:'#f3f4f6'}},x:{grid:{display:false},ticks:{font:{size:10}}}}}});
</script>
{% endblock %}