thrillwiki_django_no_react/static/js/location-search.js

document.addEventListener('DOMContentLoaded', function() {
    const useLocationBtn = document.getElementById('use-my-location');
    const latInput = document.getElementById('lat-input');
    const lngInput = document.getElementById('lng-input');
    const locationInput = document.getElementById('location-input');

    if (useLocationBtn && 'geolocation' in navigator) {
        useLocationBtn.addEventListener('click', function() {
            this.textContent = '📍 Getting location...';
            this.disabled = true;
            
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    latInput.value = position.coords.latitude;
                    lngInput.value = position.coords.longitude;
                    locationInput.value = `${position.coords.latitude.toFixed(6)}, ${position.coords.longitude.toFixed(6)}`;
                    useLocationBtn.textContent = '✅ Location set';
                    setTimeout(() => {
                        useLocationBtn.textContent = '📍 Use My Location';
                        useLocationBtn.disabled = false;
                    }, 2000);
                },
                function(error) {
                    useLocationBtn.textContent = '❌ Location failed';
                    console.error('Geolocation error:', error);
                    setTimeout(() => {
                        useLocationBtn.textContent = '📍 Use My Location';
                        useLocationBtn.disabled = false;
                    }, 2000);
                }
            );
        });
    } else if (useLocationBtn) {
        useLocationBtn.style.display = 'none';
    }

    // Autocomplete for location search
    if (locationInput) {
        locationInput.addEventListener('input', function() {
            const query = this.value;
            if (query.length < 3) {
                return;
            }

            fetch(`/search/location/suggestions/?q=${query}`)
                .then(response => response.json())
                .then(data => {
                    // This is a simplified example. A more robust solution would use a library like Awesomplete or build a custom dropdown.
                    console.log('Suggestions:', data.suggestions);
                })
                .catch(error => console.error('Error fetching suggestions:', error));
        });
    }
});