script.js

// Course data
const coursesData = [
    // November 2025
    {
        course: "OFA400: Atlas Admin",
        confirmed: "Yes",
        startDate: "25-Nov-25",
        endDate: "25-Nov-25",
        timeZone: "MX CST",
        time: "All Day (9:00 AM - 5:00 PM)",
        region: "LATAM",
        language: "Spanish",
        instructor: "Virgilio De la Cruz Jardón",
        event: "MX CST | 2025 Nov 25 | Spanish (OFA400)",
        id: "c0caf703-35d5-4a9d-a561-5db9cb7d40ee"
    },
    // Add all other courses from the table here...
    // December 2025
    {
        course: "OFA500: Atlas API",
        confirmed: "Yes",
        startDate: "26-Nov-25",
        endDate: "26-Nov-25",
        timeZone: "MX CST",
        time: "All Day (9:00 AM - 5:00 PM)",
        region: "LATAM",
        language: "Spanish",
        instructor: "Virgilio De la Cruz Jardón",
        event: "MX CST | 2025 Nov 26 | Spanish (OFA500)",
        id: "4e805e95-4818-4b11-8dcb-7d77a9bfb016"
    },
    // Add remaining courses...
];

// Main JavaScript functionality
document.addEventListener('DOMContentLoaded', async () => {
    // Render course calendar
    function renderCourseCalendar() {
        const calendarBody = document.getElementById('course-calendar');
        calendarBody.innerHTML = '';
        
        coursesData.forEach(course => {
            const row = document.createElement('tr');
            row.className = 'hover:bg-gray-50';
            row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm font-medium text-gray-900">${course.course}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${course.confirmed === 'Yes' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}">
                        ${course.confirmed}
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.startDate}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.endDate}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.timeZone}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.time}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.region}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.language}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${course.instructor}</td>
            `;
            calendarBody.appendChild(row);
        });
    }

    // Fetch courses from MongoDB API
async function fetchCourses() {
        try {
            const response = await fetch('https://learn.mongodb.com/api/v1/instructor-led-training-schedule');
            const data = await response.json();
            return data.courses;
        } catch (error) {
            console.error('Error fetching courses:', error);
            return [];
        }
    }

    // Group courses by month
    function groupCoursesByMonth(courses) {
        const now = new Date();
        const currentMonth = now.getMonth();
        const currentYear = now.getFullYear();
        
        const grouped = {
            current: [],
            next: [],
            following: []
        };

        courses.forEach(course => {
            const courseDate = new Date(course.startDate);
            const courseMonth = courseDate.getMonth();
            const courseYear = courseDate.getFullYear();
            
            if (courseYear === currentYear) {
                if (courseMonth === currentMonth) {
                    grouped.current.push(course);
                } else if (courseMonth === currentMonth + 1) {
                    grouped.next.push(course);
                } else if (courseMonth === currentMonth + 2) {
                    grouped.following.push(course);
                }
            }
        });

        return grouped;
    }

    // Render courses to the DOM
    function renderCourses(courses, containerId) {
        const container = document.getElementById(containerId);
        container.innerHTML = '';
        
        if (courses.length === 0) {
            container.innerHTML = '<p class="text-gray-600">No courses scheduled for this period.</p>';
            return;
        }
        
        courses.forEach(course => {
            const card = document.createElement('custom-course-card');
            card.setAttribute('title', course.title);
            card.setAttribute('date', new Date(course.startDate).toLocaleDateString('en-US', { 
                month: 'short', 
                day: 'numeric', 
                year: 'numeric' 
            }));
            card.setAttribute('time', course.time);
            card.setAttribute('location', course.location);
            card.setAttribute('link', course.link);
            container.appendChild(card);
        });
    }

    // Initialize the page
    async function init() {
        const courses = await fetchCourses();
        const groupedCourses = groupCoursesByMonth(courses);
        
        renderCourses(groupedCourses.current, 'current-month-courses');
        renderCourses(groupedCourses.next, 'next-month-courses');
        renderCourses(groupedCourses.following, 'following-month-courses');
        
        // Update month selector labels with actual month names
        const now = new Date();
        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
                           'July', 'August', 'September', 'October', 'November', 'December'];
        
        const buttons = document.querySelectorAll('.month-btn');
        buttons[0].textContent = monthNames[now.getMonth()];
        buttons[1].textContent = monthNames[(now.getMonth() + 1) % 12];
        buttons[2].textContent = monthNames[(now.getMonth() + 2) % 12];
    }

    init();
});