document.addEventListener('DOMContentLoaded', () => {
    const correct_answer_index = 2; // The 3rd answer is correct
    const answerButtons = document.querySelectorAll('.btn-answer');
    const nextButton = document.getElementById('next-question-btn');
    const toastContainer = document.getElementById('toast-container');

    answerButtons.forEach((button, index) => {
        button.addEventListener('click', () => {
            // Disable all buttons
            answerButtons.forEach(btn => btn.disabled = true);

            let is_correct = (index === correct_answer_index);

            if (is_correct) {
                button.classList.add('correct');
                showToast('Bonne réponse !', 'success');
            } else {
                button.classList.add('incorrect');
                answerButtons[correct_answer_index].classList.add('correct');
                showToast('Réponse incorrecte.', 'danger');
            }

            // Show the next question button
            nextButton.classList.remove('d-none');
        });
    });

    function showToast(message, type) {
        const toastHTML = `
        <div class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              ${message}
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
        `;
        toastContainer.innerHTML = toastHTML;
        const toastEl = toastContainer.querySelector('.toast');
        const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
        toast.show();
    }
});