<script>
// Wait for the DOM to load before running the script
document.addEventListener('DOMContentLoaded', function() {
    // Ensure jQuery is available (supports window.jQuery, window.$, or AJS.$)
    var $ = window.jQuery || window.$ || AJS.$;
    if (!$) return;

    // Function to sync legend icon colors with event bar colors
    function syncLegendColors() {
        // Loop through each legend item
        $('li.child-subcalendar').each(function() {
            var legendItem = $(this);
            var subCalendarId = legendItem.attr('data-sub-calendar-id');
            var eventBar;

            // Try to match the legend item to an event bar using data-subcalendar-id
            if (subCalendarId) {
                eventBar = $('.fc-event[data-subcalendar-id="' + subCalendarId + '"]');
            }

            // If no match found, fall back to class-based matching
            if (!eventBar || !eventBar.length) {
                var legendType;
                // Handle custom event types using their unique class
                if (legendItem.attr('data-custom-event-type-id')) {
                    legendType = legendItem.attr('class').split(' ').find(cls => 
                        cls !== 'child-subcalendar' && !cls.startsWith('subcalendar-')
                    );
                } else {
                    // Handle default event types (Events, Leave, Travel, Birthdays)
                    if (legendItem.hasClass('other')) legendType = 'other';
                    else if (legendItem.hasClass('leaves')) legendType = 'leaves';
                    else if (legendItem.hasClass('travel')) legendType = 'travel';
                    else if (legendItem.hasClass('birthdays')) legendType = 'birthdays';
                }
                // Find the event bar using the identified class
                if (legendType) {
                    eventBar = $('.fc-event.' + legendType);
                }
            }

            // If a matching event bar is found, apply its background color to the legend icon
            if (eventBar && eventBar.length) {
                var eventColor = eventBar.css('background-color');
                if (eventColor) {
                    legendItem.find('.subcalendar-icon-container svg path').css('fill', eventColor);
                }
            }
        });
    }

    // Run the sync 10 seconds after page load to ensure the calendar is rendered
    setTimeout(syncLegendColors, 10000);

    // Periodically re-sync every 15 seconds to handle color changes
    setInterval(syncLegendColors, 15000);

    // Observe DOM changes in the calendar to re-sync dynamically
    var calendarContainer = document.querySelector('.fc-event-container') || document.body;
    var observer = new MutationObserver(function() {
        syncLegendColors();
    });
    observer.observe(calendarContainer, { childList: true, subtree: true });
});
</script>