{% extends 'katalog/base_katalog.html' %}{% load rp_format static %}
{% block title %}{{ p.nama_lengkap }} · {{ toko.nama }}{% endblock %}
{% block meta_desc %}{{ p.deskripsi|default:p.nama_lengkap|truncatechars:150 }}{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto px-4 pt-6">
  <nav class="text-xs text-neutral-500 flex gap-2"><a href="{% url 'katalog:landing' %}" class="hover:text-red-600">Beranda</a><span>/</span><a href="{% url 'katalog:katalog' %}" class="hover:text-red-600">Katalog</a><span>/</span><a href="{% url 'katalog:katalog' %}?merek={{ p.merek.slug }}" class="hover:text-red-600">{{ p.merek.nama }}</a>{% if p.kategori %}<span>/</span><a href="{% url 'katalog:katalog' %}?kategori={{ p.kategori.slug }}" class="hover:text-red-600">{{ p.kategori.nama }}</a>{% endif %}</nav>

  <div class="grid md:grid-cols-2 gap-8 lg:gap-14 mt-6">
    <!-- Galeri 4 sudut -->
    <div class="hero-anim" style="--d:.05s">
      <div class="rounded-3xl overflow-hidden bg-neutral-100 aspect-square relative group">
        <img id="fotoUtama" src="{% if foto_utama %}{{ foto_utama.gambar.url }}{% else %}{% static 'img/placeholder.svg' %}{% endif %}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="{{ p.nama_lengkap }}">
        {% if p.tersedia <= 0 %}<span class="badge-habis" style="font-size:13px;padding:6px 14px">HABIS</span>{% elif p.diskon_persen %}<span class="badge-disc" style="font-size:13px;padding:6px 12px">-{{ p.diskon_persen }}%</span>{% endif %}
        <span id="fotoLabel" class="absolute bottom-3 left-3 bg-black/70 text-white text-[11px] font-bold px-3 py-1.5 rounded-full backdrop-blur">{% if foto_utama %}{{ foto_utama.label }}{% else %}Belum ada foto{% endif %}</span>
      </div>
      <div class="grid grid-cols-4 gap-2 mt-3">
        {% for sudut, label, f in slot_foto %}
        <button type="button" {% if f %}onclick="gantiFoto(this,'{{ f.gambar.url }}','{{ label }}')"{% else %}disabled{% endif %}
          class="thumb rounded-xl overflow-hidden bg-neutral-100 border-2 transition-all duration-200 {% if f and f == foto_utama %}border-red-600{% else %}border-transparent{% endif %} {% if f %}hover:border-red-600 hover:-translate-y-0.5{% else %}opacity-40 cursor-default{% endif %}">
          <div class="aspect-square">{% if f %}<img src="{{ f.gambar.url }}" class="w-full h-full object-cover" alt="{{ label }}">{% else %}<div class="w-full h-full flex items-center justify-center text-neutral-300"><i class="fas fa-image"></i></div>{% endif %}</div>
          <p class="text-[10px] font-bold uppercase tracking-wide py-1.5 {% if f %}text-neutral-700{% else %}text-neutral-400{% endif %}">{{ label|cut:"Tampak " }}</p>
        </button>
        {% endfor %}
      </div>
    </div>

    <!-- Info -->
    <div class="hero-anim" style="--d:.2s">
      <p class="text-xs font-bold uppercase tracking-widest text-red-600 flex items-center gap-2">{% if p.merek.logo %}<img src="{{ p.merek.logo.url }}" class="h-5 object-contain">{% endif %}{{ p.merek.nama }}{% if p.kategori %} <span class="text-neutral-400">· {{ p.kategori.nama }}</span>{% endif %}</p>
      <h1 class="text-3xl md:text-4xl font-black tracking-tight mt-1 leading-tight">{{ p.nama }}</h1>
      <div class="flex items-end gap-3 mt-4">
        <p class="text-3xl font-black" id="hargaTampil">{{ p.harga|rp }}</p>
        {% if p.harga_coret and p.harga_coret > p.harga %}<p class="text-neutral-400 line-through mb-1">{{ p.harga_coret|rp }}</p><span class="mb-1.5 text-[11px] font-black text-white bg-red-600 px-2 py-0.5 rounded-full">Hemat {{ p.harga_coret|kurang:p.harga|rp }}</span>{% endif %}
      </div>

      <form method="post" action="{% url 'katalog:keranjang_tambah' %}" class="mt-8" id="fBeli">
        {% csrf_token %}
        <input type="hidden" name="varian_id" id="varian_id">
        <input type="hidden" name="qty" value="1">
        {% if warna_list|length > 1 %}
        <p class="text-sm font-bold mb-2">Warna</p>
        <div class="flex flex-wrap gap-2 mb-5" id="warnaList">{% for w in warna_list %}<button type="button" class="chip warna {% if forloop.first %}on{% endif %}" data-warna="{{ w }}" onclick="pilihWarna(this)">{{ w }}</button>{% endfor %}</div>
        {% endif %}
        <div class="flex items-center justify-between mb-2"><p class="text-sm font-bold">Pilih ukuran</p><p class="text-xs text-neutral-500" id="stokInfo">&nbsp;</p></div>
        <div class="grid grid-cols-4 sm:grid-cols-5 gap-2" id="ukuranList">
          {% for v in varian_list %}
          <button type="button" class="sz {% if v.tersedia <= 0 %}habis{% endif %}" data-id="{{ v.id }}" data-warna="{{ v.warna }}" data-harga="{{ v.harga_jual|floatformat:0 }}" data-tersedia="{{ v.tersedia }}" data-label="{{ v.label }}" {% if v.tersedia <= 0 %}disabled{% endif %} onclick="pilihUkuran(this)">
            <span class="font-bold text-base">{{ v.ukuran }}</span>{% if v.warna and warna_list|length <= 1 %}<span class="block text-[10px] opacity-60">{{ v.warna }}</span>{% endif %}
          </button>
          {% empty %}<p class="col-span-full text-sm text-neutral-400">Belum ada varian.</p>{% endfor %}
        </div>

        <div class="mt-7 flex flex-col sm:flex-row gap-3">
          {% if toko.katalog_aktif %}
            <button class="k-btn k-btn-red flex-1 py-4 shine" id="btnBeli" disabled style="opacity:.5"><i class="fas fa-bag-shopping"></i> <span id="btnText">Pilih ukuran dulu</span></button>
          {% else %}
            <div class="alert alert-warning flex-1 mb-0"><i class="fas fa-circle-info mt-0.5"></i><span>Pemesanan online sedang ditutup. Silakan pesan lewat WhatsApp.</span></div>
          {% endif %}
          {% if toko.wa_link %}<a href="{{ toko.wa_link }}?text={{ 'Halo, saya mau tanya '|add:p.nama_lengkap|urlencode }}" target="_blank" class="k-btn k-btn-wa py-4"><i class="fab fa-whatsapp"></i> Tanya</a>{% endif %}
        </div>
        <p class="text-xs text-neutral-500 mt-3"><i class="fas fa-shield-halved mr-1 text-red-600"></i>Stok yang tampil adalah stok nyata. Barang ditahan {{ toko.batas_bayar_jam }} jam setelah pesan sampai kamu transfer.</p>
      </form>

      {% if p.deskripsi %}<div class="mt-10 border-t border-neutral-100 pt-6"><p class="font-bold mb-2">Deskripsi</p><p class="text-sm text-neutral-600 whitespace-pre-line leading-relaxed">{{ p.deskripsi }}</p></div>{% endif %}
    </div>
  </div>

  {% if terkait %}
  <section class="mt-20">
    <h2 class="text-2xl font-black tracking-tight mb-5 reveal">Mungkin kamu suka</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">{% for p in terkait %}{% include 'katalog/_card.html' %}{% endfor %}</div>
  </section>
  {% endif %}
</div>
{% endblock %}
{% block extra_js %}
<script>
function gantiFoto(btn,src,label){
  const img=document.getElementById('fotoUtama'); if(img.src.endsWith(src))return;
  img.classList.remove('fade-swap'); void img.offsetWidth; img.src=src; img.classList.add('fade-swap');
  document.getElementById('fotoLabel').textContent=label;
  document.querySelectorAll('.thumb').forEach(b=>b.classList.replace('border-red-600','border-transparent')); btn.classList.replace('border-transparent','border-red-600');
}
let warnaAktif=document.querySelector('.warna.on')?.dataset.warna??null;
function filterUkuran(){document.querySelectorAll('#ukuranList .sz').forEach(b=>{b.style.display=(warnaAktif===null||b.dataset.warna===warnaAktif)?'':'none';b.classList.remove('on');});document.getElementById('varian_id').value='';setBtn(null);}
function pilihWarna(el){document.querySelectorAll('.warna').forEach(b=>b.classList.remove('on'));el.classList.add('on');warnaAktif=el.dataset.warna;filterUkuran();}
function pilihUkuran(el){document.querySelectorAll('#ukuranList .sz').forEach(b=>b.classList.remove('on'));el.classList.add('on');document.getElementById('varian_id').value=el.dataset.id;setBtn(el);}
function setBtn(el){const b=document.getElementById('btnBeli'),t=document.getElementById('btnText'),s=document.getElementById('stokInfo');
  if(!b)return; if(!el){b.disabled=true;b.style.opacity=.5;t.textContent='Pilih ukuran dulu';s.innerHTML='&nbsp;';return;}
  b.disabled=false;b.style.opacity=1;t.textContent='Masukkan Keranjang';s.textContent='Tersedia '+el.dataset.tersedia+' pasang';
  document.getElementById('hargaTampil').textContent='Rp '+Number(el.dataset.harga).toLocaleString('id-ID');}
if(warnaAktif!==null)filterUkuran();
</script>
{% endblock %}