{% extends 'katalog/base_katalog.html' %}{% load rp_format %}
{% block title %}Pembayaran #{{ ps.kode_ref }} · {{ toko.nama }}{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto px-4 pt-8">
  <div class="text-center mb-8 hero-anim">
    <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>
    <h1 class="text-3xl font-black tracking-tight">Pesanan dibuat, tinggal bayar</h1>
    <p class="text-neutral-500 mt-2">Kode pesanan <b class="text-black font-mono">#{{ ps.kode_ref }}</b> · simpan kode ini untuk cek status</p>
    {% if ps.batas_bayar %}<p class="text-sm text-red-700 mt-2 font-semibold"><i class="fas fa-hourglass-half mr-1"></i>Bayar sebelum {{ ps.batas_bayar|date:"d M Y H:i" }}, setelah itu pesanan otomatis batal.</p>{% endif %}
  </div>

  <div class="grid md:grid-cols-2 gap-6">
    <div class="space-y-4 hero-anim" style="--d:.1s">
      <div class="rounded-2xl bg-neutral-950 text-white p-6">
        <p class="text-xs text-neutral-400 uppercase tracking-widest font-bold">Total yang dibayar</p>
        <p class="text-4xl font-black mt-1 text-red-500">{{ ps.total|rp }}</p>
        <div class="text-xs text-neutral-400 mt-3 space-y-0.5">
          <div class="flex justify-between"><span>Barang</span><span>{{ ps.subtotal|rp }}</span></div>
          {% if ps.dikirim_ke_alamat %}<div class="flex justify-between"><span>Ongkir (~{{ ps.jarak_km|floatformat:1 }} km)</span><span>{{ ps.ongkir|rp }}</span></div><div class="flex justify-between"><span>Packing</span><span>{{ ps.biaya_packing|rp }}</span></div>{% endif %}
        </div>
        <p class="text-xs text-neutral-400 mt-3">Bayar tepat sesuai nominal supaya mudah dicek.</p>
      </div>

      {% if ps.metode_bayar == 'qris' and qris_tersedia %}
      <div class="rounded-2xl border-2 border-black p-5 text-center">
        <p class="font-black text-lg"><i class="fas fa-qrcode mr-1"></i>Scan QRIS</p>
        <p class="text-xs text-neutral-500 mb-3">{{ toko.qris_nama|default:toko.nama }} · bisa dari semua bank & e-wallet</p>
        <img src="{{ toko.qris_gambar.url }}" class="w-full max-w-[260px] mx-auto rounded-xl border border-neutral-200" alt="QRIS {{ toko.nama }}">
        <a href="{{ toko.qris_gambar.url }}" download class="k-btn k-btn-outline mt-3" style="padding:8px 14px;font-size:13px"><i class="fas fa-download"></i> Simpan gambar QRIS</a>
      </div>
      <details class="rounded-2xl border border-neutral-100 p-5"><summary class="font-bold cursor-pointer">Atau transfer bank</summary>
        {% for r in rekening_list %}<div class="py-3 border-b border-neutral-100 last:border-0"><p class="font-black">{{ r.nama_bank }}</p><p class="font-mono text-lg">{{ r.nomor_rekening }}</p><p class="text-xs text-neutral-500">a.n. {{ r.nama_pemilik }}</p></div>{% empty %}<p class="text-sm text-neutral-500 mt-2">Rekening belum diatur.</p>{% endfor %}</details>
      {% else %}
      <div class="rounded-2xl border-2 border-black p-5">
        <p class="font-black text-lg mb-3"><i class="fas fa-building-columns mr-1"></i>Transfer ke salah satu rekening</p>
        {% for r in rekening_list %}
        <div class="flex items-center justify-between py-3 border-b border-neutral-100 last:border-0">
          <div><p class="font-black">{{ r.nama_bank }}</p><p class="font-mono text-lg">{{ r.nomor_rekening }}</p><p class="text-xs text-neutral-500">a.n. {{ r.nama_pemilik }}{% if r.keterangan %} · {{ r.keterangan }}{% endif %}</p></div>
          <button onclick="navigator.clipboard.writeText('{{ r.nomor_rekening }}');this.innerHTML='<i class=\'fas fa-check\'></i>'" class="chip"><i class="fas fa-copy"></i></button>
        </div>
        {% empty %}<p class="text-sm text-neutral-500">Rekening belum diatur. Hubungi kami lewat WhatsApp untuk info pembayaran.</p>{% endfor %}
      </div>
      {% if qris_tersedia %}
      <details class="rounded-2xl border border-neutral-100 p-5"><summary class="font-bold cursor-pointer"><i class="fas fa-qrcode mr-1"></i>Atau bayar lewat QRIS</summary>
        <img src="{{ toko.qris_gambar.url }}" class="w-full max-w-[240px] mx-auto rounded-xl border border-neutral-200 mt-3" alt="QRIS"><p class="text-xs text-neutral-500 text-center mt-2">{{ toko.qris_nama|default:toko.nama }}</p></details>
      {% endif %}
      {% endif %}

      <div class="rounded-2xl border border-neutral-100 p-5 text-sm">
        <p class="font-bold mb-2">Pesanan</p>
        {% for it in ps.items.all %}<div class="flex justify-between py-1.5 text-neutral-600"><span>{{ it.nama }} x{{ it.qty }}</span><span>{{ it.subtotal|rp }}</span></div>{% endfor %}
        <p class="text-xs text-neutral-400 mt-2">{{ ps.nama_pemesan }} · {{ ps.no_wa }}{% if ps.dikirim_ke_alamat %} · diantar ke: {{ ps.alamat }}{% else %} · ambil di toko{% endif %}</p>
      </div>
    </div>
    <div class="hero-anim" style="--d:.2s">
      <form method="post" action="{% url 'katalog:upload_bukti' ps.token %}" enctype="multipart/form-data" class="rounded-2xl bg-red-50 border border-red-200 p-6 sticky top-24">
        {% csrf_token %}
        <p class="font-black text-lg">Sudah bayar?</p>
        <p class="text-sm text-neutral-600 mt-1 mb-4">Upload foto / screenshot bukti {% if ps.metode_bayar == 'qris' %}pembayaran QRIS{% else %}transfer{% endif %}. Kami cek dan konfirmasi lewat WhatsApp.</p>
        <label class="block border-2 border-dashed border-red-300 rounded-2xl p-6 text-center cursor-pointer hover:bg-red-100/50 transition" id="drop">
          <input type="file" name="bukti_foto" accept="image/*" class="hidden" id="file" required onchange="preview(this)">
          <div id="dropText"><i class="fas fa-cloud-arrow-up text-3xl text-red-500 mb-2 block"></i><p class="text-sm font-semibold">Klik untuk pilih foto</p><p class="text-xs text-neutral-500">JPG / PNG</p></div>
          <img id="prev" class="hidden max-h-56 mx-auto rounded-xl">
        </label>
        <button class="k-btn k-btn-dark w-full mt-4 py-4"><i class="fas fa-paper-plane"></i> Kirim Bukti Pembayaran</button>
        {% if toko.wa_link %}<a href="{{ toko.wa_link }}?text={{ 'Halo, saya sudah bayar untuk pesanan #'|add:ps.kode_ref|urlencode }}" target="_blank" class="k-btn k-btn-wa w-full mt-2"><i class="fab fa-whatsapp"></i> Atau kirim via WhatsApp</a>{% endif %}
      </form>
    </div>
  </div>
</div>
{% endblock %}
{% block extra_js %}
<script>function preview(i){const f=i.files[0];if(!f)return;const r=new FileReader();r.onload=e=>{const p=document.getElementById('prev');p.src=e.target.result;p.classList.remove('hidden');document.getElementById('dropText').classList.add('hidden');};r.readAsDataURL(f);}</script>
{% endblock %}