document.addEventListener('DOMContentLoaded', function () {
    let courseList = {};

    // Fetch the course_list.json file
    fetch('course_list.json')
        .then(response => response.json())
        .then(data => {
            courseList = data; // Load the data into courseList variable
        })
        .catch(error => {
            console.error('Error loading course list:', error);
        });

    const courseInput = document.getElementById('course');
    const autocompleteList = document.getElementById('autocomplete-list');

    // Event listener for course input keyup (every time user types)
    courseInput.addEventListener('input', function () {
        const query = this.value.toUpperCase(); // Convert input to uppercase to match course ID and name
        autocompleteList.innerHTML = ''; // Clear any previous suggestions

        if (!query) {
            return false; // If input is empty, stop here
        }

        let matchCount = 0; // Keep track of the number of matches

        // Filter through the courseList object
        for (const courseCode in courseList) {
            const courseName = courseList[courseCode].toUpperCase();

            // Match either the course ID or part of the course name
            if (courseCode.startsWith(query) || courseName.includes(query)) {
                const suggestionItem = document.createElement('div');
                suggestionItem.innerHTML = `<strong>${courseCode}</strong> - ${courseList[courseCode]}`;
                suggestionItem.addEventListener('click', function () {
                    // On click, set the input value and close the dropdown
                    courseInput.value = `${courseCode} - ${courseList[courseCode]}`;
                    autocompleteList.innerHTML = '';
                });
                autocompleteList.appendChild(suggestionItem);
                matchCount++;

                if (matchCount >= 10) break; // Limit suggestions to 10 for better performance
            }
        }

        // If no matches, show a 'no results' message
        if (matchCount === 0) {
            const noResultsItem = document.createElement('div');
            noResultsItem.innerHTML = `<em>No courses found</em>`;
            autocompleteList.appendChild(noResultsItem);
        }
    });

    // Close the autocomplete dropdown when clicking outside
    document.addEventListener('click', function (e) {
        if (e.target !== courseInput) {
            autocompleteList.innerHTML = '';
        }
    });

    // Handle form submission
    document.getElementById('mainForm').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission

        // Trigger the sliding animation
        document.getElementById('formCard').classList.add('active');
        document.getElementById('resultsCard').classList.add('active');

        // Optional: Log form data to the console for testing
        const formData = new FormData(this);
        const name = formData.get('name');
        const course = formData.get('course');
        console.log(`Name: ${name}, Course: ${course}`);
    });
});