{% extends 'base.html' %}{% load rp_format static %}
{% block title %}Produk{% endblock %}
{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3 mb-4">
  <div><h1 class="page-title">Produk</h1><p class="page-sub">{{ page.paginator.count }} produk</p></div>
  {% if request.user.is_staff %}
  <div class="flex gap-2">
    <a href="{% url 'import_produk' %}" class="btn btn-secondary"><i class="fas fa-file-excel"></i> Import</a>
    <a href="{% url 'produk_tambah' %}" class="btn btn-accent"><i class="fas fa-plus"></i> Tambah Produk</a>
  </div>
  {% endif %}
</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 merek / tipe / SKU" class="form-input col-span-2 md: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 status</option>
      <option value="aktif" {% if status_f == 'aktif' %}selected{% endif %}>Aktif</option>
      <option value="katalog" {% if status_f == 'katalog' %}selected{% endif %}>Tampil di katalog</option>
      <option value="habis" {% if status_f == 'habis' %}selected{% endif %}>Stok habis</option>
      <option value="nonaktif" {% if status_f == 'nonaktif' %}selected{% endif %}>Nonaktif</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>Kategori</th><th class="num">Harga</th><th class="num">Varian</th><th class="num">Stok</th><th>Katalog</th><th>Unggulan</th><th></th></tr></thead>
    <tbody>
    {% for p in page %}
    <tr class="{% if not p.aktif %}opacity-50{% endif %}">
      <td>
        <a href="{% url 'produk_detail' p.pk %}" class="flex items-center gap-3">
          {% with f=p.foto.all.0 %}<img src="{% if f %}{{ f.gambar.url }}{% else %}{% static 'img/placeholder.svg' %}{% endif %}" class="w-11 h-11 rounded-lg object-cover bg-neutral-100 flex-shrink-0">{% endwith %}
          <div class="min-w-0"><p class="text-[10px] font-bold text-red-600 tracking-wider uppercase">{{ p.merek.nama }}</p><p class="font-semibold truncate hover:text-red-600">{{ p.nama }}</p>{% if not p.aktif %}<span class="badge badge-gray">nonaktif</span>{% endif %}</div>
        </a>
      </td>
      <td class="text-xs text-neutral-500">{{ p.kategori.nama|default:"-" }}</td>
      <td class="num font-semibold">{{ p.harga|rp }}{% if p.harga_coret %}<br><span class="text-xs text-neutral-400 line-through font-normal">{{ p.harga_coret|rp }}</span>{% endif %}</td>
      <td class="num">{{ p.jml_varian }}</td>
      <td class="num"><span class="badge {% if not p.stok_total %}badge-red{% elif p.stok_total <= 3 %}badge-yellow{% else %}badge-green{% endif %}">{{ p.stok_total|default:0 }} psg</span></td>
      <td>{% if request.user.is_staff %}<button onclick="toggle({{ p.pk }},'tampil_katalog',this)" class="badge {% if p.tampil_katalog %}badge-green{% else %}badge-gray{% endif %} cursor-pointer">{% if p.tampil_katalog %}Tampil{% else %}Sembunyi{% endif %}</button>{% else %}<span class="badge {% if p.tampil_katalog %}badge-green{% else %}badge-gray{% endif %}">{% if p.tampil_katalog %}Tampil{% else %}Sembunyi{% endif %}</span>{% endif %}</td>
      <td>{% if request.user.is_staff %}<button onclick="toggle({{ p.pk }},'unggulan',this)" class="badge {% if p.unggulan %}badge-amber{% else %}badge-gray{% endif %} cursor-pointer">{% if p.unggulan %}<i class="fas fa-star mr-1"></i>Ya{% else %}Tidak{% endif %}</button>{% endif %}</td>
      <td class="whitespace-nowrap">
        <a href="{% url 'produk_detail' p.pk %}" class="btn btn-secondary btn-xs">Varian & Stok</a>
        {% if request.user.is_staff %}<a href="{% url 'produk_edit' p.pk %}" class="btn btn-secondary btn-xs"><i class="fas fa-pen"></i></a>{% endif %}
      </td>
    </tr>
    {% empty %}<tr><td colspan="8" class="text-center text-neutral-400 py-10">Belum ada produk. {% if request.user.is_staff %}<a href="{% url 'produk_tambah' %}" class="text-red-600 font-semibold">Tambah produk pertama</a> atau <a href="{% url 'import_produk' %}" class="text-red-600 font-semibold">import dari Excel</a>.{% endif %}</td></tr>{% endfor %}
    </tbody></table></div>
  {% include '_pagination.html' %}
</div>
{% endblock %}
{% block extra_js %}
<script>
function toggle(pk, field, btn){
  fetch('/produk/'+pk+'/toggle/',{method:'POST',headers:{'X-CSRFToken':CSRF,'X-Requested-With':'XMLHttpRequest','Content-Type':'application/x-www-form-urlencoded'},body:'field='+field})
  .then(r=>r.json()).then(d=>{ if(d.success){ location.reload(); } else alert(d.error||'Gagal'); });
}
</script>
{% endblock %}