@extends('layout.app')

@section('title', 'Tambah Area - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Tambah Area" 
    :breadcrumbs="[
        ['name' => 'Area', 'url' => route('area.index')],
        ['name' => 'Tambah']
    ]"
    :action="route('area.index')" 
    actionLabel="Kembali" 
    actionIcon="arrow_back"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">add_location</i> Form Tambah Area
                    </h6>
                </div>
                <div class="card-body pt-3">
                <form method="POST" action="{{ route('area.store') }}">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Provinsi <span class="text-danger">*</span></label>
                                <select class="form-control @error('provinsi') is-invalid @enderror" 
                                        id="provinsi" 
                                        name="provinsi" 
                                        required>
                                    <option value="">Pilih Provinsi</option>
                                </select>
                                @error('provinsi')
                                        <div class="invalid-feedback d-block mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Kabupaten/Kota <span class="text-danger">*</span></label>
                                <select class="form-control @error('kabupaten_kota') is-invalid @enderror" 
                                        id="kabupaten_kota" 
                                        name="kabupaten_kota" 
                                        required disabled>
                                    <option value="">Pilih Kabupaten/Kota</option>
                                </select>
                                @error('kabupaten_kota')
                                        <div class="invalid-feedback d-block mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Kecamatan <span class="text-danger">*</span></label>
                                <select class="form-control @error('kecamatan') is-invalid @enderror" 
                                        id="kecamatan" 
                                        name="kecamatan" 
                                        required disabled>
                                    <option value="">Pilih Kecamatan</option>
                                </select>
                                @error('kecamatan')
                                        <div class="invalid-feedback d-block mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Desa/Kelurahan <span class="text-danger">*</span></label>
                                <select class="form-control @error('desa_kelurahan') is-invalid @enderror" 
                                        id="desa_kelurahan" 
                                        name="desa_kelurahan" 
                                        required disabled>
                                    <option value="">Pilih Desa/Kelurahan</option>
                                </select>
                                @error('desa_kelurahan')
                                        <div class="invalid-feedback d-block mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Kode Pos</label>
                                <input type="text" 
                                       class="form-control @error('kode_pos') is-invalid @enderror" 
                                       id="kode_pos" 
                                       name="kode_pos" 
                                       value="{{ old('kode_pos') }}" 
                                           maxlength="10"
                                           placeholder="Contoh: 12345">
                                @error('kode_pos')
                                        <div class="invalid-feedback d-block mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Koordinat</label>
                                <input type="text" 
                                       class="form-control @error('koordinat') is-invalid @enderror" 
                                       id="koordinat" 
                                       name="koordinat" 
                                       value="{{ old('koordinat') }}" 
                                           placeholder="Latitude, Longitude (contoh: -6.2088, 106.8456)">
                                    <small class="text-muted d-block mt-1">
                                        <i class="material-symbols-rounded" style="font-size: 14px; line-height: 1; vertical-align: middle;">info</i> Format: -6.2088, 106.8456
                                    </small>
                                @error('koordinat')
                                        <div class="invalid-feedback d-block mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                        <div class="form-group d-flex gap-2 mt-4">
                        <button type="submit" class="btn bg-gradient-primary mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">save</i> Simpan Area
                        </button>
                        <a href="{{ route('area.index') }}" class="btn bg-gradient-secondary mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">close</i> Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">info</i> Informasi
                    </h6>
            </div>
                <div class="card-body pt-3">
                    <div class="alert alert-info text-white d-flex align-items-start mb-3">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; flex-shrink: 0;">info</i>
                        <div>
                            <strong>API Wilayah Indonesia:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Data wilayah diambil dari <a href="https://wilayah.id/" target="_blank" class="alert-link">Wilayah.id API</a></li>
                        <li>Data sesuai Kepmendagri No 300.2.2-2138 Tahun 2025</li>
                        <li>Dropdown otomatis terisi berdasarkan pilihan sebelumnya</li>
                        <li>Data selalu up-to-date dan akurat</li>
                        <li>Tidak perlu menyimpan semua data wilayah di database</li>
                    </ul>
                        </div>
                </div>
                
                    <div class="alert alert-success text-white d-flex align-items-start mb-3">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; flex-shrink: 0;">check_circle</i>
                        <div>
                            <strong>Keunggulan:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Lebih cepat dan ringan</li>
                        <li>Data selalu terbaru (Update terakhir: 04 Juli 2025)</li>
                        <li>Menghemat storage database</li>
                        <li>User experience yang lebih baik</li>
                    </ul>
                        </div>
                </div>
                
                    <div class="alert alert-warning text-white d-flex align-items-start">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; flex-shrink: 0;">warning</i>
                        <div>
                            <strong>Catatan:</strong>
                    <p class="mb-0 mt-2">Pastikan koneksi internet stabil untuk mengakses data wilayah dari API wilayah.id</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing area form...');
    
    const provinsiSelect = document.getElementById('provinsi');
    const kabupatenSelect = document.getElementById('kabupaten_kota');
    const kecamatanSelect = document.getElementById('kecamatan');
    const desaSelect = document.getElementById('desa_kelurahan');
    
    // Check if elements exist
    if (!provinsiSelect) {
        console.error('Provinsi select element not found!');
        return;
    }
    
    console.log('Form elements found, starting province loading...');
    
    // Load provinces on page load
    loadProvinces();
    
    // Province change handler
    provinsiSelect.addEventListener('change', function() {
        const provinceId = this.value;
        console.log('Province selected:', provinceId);
        
        if (provinceId) {
            loadRegencies(provinceId);
            resetSelect(kabupatenSelect);
            resetSelect(kecamatanSelect);
            resetSelect(desaSelect);
        } else {
            disableSelect(kabupatenSelect);
            disableSelect(kecamatanSelect);
            disableSelect(desaSelect);
        }
    });
    
    // Regency change handler
    kabupatenSelect.addEventListener('change', function() {
        const regencyId = this.value;
        if (regencyId) {
            loadDistricts(regencyId);
            resetSelect(kecamatanSelect);
            resetSelect(desaSelect);
            
            // Note: Fallback is handled in loadDistricts function itself
        } else {
            disableSelect(kecamatanSelect);
            disableSelect(desaSelect);
        }
    });
    
    // District change handler
    kecamatanSelect.addEventListener('change', function() {
        const districtId = this.value;
        if (districtId) {
            loadVillages(districtId);
            resetSelect(desaSelect);
            
            // Note: Fallback is handled in loadVillages function itself
        } else {
            disableSelect(desaSelect);
        }
    });
    
    // Load provinces
    async function loadProvinces() {
        console.log('Starting to load provinces...');
        console.log('Provinsi select element:', provinsiSelect);
        console.log('Provinsi select disabled:', provinsiSelect.disabled);
        
        // First, try to load from API
        try {
            showLoading(provinsiSelect);
            console.log('Attempting to load from API...');
            
            // Add timeout to prevent hanging
            const controller = new AbortController();
            const timeoutId = setTimeout(() => {
                console.log('Request timeout, aborting...');
                controller.abort();
            }, 10000); // 10 second timeout
            
            const response = await fetch('{{ route("area.api.provinces") }}', {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                signal: controller.signal
            });
            
            clearTimeout(timeoutId);
            
            if (response.ok) {
                const result = await response.json();
                
                // Check if there's an error in the response
                if (result.error) {
                    throw new Error(result.error);
                }
                
                const provinces = result.data || [];
                console.log('API provinces loaded:', provinces.length);
                
                if (provinces.length === 0) {
                    throw new Error('Data provinsi kosong');
                }
                
                provinsiSelect.innerHTML = '<option value="">Pilih Provinsi</option>';
                provinces.forEach(province => {
                    const option = document.createElement('option');
                    option.value = province.code;
                    option.textContent = province.name;
                    provinsiSelect.appendChild(option);
                });
                
                enableSelect(provinsiSelect);
                console.log('Provinces loaded successfully from API');
                console.log('Provinsi select enabled:', !provinsiSelect.disabled);
                return;
            } else {
                const errorData = await response.json().catch(() => ({}));
                console.log('API response not OK:', response.status, errorData);
                throw new Error(errorData.error || `HTTP ${response.status}`);
            }
        } catch (error) {
            console.error('API failed:', error.message);
            
            // Show error message
            provinsiSelect.innerHTML = '<option value="">Memuat ulang...</option>';
            provinsiSelect.disabled = false;
            
            // Show user-friendly error message (only once)
            if (!window.provinceLoadAttempted) {
                showApiErrorMessage();
                window.provinceLoadAttempted = true;
            }
            
            // Retry after 3 seconds (max 3 retries)
            if (!window.provinceRetryCount) {
                window.provinceRetryCount = 0;
            }
            
            if (window.provinceRetryCount < 3) {
                window.provinceRetryCount++;
                setTimeout(() => {
                    console.log(`Retrying to load provinces (attempt ${window.provinceRetryCount})...`);
                    loadProvinces();
                }, 3000);
            } else {
                provinsiSelect.innerHTML = '<option value="">Gagal memuat. Silakan refresh halaman.</option>';
            }
        }
    }
    
    // Show API error message
    function showApiErrorMessage() {
        // Remove existing error message if any
        const existingError = document.getElementById('api-error-message');
        if (existingError) {
            existingError.remove();
        }
        
        // Create error message
        const errorDiv = document.createElement('div');
        errorDiv.id = 'api-error-message';
        errorDiv.className = 'alert alert-warning alert-dismissible fade show mt-3';
        errorDiv.innerHTML = `
            <div class="d-flex align-items-center">
                <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1;">warning</i>
                <div><strong>Peringatan:</strong> Gagal memuat data dari API. Sistem akan mencoba lagi secara otomatis.</div>
            </div>
        `;
        
        // Insert after form
        const form = document.querySelector('form');
        if (form) {
            form.parentNode.insertBefore(errorDiv, form);
        }
    }
    
    // Load fallback regencies (retry with API)
    function loadFallbackRegencies(provinceId) {
        console.log(`Retrying to load regencies for province: ${provinceId}`);
        
        // Track retry count per province
        const retryKey = `regency_retry_${provinceId}`;
        if (!window[retryKey]) {
            window[retryKey] = 0;
        }
        
        if (window[retryKey] < 2) {
            window[retryKey]++;
            setTimeout(() => {
                console.log(`Retrying regencies (attempt ${window[retryKey]})...`);
                loadRegencies(provinceId);
            }, 2000);
        } else {
            showError(kabupatenSelect, 'Gagal memuat data. Silakan refresh halaman.');
        }
    }
    
    // Load fallback districts (retry with API)
    function loadFallbackDistricts(regencyId) {
        console.log(`Retrying to load districts for regency: ${regencyId}`);
        
        // Track retry count per regency
        const retryKey = `district_retry_${regencyId}`;
        if (!window[retryKey]) {
            window[retryKey] = 0;
        }
        
        if (window[retryKey] < 2) {
            window[retryKey]++;
            setTimeout(() => {
                console.log(`Retrying districts (attempt ${window[retryKey]})...`);
                loadDistricts(regencyId);
            }, 2000);
        } else {
            showError(kecamatanSelect, 'Gagal memuat data. Silakan refresh halaman.');
        }
    }
    
    // Load fallback villages (retry with API)
    function loadFallbackVillages(districtId) {
        console.log(`Retrying to load villages for district: ${districtId}`);
        
        // Track retry count per district
        const retryKey = `village_retry_${districtId}`;
        if (!window[retryKey]) {
            window[retryKey] = 0;
        }
        
        if (window[retryKey] < 2) {
            window[retryKey]++;
            setTimeout(() => {
                console.log(`Retrying villages (attempt ${window[retryKey]})...`);
                loadVillages(districtId);
            }, 2000);
        } else {
            showError(desaSelect, 'Gagal memuat data. Silakan refresh halaman.');
        }
    }
    
    // Load regencies
    async function loadRegencies(provinceId) {
        console.log(`=== LOADING REGENCIES FOR PROVINCE: ${provinceId} ===`);
        
        try {
            showLoading(kabupatenSelect);
            console.log(`Loading regencies for province: ${provinceId}`);
            
            // Add timeout for regencies
            const controller = new AbortController();
            const timeoutId = setTimeout(() => {
                console.log('Regencies request timeout, aborting...');
                controller.abort();
            }, 2000); // 2 second timeout (reduced further)
            
            const apiUrl = `{{ url('/api/wilayah/regencies') }}/${provinceId}`;
            console.log('API URL:', apiUrl);
            
            const response = await fetch(apiUrl, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                signal: controller.signal
            });
            
            clearTimeout(timeoutId);
            
            console.log('Response status:', response.status);
            console.log('Response ok:', response.ok);
            
            if (!response.ok) {
                const errorData = await response.json().catch(() => ({}));
                throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
            }
            
            const result = await response.json();
            
            // Check if there's an error in the response
            if (result.error) {
                throw new Error(result.error);
            }
            
            const regencies = result.data || [];
            console.log('Regencies loaded from API:', regencies.length);
            console.log('First regency:', regencies[0]);
            
            if (regencies.length === 0) {
                throw new Error('Data kabupaten/kota kosong');
            }
            
            kabupatenSelect.innerHTML = '<option value="">Pilih Kabupaten/Kota</option>';
            regencies.forEach(regency => {
                const option = document.createElement('option');
                option.value = regency.code;
                option.textContent = regency.name;
                kabupatenSelect.appendChild(option);
            });
            enableSelect(kabupatenSelect);
            console.log('Regencies loaded successfully from API');
        } catch (error) {
            console.error('Error loading regencies:', error);
            console.log('Falling back to hardcoded regencies...');
            
            // Use fallback regencies immediately
            loadFallbackRegencies(provinceId);
        }
    }
    
    // Load districts
    async function loadDistricts(regencyId) {
        try {
            showLoading(kecamatanSelect);
            console.log(`Loading districts for regency: ${regencyId}`);
            
            // Add timeout for districts
            const controller = new AbortController();
            const timeoutId = setTimeout(() => {
                console.log('Districts request timeout, aborting...');
                controller.abort();
            }, 2000); // 2 second timeout (reduced further)
            
            const response = await fetch(`{{ url('/api/wilayah/districts') }}/${regencyId}`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                signal: controller.signal
            });
            
            clearTimeout(timeoutId);
            
            if (!response.ok) {
                const errorData = await response.json().catch(() => ({}));
                throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
            }
            
            const result = await response.json();
            
            // Check if there's an error in the response
            if (result.error) {
                throw new Error(result.error);
            }
            
            const districts = result.data || [];
            console.log('Districts loaded:', districts.length);
            
            if (districts.length === 0) {
                throw new Error('Data kecamatan kosong');
            }
            
            kecamatanSelect.innerHTML = '<option value="">Pilih Kecamatan</option>';
            districts.forEach(district => {
                const option = document.createElement('option');
                option.value = district.code;
                option.textContent = district.name;
                kecamatanSelect.appendChild(option);
            });
            enableSelect(kecamatanSelect);
            console.log('Districts loaded successfully');
        } catch (error) {
            console.error('Error loading districts:', error);
            console.log('Falling back to hardcoded districts...');
            
            // Use fallback districts immediately
            loadFallbackDistricts(regencyId);
        }
    }
    
    // Load villages
    async function loadVillages(districtId) {
        try {
            showLoading(desaSelect);
            console.log(`Loading villages for district: ${districtId}`);
            
            // Add timeout for villages
            const controller = new AbortController();
            const timeoutId = setTimeout(() => {
                console.log('Villages request timeout, aborting...');
                controller.abort();
            }, 2000); // 2 second timeout (reduced further)
            
            const response = await fetch(`{{ url('/api/wilayah/villages') }}/${districtId}`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                signal: controller.signal
            });
            
            clearTimeout(timeoutId);
            
            if (!response.ok) {
                const errorData = await response.json().catch(() => ({}));
                throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
            }
            
            const result = await response.json();
            
            // Check if there's an error in the response
            if (result.error) {
                throw new Error(result.error);
            }
            
            const villages = result.data || [];
            console.log('Villages loaded:', villages.length);
            
            if (villages.length === 0) {
                throw new Error('Data desa/kelurahan kosong');
            }
            
            desaSelect.innerHTML = '<option value="">Pilih Desa/Kelurahan</option>';
            villages.forEach(village => {
                const option = document.createElement('option');
                option.value = village.code;
                option.textContent = village.name;
                desaSelect.appendChild(option);
            });
            enableSelect(desaSelect);
            console.log('Villages loaded successfully');
        } catch (error) {
            console.error('Error loading villages:', error);
            console.log('Falling back to hardcoded villages...');
            
            // Use fallback villages immediately
            loadFallbackVillages(districtId);
        }
    }
    
    // Helper functions
    function showLoading(select) {
        select.innerHTML = '<option value="">Memuat...</option>';
        select.disabled = true;
    }
    
    function showError(select, message) {
        select.innerHTML = `<option value="">${message}</option>`;
        select.disabled = false; // Enable select even on error
    }
    
    function resetSelect(select) {
        select.innerHTML = '<option value="">Pilih...</option>';
        select.disabled = true;
    }
    
    function enableSelect(select) {
        select.disabled = false;
    }
    
    function disableSelect(select) {
        select.disabled = true;
    }
    
});
</script>
@endsection