{% extends 'katalog/base_katalog.html' %}{% load rp_format static %}
{% block title %}Keranjang · {{ toko.nama }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 pt-8">
  <h1 class="text-4xl font-black tracking-tight mb-6">Keranjang</h1>
  {% if rows %}
  <div class="grid md:grid-cols-3 gap-6">
    <div class="md:col-span-2 space-y-3">
      {% for r in rows %}
      <div class="flex gap-4 p-4 rounded-2xl border border-neutral-100">
        <a href="{% url 'katalog:produk_detail' r.v.produk.slug %}"><img src="{% if r.foto %}{{ r.foto.gambar.url }}{% else %}{% static 'img/placeholder.svg' %}{% endif %}" class="w-24 h-24 rounded-xl object-cover bg-neutral-100"></a>
        <div class="flex-1 min-w-0">
          <p class="text-[11px] font-bold uppercase tracking-wider text-red-600">{{ r.v.produk.merek.nama }}</p>
          <p class="font-bold leading-snug">{{ r.v.produk.nama }}</p>
          <p class="text-sm text-neutral-500">Ukuran {{ r.v.label }}</p>
          <div class="flex items-center justify-between mt-2">
            <form method="post" action="{% url 'katalog:keranjang_update' %}" class="flex items-center gap-1">{% csrf_token %}<input type="hidden" name="varian_id" value="{{ r.v.id }}">
              <button name="qty" value="{{ r.qty|add:'-1' }}" class="w-8 h-8 rounded-lg border border-neutral-200 font-bold hover:bg-neutral-100">-</button>
              <span class="w-8 text-center font-bold">{{ r.qty }}</span>
              <button name="qty" value="{{ r.qty|add:'1' }}" class="w-8 h-8 rounded-lg border border-neutral-200 font-bold hover:bg-neutral-100" {% if r.qty >= r.tersedia %}disabled style="opacity:.3"{% endif %}>+</button>
              <span class="text-[11px] text-neutral-400 ml-2">maks {{ r.tersedia }}</span>
            </form>
            <p class="font-black">{{ r.subtotal|rp }}</p>
          </div>
        </div>
        <form method="post" action="{% url 'katalog:keranjang_hapus' r.v.id %}">{% csrf_token %}<button class="text-neutral-300 hover:text-red-600" title="Hapus"><i class="fas fa-trash"></i></button></form>
      </div>
      {% endfor %}
      <a href="{% url 'katalog:katalog' %}" class="inline-block text-sm font-bold hover:underline mt-2"><i class="fas fa-arrow-left mr-1"></i>Lanjut belanja</a>
    </div>
    <div>
      <div class="rounded-2xl bg-neutral-50 p-5 sticky top-24">
        <p class="font-bold mb-3">Ringkasan</p>
        <div class="flex justify-between text-sm text-neutral-600"><span>{{ jml_keranjang }} pasang</span><span>{{ total|rp }}</span></div>
        <div class="flex justify-between font-black text-xl mt-3 pt-3 border-t border-neutral-200"><span>Total</span><span>{{ total|rp }}</span></div>
        <p class="text-xs text-neutral-500 mt-2">{% if toko.bisa_kirim %}Ongkir dihitung di langkah berikutnya kalau mau diantar. Ambil di toko gratis.{% else %}Barang diambil di toko setelah pembayaran dikonfirmasi.{% endif %}</p>
        {% if toko.katalog_aktif %}<a href="{% url 'katalog:checkout' %}" class="k-btn k-btn-red w-full mt-5 py-4">Lanjut ke Pembayaran <i class="fas fa-arrow-right"></i></a>
        {% else %}<div class="alert alert-warning mt-5 mb-0 text-xs"><i class="fas fa-circle-info mt-0.5"></i><span>Pemesanan online sedang ditutup. Hubungi kami lewat WhatsApp.</span></div>{% endif %}
      </div>
    </div>
  </div>
  {% else %}
  <div class="text-center py-24 text-neutral-400"><i class="fas fa-bag-shopping text-5xl mb-4 block opacity-30"></i><p class="font-bold text-black">Keranjang masih kosong</p><p class="text-sm mt-1">Yuk, cari sepatu impianmu dulu.</p><a href="{% url 'katalog:katalog' %}" class="k-btn k-btn-dark mt-6">Lihat Katalog</a></div>
  {% endif %}
</div>
{% endblock %}