{% extends 'base.html' %}
{% block title %}Pengaturan Toko{% 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:320px;border-radius:12px;z-index:0}</style>
{% endblock %}
{% block content %}
<div class="mb-4"><h1 class="page-title">Pengaturan Toko</h1><p class="page-sub">Identitas toko, QRIS, titik lokasi untuk ongkir, dan aturan pesanan online.</p></div>
<form method="post" enctype="multipart/form-data" class="grid lg:grid-cols-3 gap-4">
  {% csrf_token %}
  <div class="lg:col-span-2 space-y-4">
    <div class="card p-5 space-y-4">
      <h3 class="font-bold text-sm">Identitas</h3>
      <div class="grid md:grid-cols-2 gap-4">
        <div><label class="form-label">Nama toko *</label><input name="nama" value="{{ t.nama }}" class="form-input" required></div>
        <div><label class="form-label">Tagline</label><input name="tagline" value="{{ t.tagline }}" class="form-input"></div>
      </div>
      <div><label class="form-label">Deskripsi singkat (landing page)</label><textarea name="deskripsi" rows="3" class="form-input">{{ t.deskripsi }}</textarea></div>
      <div><label class="form-label">Alamat</label><textarea name="alamat" rows="2" class="form-input">{{ t.alamat }}</textarea></div>
      <div class="grid md:grid-cols-3 gap-4">
        <div><label class="form-label">Telepon</label><input name="telepon" value="{{ t.telepon }}" class="form-input"></div>
        <div><label class="form-label">No. WhatsApp</label><input name="no_wa" value="{{ t.no_wa }}" class="form-input" placeholder="0812..."><p class="form-help">Tombol "Hubungi" di katalog.</p></div>
        <div><label class="form-label">Instagram</label><input name="instagram" value="{{ t.instagram }}" class="form-input" placeholder="tanpa @"></div>
      </div>
      <div><label class="form-label">Jam buka</label><input name="jam_buka" value="{{ t.jam_buka }}" class="form-input"></div>
    </div>

    <div class="card p-5 space-y-4">
      <div class="flex items-center justify-between"><h3 class="font-bold text-sm"><i class="fas fa-location-dot text-red-600 mr-1"></i>Titik Toko & Ongkir</h3>
        <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="ongkir_aktif" {% if t.ongkir_aktif %}checked{% endif %} class="w-4 h-4 accent-red-600"> Terima pengiriman</label></div>
      <p class="form-help -mt-2">Klik di peta untuk menandai lokasi toko, atau tekan "Pakai lokasi saya". Ongkir pembeli dihitung dari jarak ke titik ini.</p>
      <div id="peta"></div>
      <div class="grid md:grid-cols-3 gap-3">
        <div><label class="form-label">Latitude</label><input name="lat" id="lat" value="{{ t.lat|default_if_none:'' }}" class="form-input" placeholder="-6.2"></div>
        <div><label class="form-label">Longitude</label><input name="lng" id="lng" value="{{ t.lng|default_if_none:'' }}" class="form-input" placeholder="106.8"></div>
        <div class="flex items-end"><button type="button" onclick="lokasiSaya()" class="btn btn-secondary w-full justify-center"><i class="fas fa-crosshairs"></i> Pakai lokasi saya</button></div>
      </div>
      <div class="grid md:grid-cols-5 gap-3">
        <div><label class="form-label">Tarif dasar (Rp)</label><input name="ongkir_dasar" value="{{ t.ongkir_dasar|floatformat:0 }}" class="form-input" inputmode="numeric"></div>
        <div><label class="form-label">Untuk jarak s/d (km)</label><input name="km_dasar" value="{{ t.km_dasar|floatformat:1 }}" class="form-input" inputmode="decimal"></div>
        <div><label class="form-label">Tambahan per km (Rp)</label><input name="ongkir_per_km" value="{{ t.ongkir_per_km|floatformat:0 }}" class="form-input" inputmode="numeric"></div>
        <div><label class="form-label">Radius maks (km)</label><input name="radius_maks_km" value="{{ t.radius_maks_km|floatformat:1 }}" class="form-input" inputmode="decimal"></div>
        <div><label class="form-label">Biaya packing (Rp)</label><input name="biaya_packing" value="{{ t.biaya_packing|floatformat:0 }}" class="form-input" inputmode="numeric"><p class="form-help">Selalu ditambah di atas ongkir.</p></div>
      </div>
      <div class="bg-neutral-50 rounded-lg p-3 text-xs text-neutral-600" id="contoh">Contoh: jarak 5 km = tarif dasar + 2 km x tambahan, dibulatkan ke Rp 500, lalu + packing.</div>
    </div>
  </div>

  <div class="space-y-4">
    <div class="card p-5 space-y-3">
      <h3 class="font-bold text-sm"><i class="fas fa-qrcode text-red-600 mr-1"></i>QRIS</h3>
      {% if t.qris_gambar %}<img src="{{ t.qris_gambar.url }}" class="w-full max-w-[220px] mx-auto rounded-lg border border-neutral-200">{% else %}<div class="aspect-square max-w-[220px] mx-auto rounded-lg border-2 border-dashed border-neutral-300 flex items-center justify-center text-neutral-400 text-xs">Belum ada gambar QRIS</div>{% endif %}
      <div><label class="form-label">{% if t.qris_gambar %}Ganti gambar{% else %}Upload gambar{% endif %} QRIS</label><input type="file" name="qris_gambar" accept="image/*" class="form-input text-xs"></div>
      <div><label class="form-label">Nama merchant di QRIS</label><input name="qris_nama" value="{{ t.qris_nama }}" class="form-input" placeholder="mis. IO SHOES STORE"></div>
      <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="qris_aktif" {% if t.qris_aktif %}checked{% endif %} class="w-4 h-4 accent-red-600"> Tampilkan QRIS sebagai pilihan bayar</label>
      {% if t.qris_gambar %}<label class="flex items-center gap-2 text-xs text-red-600"><input type="checkbox" name="hapus_qris" class="w-4 h-4 accent-red-600"> Hapus gambar QRIS</label>{% endif %}
    </div>
    <div class="card p-5 space-y-4">
      <h3 class="font-bold text-sm">Pesanan Online</h3>
      <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="katalog_aktif" {% if t.katalog_aktif %}checked{% endif %} class="w-4 h-4 accent-red-600"> Terima pesanan online</label>
      <div><label class="form-label">Batas bayar (jam)</label><input name="batas_bayar_jam" value="{{ t.batas_bayar_jam }}" class="form-input" inputmode="numeric"><p class="form-help">Lewat dari ini pesanan otomatis batal dan stok dilepas.</p></div>
      <div><label class="form-label">Batas stok menipis default</label><input name="stok_minimum_default" value="{{ t.stok_minimum_default }}" class="form-input" inputmode="numeric"></div>
    </div>
    <div class="card p-5">
      <label class="form-label">Logo toko</label>
      {% if t.logo %}<img src="{{ t.logo.url }}" class="h-16 mb-2 rounded-full">{% endif %}
      <input type="file" name="logo" accept="image/*" class="form-input text-xs">
    </div>
    <button class="btn btn-accent w-full justify-center py-3"><i class="fas fa-save"></i> Simpan Pengaturan</button>
  </div>
</form>
{% endblock %}
{% block extra_js %}
<script>
const latI=document.getElementById('lat'),lngI=document.getElementById('lng');
const awal=[Number(latI.value)||-6.2,Number(lngI.value)||106.816];
const peta=L.map('peta').setView(awal,latI.value?15:11);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19,attribution:'&copy; OpenStreetMap'}).addTo(peta);
let marker=latI.value?L.marker(awal,{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);}
if(marker)marker.on('dragend',e=>taruh(e.target.getLatLng()));
peta.on('click',e=>taruh(e.latlng));
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 di browser.'));}
[latI,lngI].forEach(i=>i.addEventListener('change',()=>{const ll=L.latLng(Number(latI.value),Number(lngI.value));if(!isNaN(ll.lat)&&!isNaN(ll.lng)){taruh(ll);peta.setView(ll,15);}}));
</script>
{% endblock %}