document.addEventListener('DOMContentLoaded', function() {
    // Initialize DataTable
    if ($('#activityTable').length) {
        $('#activityTable').DataTable({
            "pageLength": 5,
            "ordering": true,
            "info": false,
            "lengthChange": false,
            "language": {
                "search": "",
                "searchPlaceholder": "Search records..."
            }
        });
    }

    // Initialize Select2
    $('.select2').select2({
        theme: 'bootstrap-5',
        width: '100%'
    });

    // Initialize charts
    renderCharts();

    // Toggle sidebar
    const sidebarToggle = document.getElementById('sidebarToggle');
    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('collapsed');
        });
    }

    // SweetAlert examples
    window.showSuccessAlert = function(message) {
        Swal.fire({
            icon: 'success',
            title: 'Success!',
            text: message,
            confirmButtonColor: '#6f42c1'
        });
    };

    window.showErrorAlert = function(message) {
        Swal.fire({
            icon: 'error',
            title: 'Error!',
            text: message,
            confirmButtonColor: '#6f42c1'
        });
    };
});

function renderCharts() {
    // Line Chart
    const lineChart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        backgroundColor: "#1e1e1e",
        axisX: {
            valueFormatString: "DD MMM",
            labelFontColor: "#f0f0f0",
            lineColor: "#444",
            tickColor: "#444"
        },
        axisY: {
            title: "Number of Patients",
            titleFontColor: "#f0f0f0",
            labelFontColor: "#f0f0f0",
            lineColor: "#444",
            tickColor: "#444",
            gridColor: "#333"
        },
        legend: {
            fontColor: "#f0f0f0"
        },
        data: [{
            type: "line",
            name: "Visits",
            showInLegend: true,
            color: "#6f42c1",
            markerSize: 8,
            dataPoints: [
                { x: new Date(2023, 5, 1), y: 8 },
                { x: new Date(2023, 5, 2), y: 12 },
                { x: new Date(2023, 5, 3), y: 10 },
                { x: new Date(2023, 5, 4), y: 15 },
                { x: new Date(2023, 5, 5), y: 18 },
                { x: new Date(2023, 5, 6), y: 14 },
                { x: new Date(2023, 5, 7), y: 16 }
            ]
        }]
    });
    lineChart.render();

    // Pie Chart
    const pieChart = new CanvasJS.Chart("pieChartContainer", {
        animationEnabled: true,
        backgroundColor: "#1e1e1e",
        legend: {
            fontColor: "#f0f0f0"
        },
        data: [{
            type: "pie",
            startAngle: 240,
            yValueFormatString: "##0.00\"%\"",
            indexLabel: "{label} {y}",
            indexLabelFontColor: "#f0f0f0",
            dataPoints: [
                {y: 35, label: "Anxiety Disorders", color: "#6f42c1"},
                {y: 25, label: "Depression", color: "#10b981"},
                {y: 20, label: "PTSD", color: "#f59e0b"},
                {y: 15, label: "Bipolar Disorder", color: "#3b82f6"},
                {y: 5, label: "Other", color: "#ef4444"}
            ]
        }]
    });
    pieChart.render();
}