@extends('layouts.account', ['title' => __('addresses.page_title')])

@section('content')
    <style>
        .shimmer-wrapper {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 100%;
            margin: 0 auto;
        }
        
        .shimmer {
            background: #f0f0f0;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid #e9ecef;
        }
        
        .shimmer-line {
            height: 0.75rem;
            background: linear-gradient(90deg, #f0f0f0 25%, #e9ecef 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 0.25rem;
            margin-bottom: 0.5rem;
        }
        
        .shimmer-line.short {
            width: 60%;
        }
        
        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }
        
        #addresses-loading {
            transition: opacity 0.3s ease;
        }
        
        #addresses-container {
            transition: opacity 0.3s ease;
        }
    </style>
    <!-- Addresses content -->
    <div class="col-lg-9">
        <div class="ps-lg-3 ps-xl-0">

            <!-- Page title -->
            <h1 class="h2 mb-1 mb-sm-2">{{ __('addresses.page_title') }}</h1>

            <!-- Loading indicator -->
            <div id="addresses-loading" class="text-center py-4">
                <div class="shimmer-wrapper">
                    <div class="shimmer">
                        <div class="shimmer-line"></div>
                        <div class="shimmer-line"></div>
                        <div class="shimmer-line short"></div>
                    </div>
                    <div class="shimmer">
                        <div class="shimmer-line"></div>
                        <div class="shimmer-line"></div>
                        <div class="shimmer-line short"></div>
                    </div>
                    <div class="shimmer">
                        <div class="shimmer-line"></div>
                        <div class="shimmer-line"></div>
                        <div class="shimmer-line short"></div>
                    </div>
                </div>
                <p class="text-muted mt-3">{{ __('addresses.loading') }}</p>
            </div>

            <!-- Addresses container -->
            <div id="addresses-container">
                <!-- Addresses will be loaded here via AJAX -->
            </div>
        </div>
    </div>

    <!-- New Address Modal -->
    <div class="modal fade" id="newAddressModal" tabindex="-1" aria-labelledby="newAddressModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <form class="needs-validation new-address-form" novalidate action="{{ route('addresses.store') }}"
                method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="newAddressModalLabel">{{ __('addresses.add_address') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body row g-3 g-sm-4 ">

                        <div class="alert alert-danger d-none new-address-form-message" role="alert"></div>
                        <div class="alert alert-success d-none new-address-form-success" role="alert"></div>

                                     <div class="col-sm-6">
                            <div class="position-relative">
                                <label class="form-label">{{ __('addresses.label') }}</label>
                                <input type="text" class="form-control new-label" id="new-label" required>
                                <div class="invalid-feedback">{{ __('addresses.please_enter_label') }}</div>
                            </div>
                        </div>



                          <div class="col-sm-6">
                            <div class="position-relative">
                                <label class="form-label">{{ __('addresses.name') }}</label>
                                <input type="text" class="form-control new-name" id="new-name" required>
                                <div class="invalid-feedback">{{ __('addresses.please_enter_name') }}</div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="position-relative">
                                <label class="form-label">{{ __('addresses.phone') }}</label>
                                <input type="number" class="form-control new-phone" required>
                                <div class="invalid-feedback">{{ __('addresses.please_enter_phone') }}</div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="position-relative">
                                <label class="form-label">{{ __('addresses.province') }}</label>
                                <select class="form-select new-province-select" required>
                                    <option value="">{{ __('addresses.select_province') }}</option>
                                </select>
                                <div class="invalid-feedback">{{ __('addresses.please_select_province') }}</div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="position-relative">
                                <label class="form-label">{{ __('addresses.city') }}</label>
                                <select class="form-select new-city-select" required>
                                    <option value="">{{ __('addresses.select_city') }}</option>
                                </select>
                                <div class="invalid-feedback">{{ __('addresses.please_select_city') }}</div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="position-relative">
                                <label class="form-label">{{ __('addresses.district') }}</label>
                                <select class="form-select new-district-select" required>
                                    <option value="">{{ __('addresses.select_district') }}</option>
                                </select>
                                <div class="invalid-feedback">{{ __('addresses.please_select_district') }}</div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="position-relative">
                                <label class="form-label">{{ __('addresses.village') }}</label>
                                <select class="form-select new-village-select" required>
                                    <option value="">{{ __('addresses.select_village') }}</option>
                                </select>
                                <div class="invalid-feedback">{{ __('addresses.please_select_village') }}</div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="position-relative">
                                <label class="form-label">{{ __('addresses.zip_code') }}</label>
                                <input type="number" class="form-control new-zip" required>
                                <div class="invalid-feedback">{{ __('addresses.please_enter_zip_code') }}</div>
                            </div>
                        </div>

                        <div class="col-12">
                            <x-address.address-map 
                                :latitude="null"
                                :longitude="null"
                                latitudeInputName="new-latitude"
                                longitudeInputName="new-longitude"
                                :searchPlaceholder="__('addresses.search_for_location')"
                                :searchButtonText="__('addresses.search')"
                                :mapLabel="__('addresses.select_location_on_map')"
                                :instructionText="__('addresses.drag_marker_to_adjust')"
                                :typeToSearchText="__('addresses.type_to_search')" />
                        </div>
                        <div class="col-12">
                            <div class="position-relative">
                                <label for="new-address" class="form-label">{{ __('addresses.address') }}</label>
                                <textarea class="form-control" id="new-address" rows="3" required></textarea>
                                <div class="invalid-feedback">{{ __('addresses.please_enter_address') }}</div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-check mb-0">
                                <input type="checkbox" class="form-check-input" id="set-primary-new">
                                <label for="set-primary-new"
                                    class="form-check-label">{{ __('addresses.set_as_primary_address') }}</label>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">{{ __('addresses.save_changes') }}</button>
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ __('addresses.close') }}</button>



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

    <!-- Notification Modal -->
    <div class="modal fade" id="notificationModal" tabindex="-1" aria-labelledby="notificationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="notificationModalLabel">{{ __('addresses.notification') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex align-items-center">
                        <div class="notification-icon me-3">
                            <div class="spinner-border text-primary" role="status"></div>
                        </div>
                        <div class="notification-message" id="notificationMessage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteAddressModal" tabindex="-1" aria-labelledby="deleteAddressModalLabel"
        aria-hidden="true">

    <div class="modal fade" id="newAddressModal" tabindex="-1" aria-labelledby="newAddressModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteAddressModalLabel">{{ __('addresses.delete') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('addresses.confirm_delete_address') }}</p>
                    <div class="alert alert-warning">
                        <strong id="deleteAddressLabel"></strong>
                    </div>
                    <p class="text-muted small mb-0">{{ __('addresses.this_action_cannot_be_undone') }}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('addresses.cancel') }}</button>
                    <button type="button" class="btn btn-danger"
                        id="confirmDeleteBtn">{{ __('addresses.delete') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {

            /* ===============================
             * LOAD ADDRESSES VIA AJAX
             * =============================== */
            function loadAddresses() {
                const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                const loadingElement = document.getElementById('addresses-loading');
                const containerElement = document.getElementById('addresses-container');
                
                // Show loading with shimmer
                if (loadingElement) {
                    loadingElement.style.opacity = '1';
                    loadingElement.style.display = 'block';
                }
                if (containerElement) {
                    containerElement.style.opacity = '0';
                    containerElement.style.display = 'none';
                }
                
                fetch('/addresses', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': token,
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.addresses) {
                        renderAddresses(data.addresses);
                    } else {
                        console.error('Failed to load addresses:', data);
                        showToast('Failed to load addresses', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error loading addresses:', error);
                    showToast('Error loading addresses', 'error');
                })
                .finally(() => {
                    // Smooth transition from loading to content
                    setTimeout(() => {
                        if (loadingElement) {
                            loadingElement.style.opacity = '0';
                            setTimeout(() => {
                                loadingElement.style.display = 'none';
                            }, 300);
                        }
                        if (containerElement) {
                            containerElement.style.opacity = '1';
                            containerElement.style.display = 'block';
                        }
                    }, 100);
                });
            }

            function reloadAddresses() {
                loadAddresses();
            }

            function renderAddresses(addresses) {
                const container = document.getElementById('addresses-container');
                if (!container) return;
                
                let html = '';
                
                addresses.forEach(address => {
                    html += `
                        <div class="border-bottom py-4">
                            <div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
                                <div class="d-flex align-items-center gap-3 me-4">
                                    <h2 class="h6 mb-0">${address.label}</h2>
                                    ${address.is_primary ? '<span class="badge text-bg-info rounded-pill">{{ __("addresses.primary") }}</span>' : ''}
                                </div>
                                <a class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed primaryAddressEditButton"
                                    data-address-id="${address.id}" href=".primary-address-${address.id}"
                                    data-bs-toggle="collapse" aria-expanded="false"
                                    aria-controls="primaryAddressPreview${address.id} primaryAddressEdit${address.id}">{{ __('addresses.edit') }}</a>
                            </div>
                            <div class="collapse primary-address-${address.id} show"
                                id="primaryAddressPreview${address.id}">
                                <ul class="list-unstyled fs-sm m-0">
                                    <li>${address.location}</li>
                                    <li>${address.address}</li>
                                  
                                </ul>
                            </div>
                            <div class="collapse primary-address-${address.id}" id="primaryAddressEdit${address.id}">
                                <div class="alert alert-danger d-none address-form-message" role="alert"></div>
                                <div class="alert alert-success d-none address-form-success" role="alert"></div>
                                <form class="row g-3 g-sm-4 needs-validation address-form" novalidate
                                    action="/addresses/${address.id}" method="POST">
                                    <input type="hidden" name="_method" value="PUT">
                                    <input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''}">
                                    

                                       <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">{{ __('addresses.label') }}</label>
                                            <input type="text" class="form-control edit-label" value="${address.label}" required>
                                            <div class="invalid-feedback">{{ __('addresses.please_enter_address') }}</div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">{{ __('addresses.name') }}</label>
                                            <input type="text" class="form-control edit-name" value="${address.name ?? ''}" required>
                                            <div class="invalid-feedback">{{ __('addresses.please_enter_name') }}</div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">{{ __('addresses.phone') }}</label>
                                            <input type="tel" class="form-control edit-phone" value="${address.phone ?? ''}" required>
                                            <div class="invalid-feedback">{{ __('addresses.please_enter_phone') }}</div>
                                        </div>
                                    </div>


                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">{{ __('addresses.province') }}</label>
                                            <select class="form-select province-select" required
                                                data-address-id="${address.id}"
                                                data-province-id="${address.province_id}"
                                                data-city-id="${address.city_id}"
                                                data-district-id="${address.district_id}"
                                                data-village-id="${address.subdistrict_id}">
                                                <option value="">{{ __('addresses.select_province') }}</option>
                                            </select>
                                            <div class="invalid-feedback">{{ __('addresses.please_select_province') }}</div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">{{ __('addresses.city') }}</label>
                                            <select class="form-select city-select" required data-address-id="${address.id}">
                                                <option value="">{{ __('addresses.select_city') }}</option>
                                            </select>
                                            <div class="invalid-feedback">{{ __('addresses.please_select_city') }}</div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">{{ __('addresses.district') }}</label>
                                            <select class="form-select district-select" required data-address-id="${address.id}">
                                                <option value="">{{ __('addresses.select_district') }}</option>
                                            </select>
                                            <div class="invalid-feedback">{{ __('addresses.please_select_district') }}</div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">{{ __('addresses.village') }}</label>
                                            <select class="form-select village-select" required data-address-id="${address.id}">
                                                <option value="">{{ __('addresses.select_village') }}</option>
                                            </select>
                                            <div class="invalid-feedback">{{ __('addresses.please_select_village') }}</div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">{{ __('addresses.zip_code') }}</label>
                                            <input type="text" class="form-control postal_code" value="${address.postal_code}" required>
                                            <div class="invalid-feedback">{{ __('addresses.please_enter_zip_code') }}</div>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="address-map-component">
                                            <!-- Hidden inputs for latitude and longitude -->
                                            <input type="hidden" name="latitude" id="latitude" value="${address.latitude ?? ''}" class="latitude address-latitude-input" step="0.000001">
                                            <input type="hidden" name="longitude" id="longitude" value="${address.longitude ?? ''}" class="longitude address-longitude-input" step="0.000001">

                                            <!-- Map interface -->
                                            <div class="position-relative">
                                                <label class="form-label">{{ __('addresses.select_location_on_map') }}</label>
                                                <div class="mb-3 position-relative">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control address-location-search" placeholder="{{ __('addresses.search_for_location') }}" autocomplete="off">
                                                        <button class="btn btn-outline-secondary address-search-btn" type="button">
                                                            <i class="ci-search"></i> {{ __('addresses.search') }}
                                                        </button>
                                                    </div>
                                                    <!-- Search suggestions dropdown -->
                                                    <div class="address-search-suggestions position-absolute w-100 bg-white border rounded-top-0 rounded-bottom shadow-sm" style="z-index: 1050; max-height: 200px; overflow-y: auto; display: none;">
                                                        <div class="p-2 text-muted small">{{ __('addresses.type_to_search') }}</div>
                                                    </div>
                                                </div>
                                                <div class="address-map-container" style="height: 400px; width: 100%; border-radius: 8px; overflow: hidden;"></div>
                                                <small class="text-muted">{{ __('addresses.drag_marker_to_adjust') }}</small>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="position-relative">
                                            <label class="form-label">{{ __('addresses.address') }}</label>
                                            <textarea class="form-control address-input" rows="3" required>${address.address}</textarea>
                                            <div class="invalid-feedback">{{ __('addresses.please_enter_address') }}</div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-check mb-0">
                                            <input type="checkbox" class="form-check-input " id="set-primary-${address.id}" ${address.is_primary ? 'checked' : ''}>
                                            <label class="form-check-label">{{ __('addresses.set_as_primary_address') }}</label>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12 d-flex justify-content-between">
                                        <div class="d-flex gap-3 pt-2 pt-sm-0">
                                            <button type="submit" class="btn btn-primary">{{ __('addresses.save_changes') }}</button>
                                            <button type="button" class="btn btn-secondary" data-bs-toggle="collapse"
                                                data-bs-target=".primary-address-${address.id}" aria-expanded="true"
                                                aria-controls="primaryAddressPreview${address.id} primaryAddressEdit${address.id}">{{ __('addresses.close') }}</button>
                                        </div>
                                        <button type="button" class="btn btn-danger delete-address-btn"
                                            data-address-id="${address.id}"
                                            data-address-label="${address.label}">{{ __('addresses.delete') }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    `;
                });
                
                // Add address button
                html += `
                    <div class="nav pt-4">
                        <a class="nav-link animate-underline fs-base px-0" href="#newAddressModal" data-bs-toggle="modal">
                            <i class="ci-plus fs-lg ms-n1 me-2"></i>
                            <span class="animate-target">{{ __('addresses.add_address') }}</span>
                        </a>
                    </div>
                `;
                
                container.innerHTML = html;
                
                // Initialize address forms after rendering
                initializeAddressForms();
            }

            function initializeAddressForms() {
                // Initialize province selects for each address
                document.querySelectorAll('.province-select').forEach(select => {
                    const addressId = select.dataset.addressId;
                    const provinceId = select.dataset.provinceId;
                    const cityId = select.dataset.cityId;
                    const districtId = select.dataset.districtId;
                    const villageId = select.dataset.villageId;
                    
                    // Load provinces and set initial values
                    loadProvinces(select, addressId, provinceId, cityId, districtId, villageId);
                });

                // Initialize map components (for dynamically generated content)
                document.querySelectorAll('.address-map-component').forEach(component => {
                    // Trigger initialization for this component
                    if (window.initializeAddressMap) {
                        const componentIndex = Date.now() + Math.random();
                        window.initializeAddressMap(component, componentIndex);
                    }
                });
            }

            // Load addresses on page load
            loadAddresses();

            /* ===============================
             * INIT EDIT BUTTON
             * =============================== */
            document.addEventListener('click', e => {
                const btn = e.target.closest('.primaryAddressEditButton');
                if (!btn) return;

                const addressId = btn.dataset.addressId;
                loadProvinces(addressId);
            });

            /* ===============================
             * PROVINCE
             * =============================== */
            function loadProvinces(addressId) {
                const province = document.querySelector(
                    `.province-select[data-address-id="${addressId}"]`
                );
                if (!province) return;

                const {
                    provinceId,
                    cityId,
                    districtId,
                    villageId
                } = province.dataset;

                destroyChoices(province);

                fetch('/addresses/provinces')
                    .then(r => r.json())
                    .then(({
                        data
                    }) => {
                        province.innerHTML =
                            `<option value="">{{ __('addresses.select_province') }}</option>`;

                        data.forEach(p => {
                            province.insertAdjacentHTML(
                                'beforeend',
                                `<option value="${p.id}" ${
                            String(p.id) === String(provinceId) ? 'selected' : ''
                        }>${p.name}</option>`
                            );
                        });

                        initChoices(province);

                        if (provinceId) {
                            loadCities(addressId, provinceId, cityId, districtId, villageId);
                        }
                    });
            }

            /* ===============================
             * CITY
             * =============================== */
            function loadCities(addressId, provinceId, cityId = null, districtId = null, villageId = null) {
                const city = document.querySelector(
                    `.city-select[data-address-id="${addressId}"]`
                );
                if (!city) return;

                destroyChoices(city);

                fetch(`/addresses/cities/${provinceId}`)
                    .then(r => r.json())
                    .then(({
                        data
                    }) => {
                        city.innerHTML =
                            `<option value="">{{ __('addresses.select_city') }}</option>`;

                        data.forEach(c => {
                            city.insertAdjacentHTML(
                                'beforeend',
                                `<option value="${c.id}" ${
                            String(c.id) === String(cityId) ? 'selected' : ''
                        }>${c.name}</option>`
                            );
                        });

                        initChoices(city);

                        if (cityId) {
                            loadDistricts(addressId, cityId, districtId, villageId);
                        }
                    });
            }

            /* ===============================
             * DISTRICT
             * =============================== */
            function loadDistricts(addressId, cityId, districtId = null, villageId = null) {
                const district = document.querySelector(
                    `.district-select[data-address-id="${addressId}"]`
                );
                if (!district) return;

                destroyChoices(district);

                fetch(`/addresses/districts/${cityId}`)
                    .then(r => r.json())
                    .then(({
                        data
                    }) => {
                        district.innerHTML =
                            `<option value="">{{ __('addresses.select_district') }}</option>`;

                        data.forEach(d => {
                            district.insertAdjacentHTML(
                                'beforeend',
                                `<option value="${d.id}" ${
                            String(d.id) === String(districtId) ? 'selected' : ''
                        }>${d.name}</option>`
                            );
                        });

                        initChoices(district);

                        if (districtId) {
                            loadVillages(addressId, districtId, villageId);
                        }
                    });
            }

            /* ===============================
             * VILLAGE
             * =============================== */
            function loadVillages(addressId, districtId, villageId = null) {
                const village = document.querySelector(
                    `.village-select[data-address-id="${addressId}"]`
                );
                if (!village) return;

                destroyChoices(village);

                fetch(`/addresses/villages/${districtId}`)
                    .then(r => r.json())
                    .then(({
                        data
                    }) => {
                        village.innerHTML =
                            `<option value="">{{ __('addresses.select_village') }}</option>`;

                        data.forEach(v => {
                            village.insertAdjacentHTML(
                                'beforeend',
                                `<option value="${v.id}" ${
                            String(v.id) === String(villageId) ? 'selected' : ''
                        }>${v.name}</option>`
                            );
                        });

                        initChoices(village);
                    });
            }

            /* ===============================
             * CHANGE HANDLERS
             * =============================== */
            document.addEventListener('change', e => {
                const el = e.target;
                const addressId = el.dataset.addressId;

                if (!addressId) return;

                const city = document.querySelector(
                    `.city-select[data-address-id="${addressId}"]`
                );
                const district = document.querySelector(
                    `.district-select[data-address-id="${addressId}"]`
                );
                const village = document.querySelector(
                    `.village-select[data-address-id="${addressId}"]`
                );

                // 🔄 PROVINCE CHANGED
                if (el.classList.contains('province-select')) {
                    resetSelect(city, "{{ __('addresses.select_city') }}");
                    resetSelect(district, "{{ __('addresses.select_district') }}");
                    resetSelect(village, "{{ __('addresses.select_village') }}");

                    if (el.value) {
                        loadCities(addressId, el.value);
                    }
                }

                // 🔄 CITY CHANGED
                if (el.classList.contains('city-select')) {
                    resetSelect(district, "{{ __('addresses.select_district') }}");
                    resetSelect(village, "{{ __('addresses.select_village') }}");

                    if (el.value) {
                        loadDistricts(addressId, el.value);
                    }
                }

                // 🔄 DISTRICT CHANGED
                if (el.classList.contains('district-select')) {
                    resetSelect(village, "{{ __('addresses.select_village') }}");

                    if (el.value) {
                        loadVillages(addressId, el.value);
                    }
                }
            });


            function resetSelect(el, placeholder) {
                if (!el) return;

                // Destroy choices kalau ada
                if (el._choices) {
                    el._choices.destroy();
                    el._choices = null;
                }

                // Reset option
                el.innerHTML = `<option value="">${placeholder}</option>`;

                // 🔥 JANGAN init Choices kalau belum ada
                if (typeof window.Choices === 'undefined') return;

                el._choices = new Choices(el, {
                    searchEnabled: true,
                    shouldSort: false,
                    itemSelectText: ''
                });
            }


            /* ===============================
             * NEW ADDRESS MODAL
             * =============================== */
            const newAddressModal = document.getElementById('newAddressModal');
            if (newAddressModal) {
                newAddressModal.addEventListener('show.bs.modal', () => {
                    loadNewProvinces();
                });
            }

            function loadNewProvinces() {
                const province = document.querySelector('.new-province-select');
                if (!province) return;

                destroyChoices(province);

                fetch('/addresses/provinces')
                    .then(r => r.json())
                    .then(({
                        data
                    }) => {
                        province.innerHTML = `<option value="">{{ __('addresses.select_province') }}</option>`;
                        data.forEach(p => {
                            province.insertAdjacentHTML('beforeend',
                                `<option value="${p.id}">${p.name}</option>`);
                        });
                        initChoices(province);
                    });
            }

            function loadNewCities(provinceId) {
                const city = document.querySelector('.new-city-select');
                if (!city) return;

                destroyChoices(city);

                fetch(`/addresses/cities/${provinceId}`)
                    .then(r => r.json())
                    .then(({
                        data
                    }) => {
                        city.innerHTML = `<option value="">{{ __('addresses.select_city') }}</option>`;
                        data.forEach(c => {
                            city.insertAdjacentHTML('beforeend',
                                `<option value="${c.id}">${c.name}</option>`);
                        });
                        initChoices(city);
                    });
            }

            function loadNewDistricts(cityId) {
                const district = document.querySelector('.new-district-select');
                if (!district) return;

                destroyChoices(district);

                fetch(`/addresses/districts/${cityId}`)
                    .then(r => r.json())
                    .then(({
                        data
                    }) => {
                        district.innerHTML = `<option value="">{{ __('addresses.select_district') }}</option>`;
                        data.forEach(d => {
                            district.insertAdjacentHTML('beforeend',
                                `<option value="${d.id}">${d.name}</option>`);
                        });
                        initChoices(district);
                    });
            }

            function loadNewVillages(districtId) {
                const village = document.querySelector('.new-village-select');
                if (!village) return;

                destroyChoices(village);

                fetch(`/addresses/villages/${districtId}`)
                    .then(r => r.json())
                    .then(({
                        data
                    }) => {
                        village.innerHTML = `<option value="">{{ __('addresses.select_village') }}</option>`;
                        data.forEach(v => {
                            village.insertAdjacentHTML('beforeend',
                                `<option value="${v.id}">${v.name}</option>`);
                        });
                        initChoices(village);
                    });
            }

            // New address form change handlers
            document.addEventListener('change', e => {
                const el = e.target;

                // 🔄 PROVINCE CHANGED
                if (el.classList.contains('new-province-select')) {
                    resetSelect(document.querySelector('.new-city-select'),
                        "{{ __('addresses.select_city') }}");
                    resetSelect(document.querySelector('.new-district-select'),
                        "{{ __('addresses.select_district') }}");
                    resetSelect(document.querySelector('.new-village-select'),
                        "{{ __('addresses.select_village') }}");

                    if (el.value) {
                        loadNewCities(el.value);
                    }
                }

                // 🔄 CITY CHANGED
                if (el.classList.contains('new-city-select')) {
                    resetSelect(document.querySelector('.new-district-select'),
                        "{{ __('addresses.select_district') }}");
                    resetSelect(document.querySelector('.new-village-select'),
                        "{{ __('addresses.select_village') }}");

                    if (el.value) {
                        loadNewDistricts(el.value);
                    }
                }

                // 🔄 DISTRICT CHANGED
                if (el.classList.contains('new-district-select')) {
                    resetSelect(document.querySelector('.new-village-select'),
                        "{{ __('addresses.select_village') }}");

                    if (el.value) {
                        loadNewVillages(el.value);
                    }
                }
            });

            /* ===============================
             * DELETE ADDRESS
             * =============================== */
            let deleteAddressId = null;
            let deleteModalInstance = null;

            document.addEventListener('click', e => {
                const deleteBtn = e.target.closest('.delete-address-btn');
                if (!deleteBtn) return;

                e.preventDefault(); // Prevent any default action
                e.stopPropagation(); // Stop event propagation

                deleteAddressId = deleteBtn.dataset.addressId;
                const addressLabel = deleteBtn.dataset.addressLabel;

                console.log('Delete button clicked:', {
                    deleteAddressId,
                    addressLabel
                });

                // Initialize modal if not already done
                if (!deleteModalInstance) {
                    console.log('Initializing modal...');
                    console.log('Bootstrap available:', typeof bootstrap !== 'undefined');
                    console.log('Bootstrap.Modal available:', typeof bootstrap !== 'undefined' && bootstrap.Modal);
                    
                    const deleteModal = document.getElementById('deleteAddressModal');
                    console.log('Modal element found:', !!deleteModal);
                    
                    if (deleteModal && typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                        deleteModalInstance = new bootstrap.Modal(deleteModal);
                        console.log('Modal instance created successfully');
                    } else {
                        console.error('Modal initialization failed:', {
                            modalExists: !!deleteModal,
                            bootstrapExists: typeof bootstrap !== 'undefined',
                            modalClassExists: typeof bootstrap !== 'undefined' && bootstrap.Modal
                        });
                    }
                }

                // Set address label in modal
                const labelElement = document.getElementById('deleteAddressLabel');
                if (labelElement) {
                    labelElement.textContent = addressLabel;
                }

                // Show modal
                if (deleteModalInstance) {
                    console.log('Showing delete modal');
                    deleteModalInstance.show();
                } else {
                    console.error('Modal instance not available');
                    // Fallback to confirm dialog
                    if (confirm(`{{ __('addresses.confirm_delete_address') }}\n${addressLabel}`)) {
                        deleteAddress(deleteAddressId);
                    }
                }
            });

            // Handle confirm delete button click
            document.getElementById('confirmDeleteBtn').addEventListener('click', () => {
                console.log('Confirm delete clicked:', deleteAddressId);
                if (deleteAddressId) {
                    deleteAddress(deleteAddressId);
                    if (deleteModalInstance) {
                        deleteModalInstance.hide();
                    }
                }
            });

            function deleteAddress(addressId) {
                const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

                fetch(`/addresses/${addressId}`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': token,
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(result => {
                        console.log(result);
                        if (result.success) {
                            // Show success message and reload page
                            showNotification(result.message, 'success');
                            setTimeout(() => {
                                reloadAddresses();
                            }, 1000);
                        } else {
                            // Show error message
                            showNotification(result.message || '{{ __('addresses.error_saving_address') }}',
                                'error');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showNotification('{{ __('addresses.error_saving_address') }}', 'error');
                    })
                    .finally(() => {
                        deleteAddressId = null;
                    });
            }

            /* ===============================
             * FORM SUBMISSION
             * =============================== */
            document.addEventListener('submit', e => {
                const form = e.target;
                if (!form.classList.contains('address-form') && !form.classList.contains(
                        'new-address-form')) return;

                e.preventDefault();

                const formData = new FormData(form);
                const submitBtn = form.querySelector('button[type="submit"]');
                const originalText = submitBtn.textContent;

                // Show loading state
                submitBtn.disabled = true;
                submitBtn.textContent = '{{ __('addresses.saving') }}...';

                // Determine if this is a new address or edit form
                const isNewAddress = form.classList.contains('new-address-form');
                const addressId = isNewAddress ? null : form.querySelector('[data-address-id]').dataset
                    .addressId;

                // Prepare form data for AJAX submission
                const submitData = {};
                
                // Get CSRF token
                const tokenInput = form.querySelector('input[name="_token"]');
                if (tokenInput) submitData._token = tokenInput.value;


                // Get Name
                const nameInput = isNewAddress ?
                    form.querySelector('#new-name') : form.querySelector('.edit-name');
                if (nameInput) submitData.name = nameInput.value;
                
                // Get Phone
                const phoneInput = isNewAddress ?
                    form.querySelector('.new-phone') : form.querySelector('.edit-phone');
                if (phoneInput) submitData.phone = phoneInput.value;
                
                // Get Label
                const labelInput = isNewAddress ?
                    form.querySelector('#new-label') : form.querySelector('.edit-label');
                if (labelInput) submitData.label = labelInput.value;
                
                // Get province ID
                const provinceSelect = isNewAddress ?
                    form.querySelector('.new-province-select') : form.querySelector('.province-select');
                if (provinceSelect) submitData.province_id = provinceSelect.value;
                
                // Get city ID
                const citySelect = isNewAddress ?
                    form.querySelector('.new-city-select') : form.querySelector('.city-select');
                if (citySelect) submitData.city_id = citySelect.value;
                
                // Get district ID
                const districtSelect = isNewAddress ?
                    form.querySelector('.new-district-select') : form.querySelector('.district-select');
                if (districtSelect) submitData.district_id = districtSelect.value;
                
                // Get subdistrict ID
                const villageSelect = isNewAddress ?
                    form.querySelector('.new-village-select') : form.querySelector('.village-select');
                if (villageSelect) submitData.subdistrict_id = villageSelect.value;
                
                // Get postal code
                const zipInput = isNewAddress ?
                    form.querySelector('.new-zip') : form.querySelector('.postal_code');
                if (zipInput) submitData.postal_code = zipInput.value;
                
                // Get latitude
                const latitudeInput = isNewAddress ?
                    form.querySelector('.new-latitude') : form.querySelector('.latitude');
                if (latitudeInput) submitData.latitude = latitudeInput.value;
                
                // Get longitude
                const longitudeInput = isNewAddress ?
                    form.querySelector('.new-longitude') : form.querySelector('.longitude');
                if (longitudeInput) submitData.longitude = longitudeInput.value;
                
                 // Get address
                const addressInput = isNewAddress ?
                    form.querySelector('#new-address') : form.querySelector('.address-input');
                if (addressInput) submitData.address = addressInput.value;
                
                // Get primary checkbox
                const primaryCheckbox = isNewAddress ?
                    form.querySelector('#set-primary-new') : form.querySelector('input[id^="set-primary-"]');
                if (primaryCheckbox) submitData.is_primary = primaryCheckbox.checked ? '1' : '0';

                if (!isNewAddress) {
                    submitData._method = 'PUT';
                }

                fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: new URLSearchParams(submitData).toString()
                    })
                    .then(response => response.json())
                    .then(result => {
                        if (result.success) {
                            // Show success message in form
                            const successElement = form.querySelector(isNewAddress ?
                                '.new-address-form-success' : '.address-form-success');
                            const errorElement = form.querySelector(isNewAddress ?
                                '.new-address-form-message' : '.address-form-message');

                            if (successElement) {
                                successElement.textContent = result.message;
                                successElement.classList.remove('d-none');
                            }
                            if (errorElement) {
                                errorElement.classList.add('d-none');
                            }

                            // Handle success based on form type
                            if (isNewAddress) {
                                // Close modal and reload page
                                setTimeout(() => {
                                    // Try multiple methods to close the modal
                                    try {
                                        // Method 1: Using Bootstrap 5 API if available
                                        if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                                            const modal = bootstrap.Modal.getInstance(newAddressModal);
                                            if (modal) modal.hide();
                                        } else {
                                            // Method 2: Using jQuery if available
                                            if (typeof $ !== 'undefined') {
                                                $(newAddressModal).modal('hide');
                                            } else {
                                                // Method 3: Using native DOM manipulation
                                                newAddressModal.style.display = 'none';
                                                document.body.classList.remove('modal-open');
                                                const backdrop = document.querySelector('.modal-backdrop');
                                                if (backdrop) backdrop.remove();
                                            }
                                        }
                                    } catch (error) {
                                        console.warn('Error closing modal:', error);
                                        // Fallback: hide modal manually
                                        newAddressModal.style.display = 'none';
                                    }
                                    
                                    // Refresh page after successful submission
                                    setTimeout(() => {
                                        window.location.reload();
                                    }, 500);
                                }, 1500);
                            } else {
                                // Close the edit form and show preview after delay
                                setTimeout(() => {
                                    const previewElement = document.getElementById(
                                        `primaryAddressPreview${addressId}`);
                                    const editElement = document.getElementById(
                                        `primaryAddressEdit${addressId}`);

                                    if (previewElement && editElement) {
                                        previewElement.classList.add('show');
                                        editElement.classList.remove('show');
                                    }

                                    // Reload page to show updated data
                                    reloadAddresses();
                                }, 2000);
                            }
                            
                        } else {
                            // Show error message in form
                            const errorElement = form.querySelector(isNewAddress ?
                                '.new-address-form-message' : '.address-form-message');
                            const successElement = form.querySelector(isNewAddress ?
                                '.new-address-form-success' : '.address-form-success');

                            if (errorElement) {
                                errorElement.textContent = result.message ||
                                    '{{ __('addresses.error_saving_address') }}';
                                errorElement.classList.remove('d-none');
                            }
                            if (successElement) {
                                successElement.classList.add('d-none');
                            }
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);

                        // Show error message in form
                        const errorElement = form.querySelector(isNewAddress ?
                            '.new-address-form-message' : '.address-form-message');
                        const successElement = form.querySelector(isNewAddress ?
                            '.new-address-form-success' : '.address-form-success');

                        if (errorElement) {
                            errorElement.textContent = '{{ __('addresses.error_saving_address') }}';
                            errorElement.classList.remove('d-none');
                        }
                        if (successElement) {
                            successElement.classList.add('d-none');
                        }
                    })
                    .finally(() => {
                        // Restore button state
                        submitBtn.disabled = false;
                        submitBtn.textContent = originalText;
                    });
            });

            // Toast notification helper
            function showToast(message, type = 'info') {
                console.log('Showing toast:', message, type);
                
                // Create toast container if it doesn't exist
                let toastContainer = document.getElementById('toast-container');
                if (!toastContainer) {
                    toastContainer = document.createElement('div');
                    toastContainer.id = 'toast-container';
                    toastContainer.className = 'position-fixed top-0 end-0 p-3';
                    toastContainer.style.zIndex = '1055';
                    document.body.appendChild(toastContainer);
                }

                const toastId = 'toast-' + Date.now();
                const toastHtml = `
                    <div id="${toastId}" class="toast align-items-center text-white bg-${type === 'success' ? 'success' : type === 'error' ? 'danger' : 'primary'} border-0" role="alert">
                        <div class="d-flex">
                            <div class="toast-body">
                                ${message}
                            </div>
                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                        </div>
                    </div>
                `;

                toastContainer.insertAdjacentHTML('beforeend', toastHtml);

                // Show toast using Bootstrap if available, otherwise fallback to simple alert
                const toastElement = document.getElementById(toastId);
                if (typeof bootstrap !== 'undefined' && bootstrap.Toast) {
                    try {
                        const toast = new bootstrap.Toast(toastElement, {
                            autohide: true,
                            delay: 3000
                        });
                        toast.show();
                        
                        // Remove toast element after hidden
                        toastElement.addEventListener('hidden.bs.toast', () => {
                            toastElement.remove();
                        });
                    } catch (error) {
                        console.error('Bootstrap Toast error:', error);
                        // Fallback to simple notification
                        toastElement.style.display = 'block';
                        toastElement.style.position = 'fixed';
                        toastElement.style.top = '20px';
                        toastElement.style.right = '20px';
                        toastElement.style.zIndex = '1055';
                        
                        setTimeout(() => {
                            toastElement.style.display = 'none';
                            toastElement.remove();
                        }, 3000);
                    }
                } else {
                    // Fallback for when Bootstrap is not available
                    console.warn('Bootstrap Toast not available, using fallback');
                    alert(message);
                }
            }

            // Toast notification helper (deprecated - use showNotification instead)
            function showToast(message, type = 'info') {
                console.warn('showToast is deprecated, use showNotification instead');
                showNotification(message, type);
            }

            /* ===============================
             * HELPERS
             * =============================== */
            function destroyChoices(el) {
                if (el._choices) {
                    el._choices.destroy();
                    el._choices = null;
                }
            }

            function initChoices(el) {
                if (!window.Choices) return;
                el._choices = new Choices(el, {
                    searchEnabled: true,
                    shouldSort: false,
                    itemSelectText: '',
                    noResultsText: 'No results found'
                });
            }
        });
    </script>
@endsection