

<?php $__env->startSection('content'); ?>
<div class="min-h-screen bg-[#fff5f7] py-10">
    <div class="max-w-2xl mx-auto px-4">
        
        <div class="bg-white p-8 rounded-[40px] shadow-xl border border-pink-50">
            <h2 class="text-2xl font-black text-slate-800 mb-6 italic">Tambah Alamat Baru 🏠</h2>
            
            <form action="<?php echo e(route('user.address.store')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <div class="grid gap-5">
                    
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2 ml-2">Label Alamat</label>
                            <input type="text" name="label" placeholder="Rumah / Kantor" 
                                   value="<?php echo e(old('label')); ?>"
                                   class="w-full px-5 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-pink-300 transition-all outline-none" required>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2 ml-2">Nama Penerima</label>
                            <input type="text" name="receiver_name" placeholder="Nama Lengkap" 
                                   value="<?php echo e(old('receiver_name')); ?>"
                                   class="w-full px-5 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-pink-300 transition-all outline-none" required>
                        </div>
                    </div>

                    
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2 ml-2">Nomor Telepon (WhatsApp)</label>
                        <input type="text" name="phone" id="phone"
                               placeholder="08xxxxxxxxx" inputmode="numeric"
                               value="<?php echo e(old('phone')); ?>"
                               oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                               class="w-full px-5 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-pink-300 transition-all outline-none" 
                               required>
                    </div>

                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2 ml-2">Provinsi</label>
                            
                            <select id="province" name="province_code"
                                    class="w-full px-5 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-pink-300 transition-all outline-none cursor-pointer" required>
                                <option value="">Pilih Provinsi</option>
                                <?php $__currentLoopData = $provinces; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($p->code); ?>" <?php echo e(old('province_code') == $p->code ? 'selected' : ''); ?>>
                                        <?php echo e($p->name); ?>

                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2 ml-2">Kota/Kabupaten</label>
                            
                            <select id="regency" name="city_code"
                                    class="w-full px-5 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-pink-300 transition-all outline-none cursor-pointer disabled:opacity-50"
                                    required disabled>
                                <option value="">Pilih Kota</option>
                            </select>
                        </div>
                    </div>

                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2 ml-2">Kecamatan</label>
                            <select id="district" name="district_code"
                                    class="w-full px-5 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-pink-300 transition-all outline-none cursor-pointer disabled:opacity-50"
                                    disabled>
                                <option value="">Pilih Kecamatan</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2 ml-2">Desa/Kelurahan</label>
                            <select id="village" name="village_code"
                                    class="w-full px-5 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-pink-300 transition-all outline-none cursor-pointer disabled:opacity-50"
                                    disabled>
                                <option value="">Pilih Desa</option>
                            </select>
                        </div>
                    </div>

                    
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2 ml-2">Alamat Lengkap</label>
                        <textarea name="full_address" rows="3"
                                  placeholder="Nama jalan, Blok, No Rumah..."
                                  class="w-full px-5 py-4 rounded-2xl bg-slate-50 border-none focus:ring-2 focus:ring-pink-300 transition-all outline-none"
                                  required><?php echo e(old('full_address')); ?></textarea>
                    </div>

                    <div class="pt-4">
                        <button type="submit" 
                                class="w-full bg-pink-400 hover:bg-pink-500 text-white font-black py-4 rounded-2xl shadow-lg shadow-pink-200 transition-all transform hover:-translate-y-1">
                            SIMPAN ALAMAT ✨
                        </button>
                        <a href="<?php echo e(route('user.cart.checkout')); ?>"
                           class="block text-center mt-4 text-slate-400 font-bold text-sm hover:text-pink-400">
                            Batal
                        </a>
                    </div>

                </div>
            </form>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const provinceSelect = document.getElementById('province');
    const regencySelect  = document.getElementById('regency');
    const districtSelect = document.getElementById('district');
    const villageSelect  = document.getElementById('village');

    provinceSelect.addEventListener('change', function () {
        const code = this.value;
        regencySelect.innerHTML  = '<option value="">Memuat...</option>';
        regencySelect.disabled   = true;
        districtSelect.innerHTML = '<option value="">Pilih Kecamatan</option>';
        districtSelect.disabled  = true;
        villageSelect.innerHTML  = '<option value="">Pilih Desa</option>';
        villageSelect.disabled   = true;

        if (!code) return;

        fetch(`/indoregion/regencies/${code}`)
            .then(r => r.json())
            .then(data => {
                regencySelect.innerHTML = '<option value="">Pilih Kota</option>';
                data.forEach(i => {
                    regencySelect.innerHTML += `<option value="${i.code}">${i.name}</option>`;
                });
                regencySelect.disabled = false;
            });
    });

    regencySelect.addEventListener('change', function () {
        const code = this.value;
        districtSelect.innerHTML = '<option value="">Memuat...</option>';
        districtSelect.disabled  = true;
        villageSelect.innerHTML  = '<option value="">Pilih Desa</option>';
        villageSelect.disabled   = true;

        if (!code) return;

        fetch(`/indoregion/districts/${code}`)
            .then(r => r.json())
            .then(data => {
                districtSelect.innerHTML = '<option value="">Pilih Kecamatan</option>';
                data.forEach(i => {
                    districtSelect.innerHTML += `<option value="${i.code}">${i.name}</option>`;
                });
                districtSelect.disabled = false;
            });
    });

    districtSelect.addEventListener('change', function () {
        const code = this.value;
        villageSelect.innerHTML = '<option value="">Memuat...</option>';
        villageSelect.disabled  = true;

        if (!code) return;

        fetch(`/indoregion/villages/${code}`)
            .then(r => r.json())
            .then(data => {
                villageSelect.innerHTML = '<option value="">Pilih Desa</option>';
                data.forEach(i => {
                    villageSelect.innerHTML += `<option value="${i.code}">${i.name}</option>`;
                });
                villageSelect.disabled = false;
            });
    });
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\SwiftCart\resources\views/address/create.blade.php ENDPATH**/ ?>