{% extends 'base.html' %}{% load rp_format static %}
{% block title %}{{ obj.nama_lengkap }}{% endblock %}
{% block content %}
<div class="mb-4"><a href="{% url 'produk_list' %}" class="text-xs text-neutral-500 hover:text-red-600"><i class="fas fa-arrow-left mr-1"></i>Daftar produk</a></div>
<div class="flex flex-wrap items-start justify-between gap-3 mb-4">
  <div class="flex items-start gap-4">
    {% with f=obj.foto_utama %}<img src="{% if f %}{{ f.gambar.url }}{% else %}{% static 'img/placeholder.svg' %}{% endif %}" class="w-20 h-20 rounded-xl object-cover bg-neutral-100">{% endwith %}
    <div>
      <p class="text-xs text-neutral-500"><a href="{% url 'produk_list' %}?merek={{ obj.merek_id }}" class="font-bold text-red-600 uppercase">{{ obj.merek.nama }}</a> · {{ obj.kategori.nama|default:"Tanpa kategori" }}</p>
      <h1 class="page-title">{{ obj.nama }}</h1>
      <div class="flex flex-wrap gap-2 mt-2">
        <span class="badge {% if obj.aktif %}badge-green{% else %}badge-gray{% endif %}">{% if obj.aktif %}Aktif{% else %}Nonaktif{% endif %}</span>
        <span class="badge {% if obj.tampil_katalog %}badge-blue{% else %}badge-gray{% endif %}">{% if obj.tampil_katalog %}Tampil di katalog{% else %}Tidak di katalog{% endif %}</span>
        {% if obj.unggulan %}<span class="badge badge-amber"><i class="fas fa-star mr-1"></i>Unggulan</span>{% endif %}
        <a href="{% url 'katalog:produk_detail' obj.slug %}" target="_blank" class="badge badge-gray hover:bg-neutral-200"><i class="fas fa-link mr-1"></i>/p/{{ obj.slug }}</a>
      </div>
    </div>
  </div>
  {% if request.user.is_staff %}
  <div class="flex gap-2">
    <a href="{% url 'produk_edit' obj.pk %}" class="btn btn-secondary"><i class="fas fa-pen"></i> Edit Produk</a>
    <form method="post" action="{% url 'produk_hapus' obj.pk %}" onsubmit="return confirm('Hapus produk {{ obj.nama_lengkap }} beserta semua variannya?')">{% csrf_token %}<button class="btn btn-danger"><i class="fas fa-trash"></i></button></form>
  </div>
  {% endif %}
</div>

<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
  <div class="stat"><p class="lbl">Harga Jual</p><p class="val">{{ obj.harga|rp }}</p>{% if obj.harga_coret %}<p class="sub line-through">{{ obj.harga_coret|rp }}</p>{% endif %}</div>
  <div class="stat"><p class="lbl">Total Stok</p><p class="val">{{ total_stok }} <span class="text-sm font-medium text-neutral-400">pasang</span></p><p class="sub">{{ varian_list|length }} varian</p></div>
  <div class="stat"><p class="lbl">Nilai Modal Stok</p><p class="val">{{ nilai_modal|rp }}</p></div>
  <div class="stat"><p class="lbl">Terjual (sepanjang waktu)</p><p class="val">{{ terjual }} <span class="text-sm font-medium text-neutral-400">pasang</span></p></div>
</div>

