{% extends 'katalog/base_katalog.html' %}{% load rp_format %}
{% block title %}Checkout · {{ toko.nama }}{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<style>#peta{height:280px;border-radius:16px;z-index:0}
.opsi{border:1.5px solid #e5e5e5;border-radius:16px;padding:14px 16px;cursor:pointer;transition:all .18s;display:flex;gap:12px;align-items:flex-start}
.opsi:hover{border-color:#0a0a0a}.opsi.on{border-color:#0a0a0a;background:#fafafa;box-shadow:0 0 0 2px #0a0a0a inset}
.opsi input{margin-top:3px;accent-color:#e10600}</style>
{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 pt-8">
  <a href="{% url 'katalog:keranjang' %}" class="text-sm text-neutral-500 hover:text-black"><i class="fas fa-arrow-left mr-1"></i>Keranjang</a>
  <h1 class="text-4xl font-black tracking-tight mt-2 mb-6 hero-anim">Checkout<span class="text-red-600">.</span></h1>
  <form method="post" class="grid md:grid-cols-5 gap-6" id="fCheckout">
    {% csrf_token %}
    <div class="md:col-span-3 space-y-6">
      <!-- 1. Data -->
      <section class="hero-anim" style="--d:.05s">
        <h2 class="font-black text-lg mb-3"><span class="inline-flex w-7 h-7 rounded-full bg-black text-white text-sm items-center justify-center mr-2">1</span>Data pemesan</h2>
        <div class="space-y-3">
          <div><label class="text-sm font-bold block mb-1.5">Nama lengkap *</label><input name="nama" value="{{ form.nama }}" class="k-input" placeholder="Nama kamu" required></div>
          <div><label class="text-sm font-bold block mb-1.5">Nomor WhatsApp *</label><input name="no_wa" value="{{ form.no_wa }}" class="k-input" placeholder="08xxxxxxxxxx" inputmode="tel" required></div>
        </div>
      </section>

      <!-- 2. Pengiriman -->
      <section class="hero-anim" style="--d:.15s">
        <h2 class="font-black text-lg mb-3"><span class="inline-flex w-7 h-7 rounded-full bg-black text-white text-sm items-center justify-center mr-2">2</span>Pengiriman</h2>
        <div class="grid sm:grid-cols-2 gap-3">
          <label class="opsi {% if form.pengiriman == 'ambil' or not bisa_kirim %}on{% endif %}"><input type="radio" name="pengiriman" value="ambil" {% if form.pengiriman == 'ambil' or not bisa_kirim %}checked{% endif %} onchange="pilihKirim()"><div><p class="font-bold">Ambil di toko</p><p class="text-xs text-neutral-500 mt-0.5">Gratis. {{ toko.alamat|default:"Alamat toko ada di bawah." }}</p></div></label>
          {% if bisa_kirim %}
          <label class="opsi {% if form.pengiriman == 'kirim' %}on{% endif %}"><input type="radio" name="pengiriman" value="kirim" {% if form.pengiriman == 'kirim' %}checked{% endif %} onchange="pilihKirim()"><div><p class="font-bold">Diantar ke alamat</p><p class="text-xs text-neutral-500 mt-0.5">Ongkir sesuai jarak + packing {{ toko.biaya_packing|rp }}. Maks {{ toko.radius_maks_km|floatformat:0 }} km dari toko.</p></div></label>
          {% else %}
          <div class="opsi opacity-50 cursor-default"><div><p class="font-bold">Diantar ke alamat</p><p class="text-xs text-neutral-500 mt-0.5">Sedang tidak tersedia.</p></div></div>
          {% endif %}
        </div>
        <div id="boxKirim" class="mt-4 space-y-3 {% if form.pengiriman != 'kirim' %}hidden{% endif %}">
          <div><label class="text-sm font-bold block mb-1.5">Alamat lengkap *</label><textarea name="alamat" rows="2" class="k-input" placeholder="Nama jalan, nomor, RT/RW, patokan">{{ form.alamat }}</textarea></div>
          <div>
            <div class="flex items-center justify-between mb-1.5"><label class="text-sm font-bold">Tandai titik lokasi di peta *</label><button type="button" onclick="lokasiSaya()" class="chip"><i class="fas fa-crosshairs mr-1"></i>Gunakan lokasi saya</button></div>
            <div class="flex gap-2 mb-2"><input id="cariAlamat" class="k-input" placeholder="Cari alamat / nama tempat..." onkeydown="if(event.key==='Enter'){event.preventDefault();cariLokasi();}"><button type="button" onclick="cariLokasi()" class="k-btn k-btn-dark" style="padding:10px 16px"><i class="fas fa-search"></i></button></div>
            <div id="hasilCari" class="hidden mb-2 border border-neutral-200 rounded-xl overflow-hidden"></div>
            <div id="peta"></div>
            <input type="hidden" name="lat" id="lat" value="{{ form.lat }}"><input type="hidden" name="lng" id="lng" value="{{ form.lng }}">
            <p class="text-xs text-neutral-500 mt-2">Klik atau geser pin ke lokasi pengantaran. Ongkir terhitung otomatis.</p>
          </div>
          <div id="infoOngkir" class="rounded-2xl bg-neutral-50 p-4 text-sm hidden"></div>
        </div>
      </section>

      <!-- 3. Pembayaran -->
      <section class="hero-anim" style="--d:.25s">
        <h2 class="font-black text-lg mb-3"><span class="inline-flex w-7 h-7 rounded-full bg-black text-white text-sm items-center justify-center mr-2">3</span>Pembayaran</h2>
        <div class="grid sm:grid-cols-2 gap-3">
          <label class="opsi {% if form.metode_bayar != 'qris' %}on{% endif %}"><input type="radio" name="metode_bayar" value="transfer" {% if form.metode_bayar != 'qris' %}checked{% endif %} onchange="pilihOpsi(this)"><div><p class="font-bold"><i class="fas fa-building-columns mr-1 text-neutral-400"></i>Transfer bank</p><p class="text-xs text-neutral-500 mt-0.5">Nomor rekening tampil setelah pesanan dibuat.</p></div></label>
          {% if qris_tersedia %}
          <label class="opsi {% if form.metode_bayar == 'qris' %}on{% endif %}"><input type="radio" name="metode_bayar" value="qris" {% if form.metode_bayar == 'qris' %}checked{% endif %} onchange="pilihOpsi(this)"><div><p class="font-bold"><i class="fas fa-qrcode mr-1 text-neutral-400"></i>QRIS</p><p class="text-xs text-neutral-500 mt-0.5">Scan dari aplikasi bank / e-wallet apa pun.</p></div></label>
          {% endif %}
        </div>
        <div class="mt-4"><label class="text-sm font-bold block mb-1.5">Catatan (opsional)</label><textarea name="catatan" rows="2" class="k-input" placeholder="mis. Mau diambil hari Sabtu">{{ form.catatan }}</textarea></div>
      </section>
    </div>

    <div class="md:col-span-2">
      <div class="rounded-2xl bg-neutral-50 p-5 sticky top-24 hero-anim" style="--d:.2s">
        <p class="font-bold mb-3">Ringkasan</p>
        {% for r in rows %}<div class="flex justify-between text-sm py-2 border-b border-neutral-200/60"><span class="pr-2">{{ r.v.produk.nama_lengkap }}<br><span class="text-neutral-500">Uk. {{ r.v.label }} x {{ r.qty }}</span></span><span class="font-semibold whitespace-nowrap">{{ r.subtotal|rp }}</span></div>{% endfor %}
        <div class="text-sm space-y-1.5 mt-3">
          <div class="flex justify-between text-neutral-600"><span>Subtotal</span><span id="rSub" data-v="{{ total|floatformat:0 }}">{{ total|rp }}</span></div>
          <div class="flex justify-between text-neutral-600"><span>Ongkir</span><span id="rOngkir">Rp 0</span></div>
          <div class="flex justify-between text-neutral-600"><span>Biaya packing</span><span id="rPacking">Rp 0</span></div>
        </div>
        <div class="flex justify-between font-black text-xl mt-3 pt-3 border-t border-neutral-200"><span>Total</span><span id="rTotal">{{ total|rp }}</span></div>
        <div class="alert alert-info text-xs mt-4 mb-0"><i class="fas fa-circle-info mt-0.5"></i><span>Setelah klik "Buat Pesanan", kamu punya waktu <b>{{ toko.batas_bayar_jam }} jam</b> untuk bayar dan upload bukti. Barang kami tahan selama itu.</span></div>
        <button class="k-btn k-btn-red w-full py-4 text-base mt-4 shine" id="btnPesan">Buat Pesanan <i class="fas fa-arrow-right"></i></button>
      </div>
    </div>
  </form>
</div>
{% endblock %}
{% block extra_js %}
<script>
const rp=n=>'Rp '+Math.round(Number(n)||0).toLocaleString('id-ID');
const sub=Number(document.getElementById('rSub').dataset.v)||0;
let ongkir=0,packing=0,ongkirOk=false;
function render(){document.getElementById('rOngkir').textContent=rp(ongkir);document.getElementById('rPacking').textContent=rp(packing);document.getElementById('rTotal').textContent=rp(sub+ongkir+packing);}
function pilihOpsi(inp){inp.closest('.grid').querySelectorAll('.opsi').forEach(o=>o.classList.remove('on'));inp.closest('.opsi').classList.add('on');}
function kirimDipilih(){return document.querySelector('input[name=pengiriman]:checked')?.value==='kirim';}
function pilihKirim(){const r=document.querySelector('input[name=pengiriman]:checked');if(r)pilihOpsi(r);const k=kirimDipilih();document.getElementById('boxKirim').classList.toggle('hidden',!k);if(!k){ongkir=0;packing=0;}else{setTimeout(()=>peta.invalidateSize(),50);if(latI.value)hitung();}render();}
{% if bisa_kirim %}
const latI=document.getElementById('lat'),lngI=document.getElementById('lng');
const pusat=[{{ toko.lat }},{{ toko.lng }}];
const peta=L.map('peta').setView(latI.value?[Number(latI.value),Number(lngI.value)]:pusat,latI.value?15:12);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19,attribution:'&copy; OpenStreetMap'}).addTo(peta);
L.circleMarker(pusat,{radius:8,color:'#e10600',fillColor:'#e10600',fillOpacity:.9}).addTo(peta).bindPopup('{{ toko.nama|escapejs }}');
let marker=latI.value?L.marker([Number(latI.value),Number(lngI.value)],{draggable:true}).addTo(peta):null;
function taruh(ll){latI.value=ll.lat.toFixed(7);lngI.value=ll.lng.toFixed(7);if(!marker){marker=L.marker(ll,{draggable:true}).addTo(peta);marker.on('dragend',e=>taruh(e.target.getLatLng()));}else marker.setLatLng(ll);hitung();}
if(marker)marker.on('dragend',e=>taruh(e.target.getLatLng()));
peta.on('click',e=>taruh(e.latlng));
function hitung(){const box=document.getElementById('infoOngkir');box.classList.remove('hidden');box.innerHTML='<i class="fas fa-spinner fa-spin mr-1"></i>Menghitung ongkir...';
  fetch('{% url "katalog:api_ongkir" %}?lat='+latI.value+'&lng='+lngI.value).then(r=>r.json()).then(d=>{
    if(d.ok){ongkir=d.ongkir;packing=d.packing;ongkirOk=true;box.className='rounded-2xl bg-green-50 text-green-900 p-4 text-sm';box.innerHTML=`<p class="font-bold"><i class="fas fa-motorcycle mr-1"></i>Jarak sekitar ${d.jarak_km} km</p><p class="mt-1">Ongkir ${rp(d.ongkir)} + packing ${rp(d.packing)} = <b>${rp(d.total_kirim)}</b></p>`;}
    else{ongkir=0;packing=0;ongkirOk=false;box.className='rounded-2xl bg-red-50 text-red-800 p-4 text-sm';box.innerHTML='<i class="fas fa-triangle-exclamation mr-1"></i>'+d.pesan;}
    render();});}
function lokasiSaya(){if(!navigator.geolocation){alert('Browser tidak mendukung lokasi');return;}navigator.geolocation.getCurrentPosition(p=>{const ll=L.latLng(p.coords.latitude,p.coords.longitude);taruh(ll);peta.setView(ll,16);},()=>alert('Tidak bisa mengambil lokasi. Izinkan akses lokasi, atau klik langsung di peta.'));}
function cariLokasi(){const q=document.getElementById('cariAlamat').value.trim();if(!q)return;const h=document.getElementById('hasilCari');h.classList.remove('hidden');h.innerHTML='<p class="px-4 py-2 text-sm text-neutral-400">Mencari...</p>';
  fetch('https://nominatim.openstreetmap.org/search?format=json&limit=5&countrycodes=id&q='+encodeURIComponent(q)).then(r=>r.json()).then(d=>{
    h.innerHTML=d.length?d.map(x=>`<button type="button" class="w-full text-left px-4 py-2 text-sm hover:bg-neutral-100 border-b border-neutral-100" onclick="pilihHasil(${x.lat},${x.lon})">${x.display_name}</button>`).join(''):'<p class="px-4 py-2 text-sm text-neutral-400">Tidak ditemukan, coba kata kunci lain atau klik di peta.</p>';
  }).catch(()=>{h.innerHTML='<p class="px-4 py-2 text-sm text-neutral-400">Pencarian tidak tersedia, klik langsung di peta.</p>';});}
function pilihHasil(lat,lng){document.getElementById('hasilCari').classList.add('hidden');const ll=L.latLng(lat,lng);taruh(ll);peta.setView(ll,16);}
document.getElementById('fCheckout').addEventListener('submit',e=>{if(kirimDipilih()&&!ongkirOk){e.preventDefault();alert('Tandai titik lokasi pengantaran di peta dulu supaya ongkir bisa dihitung.');}});
{% else %}
function lokasiSaya(){}function cariLokasi(){}
{% endif %}
pilihKirim();
</script>
{% endblock %}