function initAutocomplete() {
    const input = document.getElementById('city');
    const options = {
        types: ['(cities)'],
        componentRestrictions: { country: ['us', 'ca'] }
    };
    const autocomplete = new google.maps.places.Autocomplete(input, options);

    // Optional: Event listener to capture the selected city
    autocomplete.addListener('place_changed', function () {
        const place = autocomplete.getPlace();
        const addressComponents = place.address_components;


        // Extract city name
        const city = addressComponents.find(component =>
            component.types.includes("locality")
        )?.long_name;

        const state = addressComponents.find(component =>
            component.types.includes("administrative_area_level_1")
        )?.long_name;

        const country = addressComponents.find(component =>
            component.types.includes("country")
        )?.long_name;

        const postalCode = addressComponents.find(component =>
            component.types.includes("postal_code")
        )?.long_name;

        console.log({ city, state, country, postalCode });

        if (city) {
            // Display only the city name in the input field
            $('#city').val(city);
            $('#state').val(state);
            $('#country').val(country);
            $('#zip_code').val(postalCode);
        } else {
            alert("City not found!");
        }

    });


}

// Initialize the autocomplete when the page loads
document.addEventListener("DOMContentLoaded", initAutocomplete);