{% extends 'base.html' %}{% load rp_format static %}
{% block title %}{% if obj %}Edit{% else %}Tambah{% endif %} Produk{% endblock %}
{% block content %}
<div class="mb-4"><a href="{% if obj %}{% url 'produk_detail' obj.pk %}{% else %}{% url 'produk_list' %}{% endif %}" class="text-xs text-neutral-500 hover:text-red-600"><i class="fas fa-arrow-left mr-1"></i>Kembali</a>
<h1 class="page-title mt-1">{% if obj %}Edit Produk{% else %}Tambah Produk{% endif %}</h1>
<p class="page-sub">Setelah produk tersimpan, tambahkan varian ukuran & warna di halaman detail.</p></div>

<form method="post" enctype="multipart/form-data" class="grid lg:grid-cols-3 gap-4">
  {% csrf_token %}
  <div class="card p-5 lg:col-span-2 space-y-4">
    <div class="grid md:grid-cols-3 gap-4">
      <div><label class="form-label">Merek *</label>
        <select name="merek" class="form-input" required><option value="">Pilih merek</option>{% for m in merek_list %}<option value="{{ m.id }}" {% if obj.merek_id == m.id or request.GET.merek == m.id|stringformat:"s" %}selected{% endif %}>{{ m.nama }}</option>{% endfor %}</select>
        <p class="form-help">Belum ada? <a href="{% url 'merek_list' %}" class="text-red-600">Tambah merek</a></p></div>
      <div><label class="form-label">Nama tipe / model *</label><input name="nama" value="{{ obj.nama|default:'' }}" class="form-input" placeholder="mis. Court Low, Samba OG" required><p class="form-help">Tanpa nama merek; di katalog tampil "Merek + Tipe".</p></div>
      <div><label class="form-label">Kategori</label>
        <select name="kategori" class="form-input"><option value="">Tanpa kategori</option>{% for k in kategori_list %}<option value="{{ k.id }}" {% if obj.kategori_id == k.id %}selected{% endif %}>{{ k.nama }}</option>{% endfor %}</select>
        <p class="form-help">Belum ada? <a href="{% url 'kategori_list' %}" class="text-red-600">Tambah kategori</a></p></div>
    </div>
    <div class="grid md:grid-cols-2 gap-4">
      <div><label class="form-label">Harga jual *</label><input name="harga" value="{{ obj.harga|default:''|floatformat:0 }}" class="form-input" inputmode="numeric" placeholder="1549000" required><p class="form-help">Harga default; tiap varian bisa punya harga sendiri.</p></div>
      <div><label class="form-label">Harga coret (opsional)</label><input name="harga_coret" value="{% if obj.harga_coret %}{{ obj.harga_coret|floatformat:0 }}{% endif %}" class="form-input" inputmode="numeric" placeholder="1729000"><p class="form-help">Untuk tampilan diskon di katalog. Kosongkan kalau tidak ada.</p></div>
    </div>
    <div><label class="form-label">Deskripsi</label><textarea name="deskripsi" rows="4" class="form-input" placeholder="Kondisi, kelengkapan, material, dll.">{{ obj.deskripsi|default:'' }}</textarea></div>
    <div><label class="form-label">Link katalog (slug)</label><div class="flex items-center gap-2"><span class="text-xs text-neutral-400">/p/</span><input name="slug" value="{{ obj.slug|default:'' }}" class="form-input" placeholder="otomatis dari nama"></div></div>

    <div>
      <label class="form-label">Foto produk (4 sudut)</label>
      <p class="form-help mb-3 -mt-1">Foto tampak depan jadi foto utama di katalog. Pembeli bisa melihat keempat sudut di halaman produk.</p>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        {% for sudut, label, f in slot_foto %}
        <label class="block cursor-pointer group">
          <div class="aspect-square rounded-xl overflow-hidden border-2 border-dashed border-neutral-300 group-hover:border-red-500 bg-neutral-50 relative transition">
            <img id="prev_{{ sudut }}" src="{% if f %}{{ f.gambar.url }}{% endif %}" class="w-full h-full object-cover {% if not f %}hidden{% endif %}">
            <div id="ph_{{ sudut }}" class="absolute inset-0 flex flex-col items-center justify-center text-neutral-400 {% if f %}hidden{% endif %}"><i class="fas fa-camera text-2xl mb-1"></i><span class="text-[11px]">Klik untuk pilih</span></div>
            {% if f %}<span class="absolute bottom-1 right-1 badge badge-green">ada</span>{% endif %}
          </div>
          <p class="text-xs font-bold text-center mt-1.5">{{ label }}</p>
          <input type="file" name="foto_{{ sudut }}" accept="image/*" class="hidden" onchange="pratinjau(this,'{{ sudut }}')">
        </label>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="space-y-4">
    <div class="card p-5 space-y-3">
      <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="tampil_katalog" {% if not obj or obj.tampil_katalog %}checked{% endif %} class="w-4 h-4 accent-red-600"> Tampilkan di katalog online</label>
      <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="unggulan" {% if obj.unggulan %}checked{% endif %} class="w-4 h-4 accent-red-600"> Produk unggulan (landing page)</label>
      {% if obj %}<label class="flex items-center gap-2 text-sm"><input type="checkbox" name="aktif" {% if obj.aktif %}checked{% endif %} class="w-4 h-4 accent-red-600"> Aktif</label>{% endif %}
    </div>
    <button class="btn btn-accent w-full justify-center py-3"><i class="fas fa-save"></i> Simpan Produk</button>
    <p class="text-[11px] text-neutral-400 text-center">Foto yang tidak dipilih tidak diubah.</p>
  </div>
</form>
{% endblock %}
{% block extra_js %}
<script>
function pratinjau(inp,sudut){const f=inp.files[0];if(!f)return;const r=new FileReader();r.onload=e=>{const img=document.getElementById('prev_'+sudut);img.src=e.target.result;img.classList.remove('hidden');document.getElementById('ph_'+sudut).classList.add('hidden');};r.readAsDataURL(f);}
</script>
{% endblock %}