document.getElementById('suggestion-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const query = document.getElementById('query').value;
    const suggestionCard = document.getElementById('suggestion-card');
    const loading = document.getElementById('loading');
    const suggestionImage = document.getElementById('suggestion-image');
    const suggestionTitle = document.getElementById('suggestion-title');
    const suggestionText = document.getElementById('suggestion-text');

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

    fetch('api/index.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ query: query })
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
            loading.style.display = 'none';
            return;
        }

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

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