document.addEventListener('DOMContentLoaded', function () {
    const sidebarCollapse = document.getElementById('sidebarCollapse');
    const sidebar = document.getElementById('sidebar');

    if (sidebarCollapse) {
        sidebarCollapse.addEventListener('click', function () {
            sidebar.classList.toggle('active');
        });
    }

    // Auto hide alerts after 5 seconds
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(function (alert) {
        setTimeout(function () {
            const bsAlert = new bootstrap.Alert(alert);
            bsAlert.close();
        }, 5000);
    });

    // --- Modern Charts Initialization ---

    // 1. Sales Analytics Chart
    const salesOptions = {
        series: [{
            name: 'Sales',
            data: [3100000, 4000000, 2800000, 5100000, 4200000, 10900000, 12500000]
        }],
        chart: {
            height: 350,
            type: 'area',
            toolbar: {
                show: false
            },
            fontFamily: 'Inter, sans-serif'
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth',
            width: 3,
            colors: ['#10b981']
        },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.45,
                opacityTo: 0.05,
                stops: [20, 100, 100, 100]
            }
        },
        xaxis: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            }
        },
        yaxis: {
            labels: {
                formatter: function (val) {
                    return "Rp " + (val / 1000000).toFixed(1) + "M";
                }
            }
        },
        grid: {
            borderColor: '#f1f5f9',
            strokeDashArray: 4
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return "Rp " + val.toLocaleString('id-ID');
                }
            }
        },
        colors: ['#10b981']
    };

    const salesChartEl = document.querySelector("#salesChart");
    if (salesChartEl) {
        const salesChart = new ApexCharts(salesChartEl, salesOptions);
        salesChart.render();
    }

    // 2. Category Distribution Chart
    const categoryOptions = {
        series: [44, 55, 13, 33],
        chart: {
            height: 350,
            type: 'donut',
            fontFamily: 'Inter, sans-serif'
        },
        labels: ['Electronics', 'Groceries', 'Apparel', 'Others'],
        colors: ['#0f172a', '#10b981', '#3b82f6', '#f59e0b'],
        plotOptions: {
            pie: {
                donut: {
                    size: '75%',
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            label: 'Total',
                            formatter: function (w) {
                                return w.globals.seriesTotals.reduce((a, b) => a + b, 0) + "%";
                            }
                        }
                    }
                }
            }
        },
        legend: {
            position: 'bottom'
        },
        dataLabels: {
            enabled: false
        }
    };

    const categoryChartEl = document.querySelector("#categoryChart");
    if (categoryChartEl) {
        const categoryChart = new ApexCharts(categoryChartEl, categoryOptions);
        categoryChart.render();
    }
});