<div class="grid lg:grid-cols-3 gap-4">
  <div class="lg:col-span-2 space-y-4">
    <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">Varian (ukuran / warna) & stok</h3>
        {% if request.user.is_staff %}<button onclick="openModal('mVarian')" class="btn btn-accent btn-sm"><i class="fas fa-plus"></i> Tambah Varian</button>{% endif %}
      </div>
      <div class="overflow-x-auto"><table class="tbl">
        <thead><tr><th>Ukuran</th><th>Warna</th><th>SKU / Barcode</th><th class="num">Harga</th>{% if request.user.is_staff %}<th class="num">HPP</th>{% endif %}<th class="num">Stok</th><th class="num">Ditahan</th><th class="num">Tersedia</th><th></th></tr></thead>
        <tbody>
        {% for v in varian_list %}
        <tr class="{% if not v.aktif %}opacity-50{% endif %}">
          <td class="font-bold">{{ v.ukuran }}</td>
          <td>{{ v.warna|default:"-" }}</td>
          <td class="text-xs text-neutral-500">{{ v.sku|default:"-" }}{% if v.barcode %}<br>{{ v.barcode }}{% endif %}</td>
          <td class="num">{{ v.harga_jual|rp }}{% if v.harga is not None %} <span class="text-[10px] text-red-600" title="harga khusus varian">*</span>{% endif %}</td>
          {% if request.user.is_staff %}<td class="num text-neutral-500">{{ v.hpp|rp }}</td>{% endif %}
          <td class="num"><span class="badge {% if v.stok <= 0 %}badge-red{% elif v.stok <= v.batas %}badge-yellow{% else %}badge-green{% endif %}">{{ v.stok }}</span></td>
          <td class="num text-neutral-400">{% if v.ditahan %}{{ v.ditahan }}{% else %}-{% endif %}</td>
          <td class="num font-semibold">{{ v.tersedia }}</td>
          <td class="whitespace-nowrap text-right">
            <a href="{% url 'mutasi_list' %}?varian={{ v.id }}" class="btn btn-secondary btn-xs" title="Kartu stok"><i class="fas fa-list"></i></a>
            {% if request.user.is_staff %}
            <a href="{% url 'varian_edit' v.pk %}" class="btn btn-secondary btn-xs"><i class="fas fa-pen"></i></a>
            <form method="post" action="{% url 'varian_hapus' v.pk %}" class="inline" onsubmit="return confirm('Hapus varian {{ v.label }}?')">{% csrf_token %}<button class="btn btn-danger btn-xs"><i class="fas fa-trash"></i></button></form>
            {% endif %}
          </td>
        </tr>
        {% empty %}<tr><td colspan="9" class="text-center text-neutral-400 py-8">Belum ada varian. Tambahkan ukuran & warna supaya produk bisa dijual.</td></tr>{% endfor %}
        </tbody></table></div>
      <p class="px-5 py-2 text-[11px] text-neutral-400 border-t border-neutral-100">Stok diubah lewat <a href="{% url 'pembelian_tambah' %}" class="text-red-600">Pembelian</a>, <a href="{% url 'penyesuaian' %}" class="text-red-600">Penyesuaian</a>, atau <a href="{% url 'opname_baru' %}" class="text-red-600">Opname</a>, supaya semua perubahan tercatat di kartu stok. "Ditahan" = sedang dipesan online, belum dikonfirmasi.</p>
    </div>
    {% if obj.deskripsi %}<div class="card p-5"><h3 class="font-bold text-sm mb-2">Deskripsi</h3><p class="text-sm text-neutral-600 whitespace-pre-line">{{ obj.deskripsi }}</p></div>{% endif %}
  </div>

  <div class="card p-5">
    <h3 class="font-bold text-sm mb-1">Foto 4 Sudut</h3>
    <p class="text-[11px] text-neutral-400 mb-3">Tampak depan jadi foto utama. Klik slot untuk upload / ganti.</p>
    <div class="grid grid-cols-2 gap-3">
      {% for sudut, label, f in slot_foto %}
      <div class="relative group">
        <div class="aspect-square rounded-xl overflow-hidden bg-neutral-100 border-2 {% if f %}border-transparent{% else %}border-dashed border-neutral-300{% endif %} relative">
          {% if f %}<img src="{{ f.gambar.url }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
          {% else %}<div class="w-full h-full flex flex-col items-center justify-center text-neutral-300"><i class="fas fa-camera text-xl"></i><span class="text-[10px] mt-1">kosong</span></div>{% endif %}
          <span class="absolute top-1.5 left-1.5 badge {% if sudut == 'depan' %}badge-amber{% else %}badge-gray{% endif %}">{{ label|cut:"Tampak " }}</span>
          {% if request.user.is_staff %}
          <div class="absolute inset-x-0 bottom-0 bg-black/70 p-1.5 flex justify-center gap-1 opacity-0 group-hover:opacity-100 transition">
            <form method="post" action="{% url 'foto_upload' obj.pk %}" enctype="multipart/form-data">{% csrf_token %}<input type="hidden" name="sudut" value="{{ sudut }}">
              <label class="btn btn-accent btn-xs cursor-pointer"><i class="fas fa-upload"></i> {% if f %}Ganti{% else %}Upload{% endif %}<input type="file" name="gambar" accept="image/*" class="hidden" onchange="this.form.submit()"></label></form>
            {% if f %}<form method="post" action="{% url 'foto_hapus' f.pk %}" onsubmit="return confirm('Hapus foto {{ label|lower }}?')">{% csrf_token %}<button class="btn btn-danger btn-xs"><i class="fas fa-trash"></i></button></form>{% endif %}
          </div>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

{% if request.user.is_staff %}
<div class="modal-bg" id="mVarian"><div class="modal">
  <div class="flex items-center justify-between mb-4"><h3 class="font-bold">Tambah Varian</h3><button onclick="closeModal('mVarian')" class="text-neutral-400 hover:text-neutral-700"><i class="fas fa-times"></i></button></div>
  <form method="post" action="{% url 'varian_tambah' obj.pk %}" class="space-y-3">
    {% csrf_token %}
    <div class="grid grid-cols-2 gap-3">
      <div><label class="form-label">Ukuran *</label><input name="ukuran" class="form-input" placeholder="42" required autofocus></div>
      <div><label class="form-label">Warna</label><input name="warna" class="form-input" placeholder="Putih (opsional)"></div>
    </div>
    <div class="grid grid-cols-2 gap-3">
      <div><label class="form-label">SKU</label><input name="sku" class="form-input" placeholder="NK-AF1-42"></div>
      <div><label class="form-label">Barcode</label><input name="barcode" class="form-input" placeholder="untuk scanner"></div>
    </div>
    <div class="grid grid-cols-2 gap-3">
      <div><label class="form-label">Harga khusus</label><input name="harga" class="form-input" inputmode="numeric" placeholder="kosong = {{ obj.harga|floatformat:0 }}"></div>
      <div><label class="form-label">HPP / modal per pasang</label><input name="hpp" class="form-input" inputmode="numeric" placeholder="0"></div>
    </div>
    <div class="grid grid-cols-2 gap-3">
      <div><label class="form-label">Stok awal</label><input name="stok_awal" class="form-input" inputmode="numeric" placeholder="0"><p class="form-help">Tercatat sebagai "Stok Awal" di kartu stok.</p></div>
      <div><label class="form-label">Stok minimum</label><input name="stok_minimum" class="form-input" inputmode="numeric" placeholder="ikut toko ({{ default_min }})"></div>
    </div>
    <button class="btn btn-accent w-full justify-center">Simpan Varian</button>
  </form>
</div></div>
{% endif %}
{% endblock %}