<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buka Toko - Jadi Penjual</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; }
        ::-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="bg-white min-h-screen flex items-center justify-center p-4">

    <div class="bg-white shadow-xl card-shadow rounded-3xl w-full max-w-2xl 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">
                Buka Toko Kamu <span class="inline-block animate-bounce">🚀</span>
            </h2>
            <p class="text-gray-500 mt-2">Isi detail toko dan alamat untuk memulai berjualan</p>
        </div>

        <!-- Messages -->
        <?php if(session('error')): ?>
        <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 rounded-lg mb-6 flex items-center">
            <i class="fas fa-exclamation-circle mr-3 text-red-500"></i>
            <span><?php echo e(session('error')); ?></span>
            <button onclick="this.parentElement.remove()" class="ml-auto text-red-500 hover:text-red-700"><i class="fas fa-times"></i></button>
        </div>
        <?php endif; ?>

        <?php if(session('success')): ?>
        <div class="bg-green-50 border-l-4 border-green-500 text-green-700 p-4 rounded-lg mb-6 flex items-center">
            <i class="fas fa-check-circle mr-3 text-green-500"></i>
            <span><?php echo e(session('success')); ?></span>
            <button onclick="this.parentElement.remove()" class="ml-auto text-green-500 hover:text-green-700"><i class="fas fa-times"></i></button>
        </div>
        <?php endif; ?>

        <!-- Form -->
        <form method="POST" action="<?php echo e(route('toko.store')); ?>" class="space-y-6">
            <?php echo csrf_field(); ?>

            <!-- 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')); ?>" 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')); ?></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 selected>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') == $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 disabled
                                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 selected>Pilih Kota</option>
                        </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 disabled
                                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 selected>Pilih Kecamatan</option>
                        </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 disabled
                                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 selected>Pilih Desa</option>
                        </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 - Field baru di bawah desa -->
                    <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')); ?>"
                                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 -->
                    <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')); ?></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')); ?>"
                                    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')); ?>"
                                    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>
                            Klik tombol di atas atau cari di <a href="https://www.latlong.net" target="_blank" class="text-orange-400 underline">latlong.net</a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <button type="submit"
                    class="w-full 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 mt-6 flex items-center justify-center">
                <i class="fas fa-store mr-2"></i>
                Simpan & Jadi Penjual
            </button>
        </form>
    </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) {
            try {
                target.disabled = true;
                target.innerHTML = `<option value="" disabled selected>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 selected>Pilih ${placeholder}</option>`;

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

        province.addEventListener('change', () => {
            if(province.value){
                fetchData('/get-cities/' + province.value, city, 'Kota');
                district.innerHTML = '<option value="" disabled selected>Pilih Kecamatan</option>';
                village.innerHTML = '<option value="" disabled selected>Pilih Desa</option>';
                district.disabled = true;
                village.disabled = true;

                // Reset nilai
                city.value = '';
                district.value = '';
                village.value = '';
            }
        });

        city.addEventListener('change', () => {
            if(city.value){
                fetchData('/get-districts/' + city.value, district, 'Kecamatan');
                village.innerHTML = '<option value="" disabled selected>Pilih Desa</option>';
                village.disabled = true;

                // Reset nilai
                district.value = '';
                village.value = '';
            }
        });

        district.addEventListener('change', () => {
            if(district.value){
                fetchData('/get-villages/' + district.value, village, 'Desa');

                // Reset nilai
                village.value = '';
            }
        });

        // 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();
            }
        });

        // Old values handling jika ada error validasi
        document.addEventListener('DOMContentLoaded', function() {
    // Ambil semua data 'old' dari Laravel ke satu objek JS
    const oldData = {
        province: JSON.parse('<?php echo json_encode(old("province_code"), 15, 512) ?>'),
        city: JSON.parse('<?php echo json_encode(old("city_code"), 15, 512) ?>'),
        district: JSON.parse('<?php echo json_encode(old("district_code"), 15, 512) ?>'),
        village: JSON.parse('<?php echo json_encode(old("village_code"), 15, 512) ?>')
    };
    // Jalankan logika hanya jika ada data province
    if (oldData.province) {
        province.value = oldData.province;
        province.dispatchEvent(new Event('change'));

        setTimeout(() => {
            if (oldData.city) {
                city.value = oldData.city;
                city.dispatchEvent(new Event('change'));
            }

            setTimeout(() => {
                if (oldData.district) {
                    district.value = oldData.district;
                    district.dispatchEvent(new Event('change'));
                }

                setTimeout(() => {
                    if (oldData.village) {
                        village.value = oldData.village;
                    }
                }, 500);
            }, 500);
        }, 500);
    }
});
    </script>

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