document.addEventListener('DOMContentLoaded', () => {
    const countryInput = document.querySelector('[name="country"]');
    const regionInput = document.querySelector('[name="region"]');
    const cityInput = document.querySelector('[name="city"]');

    if (!countryInput || !regionInput || !cityInput) return;

    // Update regions when country changes
    countryInput.addEventListener('change', () => {
        const country = countryInput.value;
        if (country) {
            updateRegions(country);
            // Clear city when country changes
            cityInput.innerHTML = '<option value="">Select a city</option>';
        }
    });

    // Update cities when region changes
    regionInput.addEventListener('change', () => {
        const country = countryInput.value;
        const region = regionInput.value;
        if (country && region) {
            updateCities(country, region);
        }
    });

    function updateRegions(country) {
        fetch(`/location/regions/?country=${encodeURIComponent(country)}`)
            .then(response => response.json())
            .then(data => {
                regionInput.innerHTML = '<option value="">Select a region</option>';
                data.regions.forEach(region => {
                    const option = new Option(region, region);
                    regionInput.add(option);
                });
            });
    }

    function updateCities(country, region) {
        fetch(`/location/cities/?country=${encodeURIComponent(country)}&region=${encodeURIComponent(region)}`)
            .then(response => response.json())
            .then(data => {
                cityInput.innerHTML = '<option value="">Select a city</option>';
                data.cities.forEach(city => {
                    const option = new Option(city, city);
                    cityInput.add(option);
                });
            });
    }
});