{{-- 
    Region Dropdown Cascade Component
    
    Usage:
    @include('components.region-dropdown', [
        'required' => true,
        'provinceValue' => $user->province_code ?? '',
        'regencyValue' => $user->regency_code ?? '',
        'districtValue' => $user->district_code ?? '',
        'villageValue' => $user->village_code ?? '',
    ])
--}}

@php
    $required = $required ?? false;
    $provinceValue = $provinceValue ?? '';
    $regencyValue = $regencyValue ?? '';
    $districtValue = $districtValue ?? '';
    $villageValue = $villageValue ?? '';
@endphp

<div class="region-dropdown-container">
    <!-- Provinsi -->
    <div class="mb-3">
        <label for="province_code" class="form-label">
            Provinsi @if($required)<span class="text-danger">*</span>@endif
        </label>
        <select name="province_code" id="province_code" class="form-control region-select" {{ $required ? 'required' : '' }}>
            <option value="">Pilih Provinsi...</option>
        </select>
        <input type="hidden" name="province_name" id="province_name">
    </div>

    <!-- Kabupaten/Kota -->
    <div class="mb-3">
        <label for="regency_code" class="form-label">
            Kabupaten/Kota @if($required)<span class="text-danger">*</span>@endif
        </label>
        <select name="regency_code" id="regency_code" class="form-control region-select" {{ $required ? 'required' : '' }} disabled>
            <option value="">Pilih Provinsi terlebih dahulu...</option>
        </select>
        <input type="hidden" name="regency_name" id="regency_name">
    </div>

    <!-- Kecamatan -->
    <div class="mb-3">
        <label for="district_code" class="form-label">
            Kecamatan @if($required)<span class="text-danger">*</span>@endif
        </label>
        <select name="district_code" id="district_code" class="form-control region-select" {{ $required ? 'required' : '' }} disabled>
            <option value="">Pilih Kabupaten/Kota terlebih dahulu...</option>
        </select>
        <input type="hidden" name="district_name" id="district_name">
    </div>

    <!-- Desa/Kelurahan -->
    <div class="mb-3">
        <label for="village_code" class="form-label">
            Desa/Kelurahan @if($required)<span class="text-danger">*</span>@endif
        </label>
        <select name="village_code" id="village_code" class="form-control region-select" {{ $required ? 'required' : '' }} disabled>
            <option value="">Pilih Kecamatan terlebih dahulu...</option>
        </select>
        <input type="hidden" name="village_name" id="village_name">
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const provinceSelect = document.getElementById('province_code');
    const regencySelect = document.getElementById('regency_code');
    const districtSelect = document.getElementById('district_code');
    const villageSelect = document.getElementById('village_code');
    
    const provinceName = document.getElementById('province_name');
    const regencyName = document.getElementById('regency_name');
    const districtName = document.getElementById('district_name');
    const villageName = document.getElementById('village_name');
    
    // Saved values untuk edit mode
    const savedProvince = '{{ $provinceValue }}';
    const savedRegency = '{{ $regencyValue }}';
    const savedDistrict = '{{ $districtValue }}';
    const savedVillage = '{{ $villageValue }}';
    
    // Load Provinces on page load
    loadProvinces();
    
    // Event Listeners
    provinceSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        provinceName.value = selectedOption.text !== 'Pilih Provinsi...' ? selectedOption.text : '';
        
        // Clear nama fields untuk region dibawahnya
        regencyName.value = '';
        districtName.value = '';
        villageName.value = '';
        
        resetSelect(regencySelect, 'Pilih Kabupaten/Kota...');
        resetSelect(districtSelect, 'Pilih Kabupaten/Kota terlebih dahulu...');
        resetSelect(villageSelect, 'Pilih Kecamatan terlebih dahulu...');
        
        if (this.value) {
            loadRegencies(this.value);
        }
    });
    
    regencySelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        regencyName.value = selectedOption.text !== 'Pilih Kabupaten/Kota...' ? selectedOption.text : '';
        
        // Clear nama fields untuk region dibawahnya
        districtName.value = '';
        villageName.value = '';
        
        resetSelect(districtSelect, 'Pilih Kecamatan...');
        resetSelect(villageSelect, 'Pilih Kecamatan terlebih dahulu...');
        
        if (this.value && provinceSelect.value) {
            loadDistricts(provinceSelect.value, this.value);
        }
    });
    
    districtSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        districtName.value = selectedOption.text !== 'Pilih Kecamatan...' ? selectedOption.text : '';
        
        // Clear nama field untuk village
        villageName.value = '';
        
        resetSelect(villageSelect, 'Pilih Desa/Kelurahan...');
        
        if (this.value && provinceSelect.value && regencySelect.value) {
            loadVillages(provinceSelect.value, regencySelect.value, this.value);
        }
    });
    
    villageSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.text !== 'Pilih Desa/Kelurahan...') {
            const villageType = selectedOption.getAttribute('data-type') || '';
            villageName.value = villageType + ' ' + selectedOption.text;
        } else {
            villageName.value = '';
        }
    });
    
    // Functions
    function loadProvinces() {
        showLoading(provinceSelect);
        
        fetch('{{ route("api.regions.provinces") }}')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    populateSelect(provinceSelect, data.data, 'code', 'name', 'Pilih Provinsi...');
                    provinceSelect.disabled = false;
                    
                    // Set saved value jika ada
                    if (savedProvince) {
                        provinceSelect.value = savedProvince;
                        // Trigger change untuk set province_name
                        const selectedOption = provinceSelect.options[provinceSelect.selectedIndex];
                        provinceName.value = selectedOption.text;
                        loadRegencies(savedProvince);
                    }
                }
            })
            .catch(error => {
                console.error('Error loading provinces:', error);
                provinceSelect.disabled = false;
            });
    }
    
    function loadRegencies(provinceCode) {
        showLoading(regencySelect);
        
        fetch(`{{ route("api.regions.regencies") }}?province_code=${provinceCode}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    populateSelect(regencySelect, data.data, 'code', 'name', 'Pilih Kabupaten/Kota...');
                    regencySelect.disabled = false;
                    
                    // Set saved value jika ada
                    if (savedRegency && provinceCode === savedProvince) {
                        regencySelect.value = savedRegency;
                        // Trigger change untuk set regency_name
                        const selectedOption = regencySelect.options[regencySelect.selectedIndex];
                        regencyName.value = selectedOption.text;
                        loadDistricts(provinceCode, savedRegency);
                    }
                }
            })
            .catch(error => {
                console.error('Error loading regencies:', error);
                regencySelect.disabled = false;
            });
    }
    
    function loadDistricts(provinceCode, regencyCode) {
        showLoading(districtSelect);
        
        fetch(`{{ route("api.regions.districts") }}?province_code=${provinceCode}&regency_code=${regencyCode}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    populateSelect(districtSelect, data.data, 'code', 'name', 'Pilih Kecamatan...');
                    districtSelect.disabled = false;
                    
                    // Set saved value jika ada
                    if (savedDistrict && provinceCode === savedProvince && regencyCode === savedRegency) {
                        districtSelect.value = savedDistrict;
                        // Trigger change untuk set district_name
                        const selectedOption = districtSelect.options[districtSelect.selectedIndex];
                        districtName.value = selectedOption.text;
                        loadVillages(provinceCode, regencyCode, savedDistrict);
                    }
                }
            })
            .catch(error => {
                console.error('Error loading districts:', error);
                districtSelect.disabled = false;
            });
    }
    
    function loadVillages(provinceCode, regencyCode, districtCode) {
        showLoading(villageSelect);
        
        fetch(`{{ route("api.regions.villages") }}?province_code=${provinceCode}&regency_code=${regencyCode}&district_code=${districtCode}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    villageSelect.innerHTML = '<option value="">Pilih Desa/Kelurahan...</option>';
                    data.data.forEach(village => {
                        const option = document.createElement('option');
                        option.value = village.code;
                        option.textContent = village.name;
                        option.setAttribute('data-type', village.type);
                        villageSelect.appendChild(option);
                    });
                    villageSelect.disabled = false;
                    
                    // Set saved value jika ada
                    if (savedVillage && provinceCode === savedProvince && regencyCode === savedRegency && districtCode === savedDistrict) {
                        villageSelect.value = savedVillage;
                        // Trigger change untuk set nama
                        villageSelect.dispatchEvent(new Event('change'));
                    }
                }
            })
            .catch(error => {
                console.error('Error loading villages:', error);
                villageSelect.disabled = false;
            });
    }
    
    function populateSelect(selectElement, data, valueKey, textKey, placeholder) {
        selectElement.innerHTML = `<option value="">${placeholder}</option>`;
        data.forEach(item => {
            const option = document.createElement('option');
            option.value = item[valueKey];
            option.textContent = item[textKey];
            selectElement.appendChild(option);
        });
    }
    
    function resetSelect(selectElement, placeholder) {
        selectElement.innerHTML = `<option value="">${placeholder}</option>`;
        selectElement.disabled = true;
        selectElement.value = '';
    }
    
    function showLoading(selectElement) {
        selectElement.innerHTML = '<option value="">Loading...</option>';
        selectElement.disabled = true;
    }
});
</script>
@endpush