36584-vm/assets/js/main.js

document.getElementById('suggestion-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const query = document.getElementById('query').value;
    const persona = document.getElementById('persona').value;
    const suggestionCard = document.getElementById('suggestion-card');
    const loading = document.getElementById('loading');
    const errorMessage = document.getElementById('error-message');
    const errorText = document.getElementById('error-text');
    const suggestionImage = document.getElementById('suggestion-image');
    const suggestionTitle = document.getElementById('suggestion-title');
    const suggestionText = document.getElementById('suggestion-text');
    const funFact = document.getElementById('fun-fact');
    const historySection = document.getElementById('history-section');
    const historyList = document.getElementById('history-list');
    const itinerarySection = document.getElementById('itinerary-section');
    const itineraryList = document.getElementById('itinerary-list');
    const mapElement = document.getElementById('map');

    const suggestionHistory = [];
    let map;

    const funFacts = [
        "Poland is home to the world's largest castle, Malbork Castle.",
        "The name \"Poland\" (Polska) originates from the Polanie tribe, meaning \"people living in open fields.\"",
        "Poland has 17 Nobel Prize winners, including four for Peace and five for Literature.",
        "The Polish alphabet consists of 32 letters.",
        "Marie Curie, the pioneering scientist, was Polish.",
        "Poland is the world's biggest exporter of amber.",
        "The city of Wrocław has a network of over 300 small bronze statues of dwarves (krasnale).",
        "Poland's Białowieża Forest is one of the last and largest remaining parts of the immense primeval forest that once stretched across the European Plain."
    ];

    let funFactInterval;

    suggestionCard.style.display = 'none';
    errorMessage.style.display = 'none';
    loading.style.display = 'block';
    mapElement.style.display = 'none';

    function showRandomFunFact() {
        const randomIndex = Math.floor(Math.random() * funFacts.length);
        funFact.textContent = funFacts[randomIndex];
    }

    showRandomFunFact();
    funFactInterval = setInterval(showRandomFunFact, 3000);

    function showError(message) {
        errorText.textContent = message;
        errorMessage.style.display = 'block';
        loading.style.display = 'none';
        clearInterval(funFactInterval);
    }

    function updateHistory() {
        historyList.innerHTML = '';
        suggestionHistory.slice(0, 5).forEach(item => {
            const a = document.createElement('a');
            a.href = '#';
            a.className = 'list-group-item list-group-item-action';
            a.textContent = item.title;
            a.onclick = (e) => {
                e.preventDefault();
                suggestionImage.src = item.image;
                suggestionTitle.textContent = item.title;
                suggestionText.textContent = item.description;
                
                if (item.itinerary) {
                    itineraryList.innerHTML = '';
                    item.itinerary.forEach(day => {
                        const li = document.createElement('li');
                        li.className = 'list-group-item';
                        li.innerHTML = `<b>Day ${day.day}:</b> ${day.activities.join(', ')}`;
                        itineraryList.appendChild(li);
                    });
                    itinerarySection.style.display = 'block';
                } else {
                    itinerarySection.style.display = 'none';
                }

                if (item.location && item.location.lat && item.location.lng) {
                    mapElement.style.display = 'block';
                    if (!map) {
                        map = L.map('map').setView([item.location.lat, item.location.lng], 13);
                        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                        }).addTo(map);
                    } else {
                        map.setView([item.location.lat, item.location.lng], 13);
                    }
                    L.marker([item.location.lat, item.location.lng]).addTo(map)
                        .bindPopup(item.title)
                        .openPopup();
                } else {
                    mapElement.style.display = 'none';
                }

                suggestionCard.style.display = 'block';
            };
            historyList.appendChild(a);
        });
        historySection.style.display = suggestionHistory.length > 0 ? 'block' : 'none';
    }

    fetch('api/index.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ query: query, persona: persona })
    })
    .then(response => response.json())
    .then(data => {
        clearInterval(funFactInterval);
        if (data.error) {
            showError(data.error);
            return;
        }

        suggestionImage.src = data.image;
        suggestionTitle.textContent = data.title;
        suggestionText.textContent = data.description;

        if (data.itinerary) {
            itineraryList.innerHTML = '';
            data.itinerary.forEach(day => {
                const li = document.createElement('li');
                li.className = 'list-group-item';
                li.innerHTML = `<b>Day ${day.day}:</b> ${day.activities.join(', ')}`;
                itineraryList.appendChild(li);
            });
            itinerarySection.style.display = 'block';
        } else {
            itinerarySection.style.display = 'none';
        }

        if (data.location && data.location.lat && data.location.lng) {
            mapElement.style.display = 'block';
            if (!map) {
                map = L.map('map').setView([data.location.lat, data.location.lng], 13);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);
            } else {
                map.setView([data.location.lat, data.location.lng], 13);
            }
            L.marker([data.location.lat, data.location.lng]).addTo(map)
                .bindPopup(data.title)
                .openPopup();
        } else {
            mapElement.style.display = 'none';
        }

        suggestionHistory.unshift(data);
        updateHistory();

        loading.style.display = 'none';
        suggestionCard.style.display = 'block';
    })
    .catch(error => {
        console.error('Error:', error);
        showError('An error occurred while fetching the suggestion.');
    });
});

document.getElementById('lucky-button').addEventListener('click', function() {
    const queries = [
        "a hidden gem in Warsaw",
        "the best pierogi in Krakow",
        "a beautiful beach on the Baltic coast",
        "a challenging hike in the Tatra Mountains",
        "a quirky museum in Gdansk"
    ];
    const randomQuery = queries[Math.floor(Math.random() * queries.length)];
    document.getElementById('query').value = randomQuery;
    document.getElementById('suggestion-form').dispatchEvent(new Event('submit'));
});

// Optional: Add event listener to close the error message
const errorAlert = document.getElementById('error-message');
if (errorAlert) {
    errorAlert.querySelector('.btn-close').addEventListener('click', function () {
        errorAlert.style.display = 'none';
    });
}