console.log("entered script");
document.addEventListener('DOMContentLoaded', function () {
    const questionTypeElement = document.getElementById('question_type');

    console.log("dom content loaded!");

    if (questionTypeElement) {
        questionTypeElement.addEventListener('change', function () {
            const optionsSection = document.getElementById('options-section');
            const selectedType = this.value;
            if (selectedType === 'multiple_choice' || selectedType === 'single_choice' || selectedType === 'dropdown') {
                optionsSection.style.display = 'block';
            } else {
                optionsSection.style.display = 'none';
            }
        });
    }

    document.querySelectorAll('input[id^="other_"]').forEach(el => {
        const id = el.id.split('_')[1];
        const otherTextElement = document.getElementById(`other_text_${id}`);
        if (otherTextElement) {
            el.addEventListener('change', function () {
                otherTextElement.style.display = this.checked ? 'block' : 'none';
            });
        }
    });

    document.querySelectorAll('input[id^="radio_other_"]').forEach(el => {
        const id = el.id.split('_')[2];
        const radioOtherTextElement = document.getElementById(`radio_other_text_${id}`);
        if (radioOtherTextElement) {
            el.addEventListener('change', function () {
                radioOtherTextElement.style.display = this.checked ? 'block' : 'none';
            });
        }
    });
});

document.addEventListener('DOMContentLoaded', function () {
    const tagsInput = document.getElementById('classes-input');
    let classes = [];

    // Define the addClass function before it's used
    function addClass(classname) {
        const container = document.getElementById('classes-container');
        const classElement = document.createElement('span');
        classElement.classList.add('tag');
        classElement.textContent = classname;

        const closeIcon = document.createElement('span');
        closeIcon.classList.add('close');
        closeIcon.textContent = 'x';
        closeIcon.addEventListener('click', function () {
            container.removeChild(classElement);
            classes = classes.filter(c => c !== classname);
            fetchMatchingPeople(classes); // Call fetchMatchingPeople when a class is removed
        });

        classElement.appendChild(closeIcon);
        container.appendChild(classElement);
    }

    // Define the fetchMatchingPeople function before it's used
    function fetchMatchingPeople(classes) {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "/fetch-matches", true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    
        xhr.onload = function () {
            if (xhr.status === 200) {
                const matchesContainer = document.getElementById('matches-container');
                const people = JSON.parse(xhr.responseText);
    
                matchesContainer.innerHTML = '';
    
                // Log the response to see if "people" is populated
                console.log("Fetched people: ", people);
    
                if (people && people.length > 0) {
                    people.forEach(person => {
                        const personDiv = document.createElement('div');
                        personDiv.classList.add('person');
                        personDiv.innerHTML = `<strong>${person.name}</strong><br>Classes: ${person.classes.join(', ')}<br>Email: ${person.email || 'N/A'}`;
                        matchesContainer.appendChild(personDiv);
                    });
                } else {
                    matchesContainer.innerHTML = '<p>No matches found for these classes.</p>';
                }
            } else {
                console.error("Error fetching matches:", xhr.status, xhr.responseText);
            }
        };
    
        xhr.onerror = function () {
            console.error("Network error while fetching matches.");
        };
    
        xhr.send(JSON.stringify({ classes: classes }));
    }

    tagsInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter' || event.key === ',') {
            event.preventDefault();
            let value = tagsInput.value.trim().replace(/,$/, '');
            if (value) {
                addClass(value); // Add class tag
                classes.push(value); // Add to classes array
                fetchMatchingPeople(classes); // Fetch matching people
                tagsInput.value = '';
            }
        }
    });

    document.querySelector('form').addEventListener('submit', function (event) {
        console.log('Classes on submit:', classes);
        const hiddenClassesInput = document.createElement('input');
        hiddenClassesInput.type = 'hidden';
        hiddenClassesInput.name = 'classes';
    
        // Filter out empty class names and trim spaces
        const cleanedClasses = classes.filter(classname => classname.trim() !== "").map(classname => classname.trim());
        hiddenClassesInput.value = cleanedClasses.join(',');
        
        this.appendChild(hiddenClassesInput);
    });
});