// Main application script
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    // Handle sidebar toggle - improved for mobile
    const sidebarToggle = document.querySelector('custom-navbar')?.shadowRoot?.getElementById('sidebarToggle');
    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', function() {
            const sidebar = document.querySelector('custom-sidebar');
            const main = document.querySelector('main');
            
            if (window.innerWidth <= 768) {
                sidebar.classList.toggle('open');
            } else {
                sidebar.classList.toggle('hidden');
                main.classList.toggle('ml-0');
                main.classList.toggle('ml-64');
            }
        });
    }

    // Close sidebar when clicking outside on mobile
    document.addEventListener('click', function(event) {
        const sidebar = document.querySelector('custom-sidebar');
        const navbar = document.querySelector('custom-navbar');
        
        if (window.innerWidth <= 768 && sidebar?.classList.contains('open')) {
            if (!sidebar.contains(event.target) && !navbar?.shadowRoot?.contains(event.target)) {
                sidebar.classList.remove('open');
            }
        }
    });
// Sample data for charts (these would be replaced with real data)
    const salesData = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
            label: 'Monthly Sales',
            data: [3250, 4250, 3870, 5320, 6100, 4870],
            backgroundColor: 'rgba(79, 70, 229, 0.2)',
            borderColor: 'rgba(79, 70, 229, 1)',
            borderWidth: 1,
            tension: 0.4
        }]
    };

    // Initialize charts (you would need to include Chart.js for this to work)
    if (typeof Chart !== 'undefined') {
        const salesChart = new Chart(
            document.getElementById('salesChart'),
            {
                type: 'line',
                data: salesData,
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            }
        );
    }
});

// Notification handler
function showNotification(type, message) {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg text-white ${type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500'}`;
    notification.textContent = message;
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}