script.js

// Course data - using the provided JSON
const coursesData = [
  {
    "Course": "OFA400: Atlas Admin",
    "Confirmed?": "Yes",
    "Start Date": "25-Nov-25",
    "End Date": "25-Nov-25",
    "Time Zone": "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"
  },
  {
    "Course": "OFA500: Atlas API",
    "Confirmed?": "Yes",
    "Start Date": "26-Nov-25",
    "End Date": "26-Nov-25",
    "Time Zone": "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"
  },
  // ... (all other courses from the provided JSON)
];
// Calendar functionality
let currentMonth = new Date().getMonth();
let currentYear = new Date().getFullYear();

function renderCalendar() {
    const firstDay = new Date(currentYear, currentMonth, 1);
    const lastDay = new Date(currentYear, currentMonth + 1, 0);
    const daysInMonth = lastDay.getDate();
    let startingDay = firstDay.getDay();
    // Adjust to make Monday (1) the first day of week instead of Sunday (0)
    startingDay = startingDay === 0 ? 6 : startingDay - 1;
// Update month display
    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
                       'July', 'August', 'September', 'October', 'November', 'December'];
    document.getElementById('current-month-display').textContent = 
        `${monthNames[currentMonth]} ${currentYear}`;
    
    // Clear previous calendar
    const calendarDays = document.getElementById('calendar-days');
    calendarDays.innerHTML = '';
    
    // Add empty cells for days before the first day of month
    for (let i = 0; i < startingDay; i++) {
        const cell = document.createElement('div');
        cell.className = 'bg-white h-24 p-1';
        calendarDays.appendChild(cell);
    }
    
    // Add days of month
    for (let day = 1; day <= daysInMonth; day++) {
        const cell = document.createElement('div');
        cell.className = 'bg-white h-24 p-1 overflow-auto';
        
        const date = new Date(currentYear, currentMonth, day);
        const dateStr = date.toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' });
        
        // Add day number
        const dayNumber = document.createElement('div');
        dayNumber.className = 'font-semibold text-sm mb-1';
        dayNumber.textContent = day;
        cell.appendChild(dayNumber);
        
        // Add courses for this day
        const coursesToday = coursesData.filter(course => {
            const courseDate = new Date(course['Start Date']);
            return courseDate.getDate() === day && 
                   courseDate.getMonth() === currentMonth && 
                   courseDate.getFullYear() === currentYear;
        });
        
        coursesToday.forEach(course => {
            const courseEl = document.createElement('div');
            courseEl.className = 'text-xs p-1 mb-1 rounded bg-blue-50 border-l-4 border-blue-500 truncate';
            courseEl.title = `${course.Course}\n${course.Time}\n${course.Instructor}`;
            courseEl.textContent = course.Course;
            cell.appendChild(courseEl);
        });
        
        calendarDays.appendChild(cell);
    }
}

// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
    renderCalendar();
    
    // Month navigation
    document.getElementById('prev-month').addEventListener('click', () => {
        currentMonth--;
        if (currentMonth < 0) {
            currentMonth = 11;
            currentYear--;
        }
        renderCalendar();
        feather.replace();
    });
    
    document.getElementById('next-month').addEventListener('click', () => {
        currentMonth++;
        if (currentMonth > 11) {
            currentMonth = 0;
            currentYear++;
        }
        renderCalendar();
        feather.replace();
    });
});
// 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();
});