Checkout

<script data-wp-block-html="js">
// 1. Data Kota Sederhana (Contoh)
const dataKota = {
  "DKI Jakarta": ["Jakarta Selatan", "Jakarta Pusat", "Jakarta Barat"],
  "Jawa Barat": ["Bandung", "Bogor", "Bekasi"],
  "Jawa Timur": ["Surabaya", "Malang", "Sidoarjo"]
};

const provinsiSelect = document.getElementById('provinsi');
const kotaSelect = document.getElementById('kota');

// Update Dropdown Kota saat Provinsi Diubah
provinsiSelect.addEventListener('change', function() {
  const selectedProv = this.value;
  kotaSelect.innerHTML = '<option value="">-- Pilih Kota --</option>';

  if (selectedProv && dataKota[selectedProv]) {
    dataKota[selectedProv].forEach(kota => {
      const option = document.createElement('option');
      option.value = kota;
      option.textContent = kota;
      kotaSelect.appendChild(option);
    });
  }
});

// 2. Fitur Deteksi Lokasi Otomatis
document.getElementById('btn-detect').addEventListener('click', function() {
  this.innerText = "Mendeteksi...";

  // Ambil lokasi via API IP (Tidak butuh izin browser yang rumit)
  fetch("https://ipapi.co/json/")
    .then(res => res.json())
    .then(data => {
      if (data.city) {
        document.getElementById('alamat').value = `Area perkiraan: ${data.city}, ${data.region}`;
        document.getElementById('kode_pos').value = data.postal || '';
      }
      this.innerText = "📍 Lokasi Terdeteksi";
    })
    .catch(err => {
      alert("Gagal mendeteksi lokasi otomatis. Silakan isi manual.");
      this.innerText = "📍 Gunakan Lokasi Saya Saat Ini";
    });
});

// 3. Handle Submit Form
document.getElementById('checkout-form').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const formData = new FormData(this);
  const dataObject = Object.fromEntries(formData.entries());
  
  console.log("Data Checkout SIAP Kirim ke Backend:", dataObject);
  alert("Pesanan berhasil dibuat! Cek konsol browser untuk data.");
});
</script>