<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Toko - Raja Futsal</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Inter Font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        body { font-family: 'Inter', sans-serif; background-color: #f9fafb; }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: #f97316; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #ea580c; }
        select, input, textarea, button { transition: all 0.2s ease; }
        .card-shadow { box-shadow: 0 10px 40px -15px rgba(0, 0, 0, 0.1); }
        .loading-spinner { border: 3px solid #f3f3f3; border-top: 3px solid #f97316; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    </style>
</head>
<body class="min-h-screen py-8">

    <div class="max-w-3xl mx-auto px-4">


        <div class="bg-white shadow-xl card-shadow rounded-3xl w-full p-8 border border-gray-100">

            <!-- Header -->
            <div class="text-center mb-8">
                <div class="inline-block p-4 bg-orange-50 rounded-full mb-4">
                    <i class="fas fa-store text-4xl text-orange-500"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">
                    Edit Toko <span class="inline-block">✏️</span>
                </h2>
                <p class="text-gray-500 mt-2">Perbarui informasi toko Anda</p>
            </div>

            <!-- TOAST NOTIFICATION -->
            <?php if(session('success') || session('error')): ?>
            <div id="toast-notification"
                class="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-white border <?php echo e(session('success') ? 'border-green-200' : 'border-red-200'); ?> shadow-2xl rounded-2xl px-5 py-4 max-w-sm w-full"
                style="animation: slideInRight 0.4s ease;">
                <div class="w-10 h-10 <?php echo e(session('success') ? 'bg-green-500' : 'bg-red-500'); ?> rounded-xl flex items-center justify-center flex-shrink-0">
                    <i class="fas <?php echo e(session('success') ? 'fa-check' : 'fa-exclamation'); ?> text-white text-sm"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="toast-title font-semibold text-gray-800 text-sm"><?php echo e(session('success') ? 'Berhasil!' : 'Gagal!'); ?></p>
                    <p class="toast-message text-gray-500 text-xs mt-0.5 truncate"><?php echo e(session('success') ?? session('error')); ?></p>
                </div>
                <button onclick="closeToast()" class="text-gray-400 hover:text-gray-600 flex-shrink-0 ml-1">
                    <i class="fas fa-times text-xs"></i>
                </button>
                <div class="absolute bottom-0 left-0 h-1 <?php echo e(session('success') ? 'bg-green-500' : 'bg-red-500'); ?> rounded-b-2xl" id="toastProgress"
                    style="width: 100%; transition: width 5s linear;"></div>
            </div>

            <style>
            @keyframes slideInRight {
                from { opacity: 0; transform: translateX(100px); }
                to   { opacity: 1; transform: translateX(0); }
            }
            @keyframes slideOutRight {
                from { opacity: 1; transform: translateX(0); }
                to   { opacity: 0; transform: translateX(100px); }
            }
            </style>

            <script>
                setTimeout(() => {
                    const bar = document.getElementById('toastProgress');
                    if (bar) bar.style.width = '0%';
                }, 100);
                setTimeout(() => closeToast(), 5100);
                function closeToast() {
                    const toast = document.getElementById('toast-notification');
                    if (toast) {
                        toast.style.animation = 'slideOutRight 0.3s ease forwards';
                        setTimeout(() => toast.remove(), 300);
                    }
                }
            </script>
            <?php endif; ?>

            <!-- Form Edit -->
            <form method="POST" action="<?php echo e(route('toko.update', $toko->id)); ?>" class="space-y-6">
                <?php echo csrf_field(); ?>
                <?php echo method_field('PUT'); ?>

                <!-- Nama Toko -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-store-alt mr-2 text-orange-500"></i> Nama Toko
                    </label>
                    <input type="text" name="nama_toko" value="<?php echo e(old('nama_toko', $toko->nama_toko)); ?>"
                           placeholder="Contoh: Toko Makmur Jaya"
                           class="w-full border-2 border-gray-200 rounded-xl p-3 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 outline-none transition <?php $__errorArgs = ['nama_toko'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                           required>
                    <?php $__errorArgs = ['nama_toko'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <p class="text-red-500 text-sm mt-1"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                <!-- Deskripsi -->
                <div class="group">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-align-left mr-2 text-orange-500"></i> Deskripsi Toko
                    </label>
                    <textarea name="deskripsi" rows="3"
                              placeholder="Ceritakan tentang toko Anda... (opsional)"
                              class="w-full border-2 border-gray-200 rounded-xl p-3 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 outline-none transition resize-none bg-white <?php $__errorArgs = ['deskripsi'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"><?php echo e(old('deskripsi', $toko->deskripsi)); ?></textarea>
                    <?php $__errorArgs = ['deskripsi'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <p class="text-red-500 text-sm mt-1"><?php echo e($message); ?></p>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>

                <!-- Alamat -->
                <div class="border-t-2 border-gray-100 pt-6">
                    <h3 class="font-bold text-lg text-gray-800 mb-4 flex items-center">
                        <i class="fas fa-map-marker-alt text-orange-500 mr-2"></i> Alamat Toko
                    </h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- Provinsi -->
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">Provinsi</label>
                            <select name="province_code" id="province" required
                                    class="w-full border-2 border-gray-200 rounded-xl p-3 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 outline-none transition <?php $__errorArgs = ['province_code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                                <option value="" disabled>Pilih Provinsi</option>
                                <?php $__currentLoopData = $provinces; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $prov): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($prov->code); ?>" <?php echo e(old('province_code', $toko->province_code) == $prov->code ? 'selected' : ''); ?>>
                                        <?php echo e($prov->name); ?>

                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                            <?php $__errorArgs = ['province_code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-red-500 text-sm mt-1"><?php echo e($message); ?></p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <!-- Kota -->
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">Kota/Kabupaten</label>
                            <select name="city_code" id="city" required
                                    class="w-full border-2 border-gray-200 rounded-xl p-3 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 outline-none transition <?php $__errorArgs = ['city_code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                                <option value="" disabled>Pilih Kota</option>
                                <?php $__currentLoopData = $cities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $city): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($city->code); ?>" <?php echo e(old('city_code', $toko->city_code) == $city->code ? 'selected' : ''); ?>>
                                        <?php echo e($city->name); ?>

                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                            <?php $__errorArgs = ['city_code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-red-500 text-sm mt-1"><?php echo e($message); ?></p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <!-- Kecamatan -->
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">Kecamatan</label>
                            <select name="district_code" id="district" required
                                    class="w-full border-2 border-gray-200 rounded-xl p-3 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 outline-none transition <?php $__errorArgs = ['district_code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                                <option value="" disabled>Pilih Kecamatan</option>
                                <?php $__currentLoopData = $districts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $district): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($district->code); ?>" <?php echo e(old('district_code', $toko->district_code) == $district->code ? 'selected' : ''); ?>>
                                        <?php echo e($district->name); ?>

                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                            <?php $__errorArgs = ['district_code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-red-500 text-sm mt-1"><?php echo e($message); ?></p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <!-- Desa -->
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">Desa/Kelurahan</label>
                            <select name="village_code" id="village" required
                                    class="w-full border-2 border-gray-200 rounded-xl p-3 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 outline-none transition <?php $__errorArgs = ['village_code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                                <option value="" disabled>Pilih Desa</option>
                                <?php $__currentLoopData = $villages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $village): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($village->code); ?>" <?php echo e(old('village_code', $toko->village_code) == $village->code ? 'selected' : ''); ?>>
                                        <?php echo e($village->name); ?>

                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                            <?php $__errorArgs = ['village_code'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-red-500 text-sm mt-1"><?php echo e($message); ?></p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <!-- Kode Pos -->
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-600 mb-1">
                                <i class="fas fa-mail-bulk mr-2 text-orange-500"></i>Kode Pos
                            </label>
                            <div class="relative">
                                <input type="text" name="kode_pos" id="kode_pos"
                                       value="<?php echo e(old('kode_pos', $toko->kode_pos)); ?>"
                                       placeholder="Contoh: 40115"
                                       maxlength="10"
                                       class="w-full border-2 border-gray-200 rounded-xl p-3 pl-10 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 outline-none transition <?php $__errorArgs = ['kode_pos'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                <i class="fas fa-envelope absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            </div>
                            <p class="text-gray-400 text-xs mt-1">
                                <i class="fas fa-info-circle mr-1"></i>Kode pos bersifat opsional, maksimal 10 digit angka
                            </p>
                            <?php $__errorArgs = ['kode_pos'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <p class="text-red-500 text-sm mt-1"><?php echo e($message); ?></p>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>


                        <!-- Alamat Jalan (di dalam grid, ganti yang lama) -->
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-600 mb-1">
                                <i class="fas fa-road mr-2 text-orange-500"></i>Alamat Jalan
                            </label>
                            <textarea name="alamat_jalan" rows="2"
                                    placeholder="Contoh: Jl. Mawar No. 10, RT 01/RW 02, Depan Masjid Al-Ikhlas"
                                    class="w-full border-2 border-gray-200 rounded-xl p-3 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 outline-none transition resize-none bg-white"><?php echo e(old('alamat_jalan', $toko->alamat_jalan)); ?></textarea>
                        </div>

                        <!-- Koordinat Toko -->
                        <div class="md:col-span-2 border-t-2 border-gray-100 pt-4">
                            <label class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-map-marker-alt mr-2 text-orange-500"></i> Koordinat Toko
                                <span class="text-xs font-normal text-gray-400 ml-1">(untuk perhitungan ongkir)</span>
                            </label>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <input type="text" name="latitude" id="latitude"
                                        value="<?php echo e(old('latitude', $toko->latitude)); ?>"
                                        placeholder="Contoh: -6.200000"
                                        class="w-full border-2 border-gray-200 rounded-xl p-3 focus:border-orange-400 outline-none transition">
                                    <p class="text-xs text-gray-400 mt-1">Latitude</p>
                                </div>
                                <div>
                                    <input type="text" name="longitude" id="longitude"
                                        value="<?php echo e(old('longitude', $toko->longitude)); ?>"
                                        placeholder="Contoh: 106.816666"
                                        class="w-full border-2 border-gray-200 rounded-xl p-3 focus:border-orange-400 outline-none transition">
                                    <p class="text-xs text-gray-400 mt-1">Longitude</p>
                                </div>
                            </div>
                            <button type="button" onclick="getMyLocation()"
                                    class="mt-3 w-full border-2 border-orange-300 text-orange-500 py-2 rounded-xl text-sm font-medium hover:bg-orange-50 transition flex items-center justify-center gap-2">
                                <i class="fas fa-crosshairs"></i> Gunakan Lokasi Saya Sekarang
                            </button>
                            <p class="text-xs text-gray-400 mt-2 text-center">
                                <i class="fas fa-info-circle mr-1"></i>
                                Atau cari di <a href="https://www.latlong.net" target="_blank" class="text-orange-400 underline">latlong.net</a>
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex gap-4 mt-8">
                    <button type="submit"
                            class="flex-1 bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold py-3 px-6 rounded-xl transition transform hover:scale-105 shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
                        <i class="fas fa-save"></i>
                        Simpan Perubahan
                    </button>

                    <a href="<?php echo e(route('dashboard')); ?>"
                       class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold py-3 px-6 rounded-xl transition transform hover:scale-105 flex items-center justify-center gap-2">
                        Batal
                    </a>
                </div>
            </form>

<!-- Danger Zone - di tengah -->
<div class="mt-8 pt-6 border-t-2 border-red-200 flex flex-col items-center">
    <h3 class="font-bold text-lg text-red-600 mb-4 flex items-center">
        <i class="fas fa-exclamation-triangle mr-2"></i> Danger Zone
    </h3>

    <form action="<?php echo e(route('toko.destroy', $toko->id)); ?>" method="POST"
          onsubmit="return confirm('Apakah Anda yakin ingin menghapus toko ini? Tindakan ini tidak dapat dibatalkan.')"
          class="flex justify-center w-full">
        <?php echo csrf_field(); ?>
        <?php echo method_field('DELETE'); ?>
        <button type="submit"
                class="bg-red-50 hover:bg-red-100 text-red-600 font-semibold py-3 px-8 rounded-xl transition flex items-center justify-center gap-2 border-2 border-red-200 shadow-sm hover:shadow-md">
            <i class="fas fa-trash"></i>
            Hapus Toko
        </button>
    </form>

    <p class="text-xs text-gray-500 mt-3 text-center max-w-md">
        <i class="fas fa-info-circle mr-1 text-red-400"></i>
        Toko hanya dapat dihapus jika tidak memiliki produk.
    </p>
</div>
        </div>
           
    </div>

    <script>

        function getMyLocation() {
    if (!navigator.geolocation) {
        alert('Browser tidak mendukung geolocation');
        return;
    }
    navigator.geolocation.getCurrentPosition(
        function(pos) {
            document.getElementById('latitude').value  = pos.coords.latitude.toFixed(7);
            document.getElementById('longitude').value = pos.coords.longitude.toFixed(7);
        },
        function() {
            alert('Gagal mendapatkan lokasi. Izinkan akses lokasi di browser.');
        }
    );
}
        const province = document.getElementById('province');
        const city = document.getElementById('city');
        const district = document.getElementById('district');
        const village = document.getElementById('village');

        async function fetchData(url, target, placeholder, selectedValue = null) {
            try {
                target.disabled = true;
                target.innerHTML = `<option value="" disabled>Memuat ${placeholder}...</option>`;

                const res = await fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                });

                if (!res.ok) {
                    throw new Error('Network response was not ok');
                }

                const data = await res.json();
                target.innerHTML = '<option value="" disabled>Pilih ' + placeholder + '</option>';

                if (data && data.length > 0) {
                    data.forEach(item => {
                        const selected = (selectedValue && item.code == selectedValue) ? 'selected' : '';
                        target.innerHTML += `<option value="${item.code}" ${selected}>${item.name}</option>`;
                    });
                    target.disabled = false;
                } else {
                    target.innerHTML = `<option value="" disabled>Tidak ada data ${placeholder}</option>`;
                }
            } catch (err) {
                console.error('Error:', err);
                target.innerHTML = `<option value="" disabled>Gagal memuat ${placeholder}</option>`;
                target.disabled = true;
            }
        }

        province.addEventListener('change', () => {
            if (province.value) {
                // Reset dan disable downstream selects
                city.innerHTML = '<option value="" disabled>Pilih Kota</option>';
                district.innerHTML = '<option value="" disabled>Pilih Kecamatan</option>';
                village.innerHTML = '<option value="" disabled>Pilih Desa</option>';

                city.disabled = true;
                district.disabled = true;
                village.disabled = true;

                // Fetch cities
                fetchData('/get-cities/' + province.value, city, 'Kota');
            }
        });

        city.addEventListener('change', () => {
            if (city.value) {
                district.innerHTML = '<option value="" disabled>Pilih Kecamatan</option>';
                village.innerHTML = '<option value="" disabled>Pilih Desa</option>';

                district.disabled = true;
                village.disabled = true;

                fetchData('/get-districts/' + city.value, district, 'Kecamatan');
            }
        });

        district.addEventListener('change', () => {
            if (district.value) {
                village.innerHTML = '<option value="" disabled>Pilih Desa</option>';
                village.disabled = true;

                fetchData('/get-villages/' + district.value, village, 'Desa');
            }
        });

        // Auto filter angka untuk kode pos
        document.getElementById('kode_pos').addEventListener('keypress', (e) => {
            const charCode = e.which ? e.which : e.keyCode;
            if (charCode < 48 || charCode > 57) {
                e.preventDefault();
            }
        });
    </script>

</body>
</html>
<?php /**PATH C:\laragon\www\ecommerce\resources\views/toko/edit.blade.php ENDPATH**/ ?>