{% extends 'katalog/base_katalog.html' %}{% load rp_format static %}
{% block title %}Pesanan #{{ ps.kode_ref }} · {{ toko.nama }}{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto px-4 pt-8">
  <div class="text-center mb-8 hero-anim">
    {% if ps.status == 'menunggu_bayar' %}<div class="w-16 h-16 rounded-full bg-red-100 text-red-600 flex items-center justify-center mx-auto mb-3 text-2xl pop"><i class="fas fa-clock"></i></div>
    {% elif ps.status == 'menunggu_konfirmasi' %}<div class="w-16 h-16 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mx-auto mb-3 text-2xl pop"><i class="fas fa-magnifying-glass"></i></div>
    {% elif ps.status == 'dikirim' %}<div class="w-16 h-16 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mx-auto mb-3 text-2xl pop"><i class="fas fa-motorcycle"></i></div>
    {% elif ps.status == 'batal' %}<div class="w-16 h-16 rounded-full bg-neutral-200 text-neutral-600 flex items-center justify-center mx-auto mb-3 text-2xl pop"><i class="fas fa-xmark"></i></div>
    {% else %}<div class="w-16 h-16 rounded-full bg-green-100 text-green-600 flex items-center justify-center mx-auto mb-3 text-2xl pop"><i class="fas fa-check"></i></div>{% endif %}
    <p class="text-xs font-bold uppercase tracking-widest text-neutral-400">Pesanan #{{ ps.kode_ref }}</p>
    <h1 class="text-3xl font-black tracking-tight mt-1">{{ ps.get_status_display }}</h1>
    <p class="text-neutral-500 mt-2 text-sm">
      {% if ps.status == 'menunggu_bayar' %}Kami menunggu pembayaran kamu{% if ps.batas_bayar %} sampai <b>{{ ps.batas_bayar|date:"d M Y H:i" }}</b>{% endif %}.
      {% elif ps.status == 'menunggu_konfirmasi' %}Bukti pembayaran sudah kami terima dan sedang dicek. Biasanya kurang dari 1 jam di jam buka.
      {% elif ps.status == 'dikonfirmasi' %}Pembayaran diterima! {% if ps.dikirim_ke_alamat %}Barang sedang kami siapkan untuk dikirim ke alamatmu.{% else %}Barang sudah kami pisahkan dan siap diambil di toko.{% endif %}
      {% elif ps.status == 'dikirim' %}Barang sedang dalam perjalanan ke alamatmu.{% if ps.info_kirim %} {{ ps.info_kirim }}{% endif %}
      {% elif ps.status == 'selesai' %}Barang sudah diterima. Terima kasih sudah belanja di {{ toko.nama }}!
      {% else %}{{ ps.alasan_batal|default:"Pesanan dibatalkan." }}{% endif %}
    </p>
  </div>

  {% if ps.status != 'batal' %}
  {% with s=ps.status %}
  <div class="flex items-center justify-between text-[11px] font-semibold text-neutral-400 mb-8 px-2 hero-anim" style="--d:.1s">
    <div class="text-center flex-1 text-black"><div class="w-7 h-7 rounded-full mx-auto mb-1 flex items-center justify-center bg-black text-white"><i class="fas fa-check text-[10px]"></i></div>Dipesan</div>
    <div class="flex-1 h-0.5 {% if s != 'menunggu_bayar' %}bg-black{% else %}bg-neutral-200{% endif %}"></div>
    <div class="text-center flex-1 {% if s != 'menunggu_bayar' %}text-black{% endif %}"><div class="w-7 h-7 rounded-full mx-auto mb-1 flex items-center justify-center {% if s != 'menunggu_bayar' %}bg-black text-white{% else %}bg-neutral-200{% endif %}">{% if s != 'menunggu_bayar' %}<i class="fas fa-check text-[10px]"></i>{% else %}2{% endif %}</div>Dibayar</div>
    <div class="flex-1 h-0.5 {% if s == 'dikonfirmasi' or s == 'dikirim' or s == 'selesai' %}bg-black{% else %}bg-neutral-200{% endif %}"></div>
    <div class="text-center flex-1 {% if s == 'dikonfirmasi' or s == 'dikirim' or s == 'selesai' %}text-black{% endif %}"><div class="w-7 h-7 rounded-full mx-auto mb-1 flex items-center justify-center {% if s == 'dikonfirmasi' or s == 'dikirim' or s == 'selesai' %}bg-black text-white{% else %}bg-neutral-200{% endif %}">{% if s == 'dikonfirmasi' or s == 'dikirim' or s == 'selesai' %}<i class="fas fa-check text-[10px]"></i>{% else %}3{% endif %}</div>Dikonfirmasi</div>
    {% if ps.dikirim_ke_alamat %}
    <div class="flex-1 h-0.5 {% if s == 'dikirim' or s == 'selesai' %}bg-black{% else %}bg-neutral-200{% endif %}"></div>
    <div class="text-center flex-1 {% if s == 'dikirim' or s == 'selesai' %}text-black{% endif %}"><div class="w-7 h-7 rounded-full mx-auto mb-1 flex items-center justify-center {% if s == 'dikirim' or s == 'selesai' %}bg-black text-white{% else %}bg-neutral-200{% endif %}">{% if s == 'dikirim' or s == 'selesai' %}<i class="fas fa-check text-[10px]"></i>{% else %}4{% endif %}</div>Dikirim</div>
    {% endif %}
    <div class="flex-1 h-0.5 {% if s == 'selesai' %}bg-black{% else %}bg-neutral-200{% endif %}"></div>
    <div class="text-center flex-1 {% if s == 'selesai' %}text-black{% endif %}"><div class="w-7 h-7 rounded-full mx-auto mb-1 flex items-center justify-center {% if s == 'selesai' %}bg-black text-white{% else %}bg-neutral-200{% endif %}">{% if s == 'selesai' %}<i class="fas fa-check text-[10px]"></i>{% else %}{% if ps.dikirim_ke_alamat %}5{% else %}4{% endif %}{% endif %}</div>Selesai</div>
  </div>
  {% endwith %}
  {% endif %}

  <div class="rounded-2xl border border-neutral-100 p-5 hero-anim" style="--d:.15s">
    {% for it in ps.items.all %}
    <div class="flex gap-3 py-3 border-b border-neutral-100 last:border-0">
      {% with f=it.varian.produk.foto_utama %}<img src="{% if f %}{{ f.gambar.url }}{% else %}{% static 'img/placeholder.svg' %}{% endif %}" class="w-16 h-16 rounded-xl object-cover bg-neutral-100">{% endwith %}
      <div class="flex-1"><p class="font-bold text-sm">{{ it.nama }}</p><p class="text-xs text-neutral-500">{{ it.qty }} x {{ it.harga|rp }}</p></div>
      <p class="font-bold text-sm">{{ it.subtotal|rp }}</p>
    </div>
    {% endfor %}
    <div class="text-sm text-neutral-600 space-y-1 mt-3">
      <div class="flex justify-between"><span>Subtotal</span><span>{{ ps.subtotal|rp }}</span></div>
      {% if ps.dikirim_ke_alamat %}<div class="flex justify-between"><span>Ongkir{% if ps.jarak_km %} (~{{ ps.jarak_km|floatformat:1 }} km){% endif %}</span><span>{{ ps.ongkir|rp }}</span></div><div class="flex justify-between"><span>Packing</span><span>{{ ps.biaya_packing|rp }}</span></div>{% endif %}
    </div>
    <div class="flex justify-between font-black text-xl mt-2 pt-2 border-t border-neutral-100"><span>Total</span><span>{{ ps.total|rp }}</span></div>
    <div class="text-xs text-neutral-400 mt-3 space-y-0.5">
      <p>{{ ps.nama_pemesan }} · {{ ps.no_wa }} · dipesan {{ ps.dibuat|date:"d M Y H:i" }}</p>
      <p><i class="fas {% if ps.dikirim_ke_alamat %}fa-motorcycle{% else %}fa-store{% endif %} mr-1"></i>{% if ps.dikirim_ke_alamat %}Diantar ke: {{ ps.alamat }}{% else %}Ambil di toko{% if toko.alamat %}: {{ toko.alamat }}{% endif %}{% endif %}</p>
      <p><i class="fas {% if ps.metode_bayar == 'qris' %}fa-qrcode{% else %}fa-building-columns{% endif %} mr-1"></i>{{ ps.get_metode_bayar_display }}</p>
    </div>
  </div>

  <div class="flex flex-col sm:flex-row gap-3 mt-6 hero-anim" style="--d:.2s">
    {% if ps.status == 'menunggu_bayar' %}<a href="{% url 'katalog:bayar' ps.token %}" class="k-btn k-btn-red flex-1 py-4"><i class="fas fa-money-bill-transfer"></i> Bayar & Upload Bukti</a>{% endif %}
    {% if ps.transaksi %}<a href="{% url 'struk' ps.transaksi.token %}" class="k-btn k-btn-outline flex-1 py-4"><i class="fas fa-receipt"></i> Lihat Struk</a>{% endif %}
    {% if toko.wa_link %}<a href="{{ toko.wa_link }}?text={{ 'Halo, saya mau tanya pesanan #'|add:ps.kode_ref|urlencode }}" target="_blank" class="k-btn k-btn-wa flex-1 py-4"><i class="fab fa-whatsapp"></i> Hubungi Toko</a>{% endif %}
  </div>
  <p class="text-center text-xs text-neutral-400 mt-6">Simpan link halaman ini atau kode <b>#{{ ps.kode_ref }}</b> untuk cek status kapan saja.</p>
</div>
{% endblock %}