$(function () {
    // Initialize Master Data Distribution Chart if data exists
    if (typeof window.pageData !== 'undefined' && document.querySelector("#masterDataChart")) {
        const statistics = window.pageData.statistics;
        const labels = window.pageData.labels;

        const masterDataOptions = {
            series: [
                statistics.total_customers,
                statistics.total_suppliers,
                statistics.total_products
            ],
            chart: {
                type: 'donut',
                height: 300
            },
            labels: [labels.customers, labels.suppliers, labels.products],
            colors: ['#696cff', '#03c3ec', '#71dd37'],
            legend: {
                position: 'bottom'
            },
            dataLabels: {
                enabled: true,
                formatter: function(val) {
                    return Math.round(val) + '%';
                }
            },
            plotOptions: {
                pie: {
                    donut: {
                        labels: {
                            show: true,
                            name: {
                                show: true,
                                fontSize: '16px'
                            },
                            value: {
                                show: true,
                                fontSize: '24px',
                                fontWeight: 600
                            },
                            total: {
                                show: true,
                                label: labels.total,
                                fontSize: '14px',
                                formatter: function(w) {
                                    return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                                }
                            }
                        }
                    }
                }
            }
        };

        const masterDataChart = new ApexCharts(document.querySelector("#masterDataChart"), masterDataOptions);
        masterDataChart.render();
    }
});
