script.js

document.addEventListener('DOMContentLoaded', () => {
    // Check for saved theme preference
    const savedTheme = localStorage.getItem('theme') || 'dark';
    if (savedTheme === 'dark') {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
    
    // Initialize tooltips
    const initTooltips = () => {
        const tooltipElements = document.querySelectorAll('[data-tooltip]');
        
        tooltipElements.forEach(el => {
            const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);
            const tooltipText = el.getAttribute('data-tooltip');
            
            el.setAttribute('aria-describedby', tooltipId);
            
            const tooltip = document.createElement('div');
            tooltip.id = tooltipId;
            tooltip.className = 'absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700';
            tooltip.innerHTML = tooltipText;
            
            document.body.appendChild(tooltip);
            
            const popperInstance = Popper.createPopper(el, tooltip, {
                placement: 'top',
                modifiers: [
                    {
                        name: 'offset',
                        options: {
                            offset: [0, 8],
                        },
                    },
                ],
            });
            
            const showEvents = ['mouseenter', 'focus'];
            const hideEvents = ['mouseleave', 'blur'];
            
            showEvents.forEach(event => {
                el.addEventListener(event, () => {
                    tooltip.setAttribute('data-show', '');
                    popperInstance.update();
                });
            });
            
            hideEvents.forEach(event => {
                el.addEventListener(event, () => {
                    tooltip.removeAttribute('data-show');
                });
            });
        });
    };
    
    // Check if Popper is loaded before initializing tooltips
    const checkPopper = setInterval(() => {
        if (typeof Popper !== 'undefined') {
            clearInterval(checkPopper);
            initTooltips();
        }
    }, 100);
    
    // Add animations to dashboard cards
    const dashboardCards = document.querySelectorAll('.bg-white, .dark\\:bg-gray-800');
    dashboardCards.forEach((card, index) => {
        card.style.animationDelay = `${index * 0.1}s`;
        card.classList.add('slide-up');
    });
});