Vacancy Hero

document.addEventListener('DOMContentLoaded', function () {
    const nameInputs = [
        document.getElementById('vacancy-homepage-search-name'),
        ...document.querySelectorAll('.vn input'),
    ].filter(Boolean);

    const locationInputs = [
        document.getElementById('vacancy-homepage-search-location'),
        ...document.querySelectorAll('.vl input'),
        document.querySelector('.location-input-wrapper input'),
    ].filter(Boolean);

    const websiteId = document.body.dataset.websiteId;

    if (nameInputs.length === 0 && locationInputs.length === 0) {
        return;
    }

    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    function createAutocompleteDropdown(inputElement) {
        const dropdown = document.createElement('div');
        dropdown.className = 'autocomplete-dropdown hidden';

        const parent = inputElement.closest('.atm-form-input');
        if (parent) {
            parent.style.position = 'relative';
            parent.appendChild(dropdown);
        }

        return dropdown;
    }

    function showSuggestions(inputElement, dropdown, suggestions) {
        if (!suggestions || suggestions.length === 0) {
            dropdown.classList.add('hidden');
            return;
        }

        dropdown.innerHTML = '';
        suggestions.forEach((suggestion) => {
            const item = document.createElement('div');
            item.className = 'autocomplete-item';
            item.tabIndex = 0;
            item.textContent = suggestion;

            item.addEventListener('click', () => {
                inputElement.value = suggestion;
                inputElement.classList.add('filled');
                dropdown.classList.add('hidden');
            });

            item.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    inputElement.value = suggestion;
                    inputElement.classList.add('filled');
                    dropdown.classList.add('hidden');
                }
            });

            dropdown.appendChild(item);
        });

        dropdown.classList.remove('hidden');
    }

    nameInputs.forEach((nameInput) => {
        const nameDropdown = createAutocompleteDropdown(nameInput);

        const fetchVacancies = debounce(async (query) => {
            if (query.length < 2) {
                nameDropdown.classList.add('hidden');
                return;
            }

            try {
                const url = `/umbraco/surface/AutocompleteSurface/GetVacancies?query=${encodeURIComponent(
                    query
                )}&websiteId=${websiteId}`;

                const response = await fetch(url);

                if (!response.ok) {
                    nameDropdown.classList.add('hidden');
                    return;
                }

                const suggestions = await response.json();
                showSuggestions(nameInput, nameDropdown, suggestions);
            } catch (error) {
                nameDropdown.classList.add('hidden');
            }
        }, 1000);

        nameInput.addEventListener('input', (e) => {
            fetchVacancies(e.target.value);
        });

        nameInput.addEventListener('focus', (e) => {
            if (e.target.value.length >= 2) {
                fetchVacancies(e.target.value);
            }
        });

        document.addEventListener('click', (e) => {
            if (
                !nameInput.contains(e.target) &&
                !nameDropdown.contains(e.target)
            ) {
                nameDropdown.classList.add('hidden');
            }
        });
    });

    locationInputs.forEach((locationInput) => {
        const locationDropdown = createAutocompleteDropdown(locationInput);

        const fetchPlaces = debounce(async (query) => {
            if (query.length < 2) {
                locationDropdown.classList.add('hidden');
                return;
            }

            try {
                const url = `/umbraco/surface/AutocompleteSurface/GetPlaces?textInput=${encodeURIComponent(
                    query
                )}`;

                const response = await fetch(url);

                if (!response.ok) {
                    locationDropdown.classList.add('hidden');
                    return;
                }

                const suggestions = await response.json();

                if (Array.isArray(suggestions) && suggestions.length > 0) {
                    showSuggestions(
                        locationInput,
                        locationDropdown,
                        suggestions
                    );
                } else {
                    locationDropdown.classList.add('hidden');
                }
            } catch (error) {
                locationDropdown.classList.add('hidden');
            }
        }, 1000);

        locationInput.addEventListener('input', (e) => {
            fetchPlaces(e.target.value);
        });

        locationInput.addEventListener('focus', (e) => {
            if (e.target.value.length >= 2) {
                fetchPlaces(e.target.value);
            }
        });

        document.addEventListener('click', (e) => {
            if (
                !locationInput.contains(e.target) &&
                !locationDropdown.contains(e.target)
            ) {
                locationDropdown.classList.add('hidden');
            }
        });
    });

    // Category toggle button functionality for mobile
    const categoryToggleBtn = document.querySelector('[data-category-toggle]');
    if (categoryToggleBtn) {
        const mobileDropdown = document.querySelector(
            '[data-mobile-category-dropdown]'
        );

        if (mobileDropdown) {
            // Toggle dropdown on button click
            categoryToggleBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                mobileDropdown.classList.toggle('is-open');
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', (e) => {
                if (
                    !mobileDropdown.contains(e.target) &&
                    !categoryToggleBtn.contains(e.target)
                ) {
                    mobileDropdown.classList.remove('is-open');
                }
            });

            // Close dropdown after selecting a category
            const radioButtons = mobileDropdown.querySelectorAll(
                'input[type="radio"]'
            );
            radioButtons.forEach((radio) => {
                radio.addEventListener('change', () => {
                    setTimeout(() => {
                        mobileDropdown.classList.remove('is-open');
                    }, 200);
                });
            });
        }
    }

    // Location button functionality
    const locationButtons = document.querySelectorAll(
        '.location-btn .atm-button-primary, .location-btn button'
    );
    locationButtons.forEach((btn) => {
        btn.addEventListener('click', function (e) {
            e.preventDefault();

            if (!navigator.geolocation) {
                alert('Geolocation wordt niet ondersteund door uw browser');
                return;
            }

            // Find the location input - look for the closest location input in the form
            const form = btn.closest('form');
            const locationInput = form
                ? form.querySelector(
                      '#vacancy-homepage-search-location, .vl input, .location-input-wrapper input'
                  )
                : null;

            if (!locationInput) {
                console.error('Location input not found');
                return;
            }

            btn.disabled = true;

            navigator.geolocation.getCurrentPosition(
                function (position) {
                    const lat = position.coords.latitude;
                    const lon = position.coords.longitude;

                    // Gebruik reverse geocoding API (Nominatim) om adres te krijgen
                    fetch(
                        `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`
                    )
                        .then((response) => response.json())
                        .then((data) => {
                            const address = data.address;
                            let locationParts = [];

                            // Straat en huisnummer
                            if (address.road) {
                                let street = address.road;
                                if (address.house_number) {
                                    street += ' ' + address.house_number;
                                }
                                locationParts.push(street);
                            }

                            // Postcode en plaats
                            let cityPart = '';
                            if (address.postcode) {
                                cityPart = address.postcode;
                            }
                            if (
                                address.city ||
                                address.town ||
                                address.village
                            ) {
                                const city =
                                    address.city ||
                                    address.town ||
                                    address.village;
                                cityPart = cityPart
                                    ? cityPart + ' ' + city
                                    : city;
                            }
                            if (cityPart) {
                                locationParts.push(cityPart);
                            }

                            const locationString = locationParts.join(', ');

                            locationInput.value = locationString;
                            locationInput.classList.add('filled');
                            locationInput.dispatchEvent(
                                new Event('input', { bubbles: true })
                            );

                            btn.disabled = false;
                        })
                        .catch(function (error) {
                            console.error('Fout bij ophalen adres:', error);
                            locationInput.value =
                                lat.toFixed(6) + ', ' + lon.toFixed(6);
                            locationInput.classList.add('filled');
                            btn.disabled = false;
                        });
                },
                function (error) {
                    let errorMsg = 'Kon locatie niet ophalen';
                    switch (error.code) {
                        case error.PERMISSION_DENIED:
                            errorMsg = 'Toegang tot locatie geweigerd';
                            break;
                        case error.POSITION_UNAVAILABLE:
                            errorMsg = 'Locatie informatie niet beschikbaar';
                            break;
                        case error.TIMEOUT:
                            errorMsg = 'Timeout bij ophalen locatie';
                            break;
                    }
                    alert(errorMsg);
                    btn.disabled = false;
                }
            );
        });
    });
});