document.querySelectorAll('.card').forEach((card) => {
    card.addEventListener('click', function () {
        this.classList.toggle('flipped');
    });
});


let currentCard = 0;

function updateFlashcard(page) {
    $('.page-number').text((currentCard + 1) + ' / ' + flashcards.length);

    const cardContent = flashcards[currentCard];
    const questionText = cardContent.question;
    const correctAnswer = cardContent.answer;
    const hint = cardContent.hint;
    const image_url = cardContent.image_url;

    let card;
    if (currentCard % 2 !== 0) {
        card = document.querySelector('.odd');
    } else {
        card = document.querySelector('.even');
    }

    if (hint && hint.length > 0) {
        document.querySelector('#moreInfoModal p').textContent = hint;
        card.querySelector('.more-info').classList.remove('hide');
    } else {
        document.querySelector('#moreInfoModal p').textContent = '';
        card.querySelector('.more-info').classList.add('hide');
    }

    if (image_url && image_url.length > 0) {
        card.querySelector('.question-image').setAttribute('src',image_url);

        card.querySelector('.question-image').classList.remove('hide');
    } else {
        card.querySelector('.question-image').setAttribute('src','');
        card.querySelector('.question-image').classList.add('hide');
    }

    card.querySelector('.question-text').textContent = questionText;
    card.querySelector('.answer').textContent = correctAnswer;


    try {
        $('#flashCard').carousel(page);
    } catch (e) {
        console.log(e)
    }

}

document.getElementById('prevBtn').addEventListener('click', function () {
    if (currentCard > 0) {
        currentCard--;
        updateFlashcard('prev');
    }
});

document.getElementById('nextBtn').addEventListener('click', function () {
    if (currentCard < flashcards.length - 1) {
        currentCard++;
        updateFlashcard('next');
    }
});

$(document).ready(function () {
    $('#flashCard').carousel({
        interval: false  // Disable auto sliding
    });
    $('.page-number').text((currentCard + 1) + ' / ' + flashcards.length);
    updateFlashcard('');

    $('.question-image').each(function () {
        $(this).click(function (event) {
            event.stopPropagation();
            const src = $(this).attr('src');
            $('#imageModal img').attr('src', src);
            $('#imageModal').modal('show');
        });
    });

    $('.more-info').each(function () {
        $(this).click(function (event) {
            event.stopPropagation();
            $('#moreInfoModal').modal('show');
        });
    });
});