$(function () {
    // Function to fetch data for users by role chart
    function fetchUsersByRoleData() {
        $.ajax({
            url: '/api/users-by-role-data',
            method: 'GET',
            success: function (response) {
                
                // =====================================
                // Data Berdasarkan Role Pengguna
                // =====================================
                var users_by_role = {
                    chart: {
                    type: 'bar',
                    height: 330,
                    fontFamily: "'Plus Jakarta Sans', sans-serif",
                    foreColor: "#ffffff",
                    },
                    plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        endingShape: 'rounded'
                    },
                    },
                    dataLabels: {
                    enabled: true,
                    style: {
                        colors: ['#000000']
                    }
                    },
                    stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                    },
                    series: [
                    {
                        name: 'Jumlah'
                    }
                    ],
                    xaxis: {
                    categories: ['Administrator', 'Ahli bedah mulut', 'Dokter', 'Operator', 'Peneliti', 'Perawat'],
                    },
                    yaxis: {
                    title: {
                        text: 'Jumlah Pengguna',
                        forceNiceScale: true,
                    }
                    },
                    fill: {
                    opacity: 1,
                    colors: ['#d2d8d7']
                    },
                    tooltip: {
                    theme: "dark",
                    fillSeriesColor: false,
                    }
                };

                // Update chart configuration with fetched data
                users_by_role.series[0].data = response.data.map(Number);
                
                // Render chart
                var chart = new ApexCharts(document.querySelector("#users_by_role"), users_by_role);
                chart.render();

                //var total_data_users_by_role = users_by_role.series[0].data[0] + users_by_role.series[0].data[1] + users_by_role.series[0].data[2] + users_by_role.series[0].data[3] + users_by_role.series[0].data[4];
                var total_data_users_by_role = response.data.reduce((total, current) => total + Number(current), 0);
                document.querySelector("#total_data_users_by_role").textContent = total_data_users_by_role;
            },
            error: function (error) {
                console.error('Error fetching users by role data:', error);
            }
        });
    }

    // Function to fetch data for jenis terapi chart
    function fetchDataJenisTerapi() {
        $.ajax({
            url: '/api/data-jenis-terapi',
            method: 'GET',
            success: function (response) {

                // =====================================
                // Data Jenis Terapi
                // =====================================
                var data_jenis_terapi = {
                    color: "#adb5bd",
                    labels: ["Gnatoplasty", "Labioplasty", "Palatoplasty"],
                    chart: {
                        width: 180,
                        type: "donut", // Mengubah tipe chart menjadi donut
                        fontFamily: "'Plus Jakarta Sans', sans-serif",
                        foreColor: "#ffffff",
                    },
                    plotOptions: {
                        pie: {
                            startAngle: 0,
                            endAngle: 360,
                            expandOnClick: false,
                        },
                        donut: { // Menambahkan plotOptions untuk donut
                            size: '65%', // Ukuran bagian donut relatif terhadap pie (dalam persen)
                            labels: {
                                show: true,
                                name: {
                                    offsetY: 15,
                                },
                                value: {
                                    offsetY: -15,
                                    formatter: function (val) {
                                        return val;
                                    }
                                }
                            }
                        }
                    },
                    stroke: {
                        show: false,
                    },
                    dataLabels: {
                        enabled: false,
                    },
                    legend: {
                        show: false,
                    },
                    colors: ["#ffb234", "#ffcf8f", "#ff9764"],
                    responsive: [{
                        breakpoint: 991,
                        options: {
                            chart: {
                                width: 150,
                            },
                        },
                    }],
                    tooltip: {
                        theme: "dark",
                        fillSeriesColor: false,
                    },
                };                

                // Update chart configuration with fetched data
                data_jenis_terapi.series = response.data.map(Number);

                var chart = new ApexCharts(document.querySelector("#data_jenis_terapi"), data_jenis_terapi);
                chart.render();

                var labioplastyValue = data_jenis_terapi.series[1];
                document.querySelector("#labioplastyValue").textContent = labioplastyValue;
                var palatoplastyValue = data_jenis_terapi.series[2];
                document.querySelector("#palatoplastyValue").textContent = palatoplastyValue;
                var gnatoplastyValue = data_jenis_terapi.series[0];
                document.querySelector("#gnatoplastyValue").textContent = gnatoplastyValue;

                //var total_data_jenis_terapi = data_jenis_terapi.series[0] + data_jenis_terapi.series[1] + data_jenis_terapi.series[2];
                var total_data_jenis_terapi = data_jenis_terapi.series.reduce((total, current) => total + current, 0);
                document.querySelector("#total_data_jenis_terapi").textContent = total_data_jenis_terapi;
            },
            error: function (error) {
                console.error('Error fetching jenis terapi data:', error);
            }
        });
    }

    // Function to fetch data for jenis kelamin chart
    function fetchDataJenisKelamin() {
        $.ajax({
            url: '/api/data-jenis-kelamin',
            method: 'GET',
            success: function (response) {

                // =====================================
                // Data Jenis Kelamin
                // =====================================
                var data_jenis_kelamin = {
                    color: "#adb5bd",
                    series: [33, 24],
                    labels: ["Laki-Laki", "Perempuan"],
                    chart: {
                    width: 180,
                    type: "pie",
                    fontFamily: "'Plus Jakarta Sans', sans-serif",
                    foreColor: "#ffffff",
                    },
                    plotOptions: {
                    pie: {
                        startAngle: 0,
                        endAngle: 360,
                        expandOnClick: false,
                    },
                    },
                    stroke: {
                    show: false,
                    },

                    dataLabels: {
                    enabled: false,
                    },

                    legend: {
                    show: false,
                    },
                    colors: ["#4693ff", "#e680ff"],

                    responsive: [
                    {
                        breakpoint: 991,
                        options: {
                        chart: {
                            width: 150,
                        },
                        },
                    },
                    ],
                    tooltip: {
                    theme: "dark",
                    fillSeriesColor: false,
                    },
                };
                // Update chart configuration with fetched data
                data_jenis_kelamin.series = response.data.map(Number); 
                var chart = new ApexCharts(document.querySelector("#data_jenis_kelamin"), data_jenis_kelamin);
                chart.render();

                var maleValue = data_jenis_kelamin.series[0];
                document.querySelector("#maleValue").textContent = maleValue;
                var femaleValue = data_jenis_kelamin.series[1];
                document.querySelector("#femaleValue").textContent = femaleValue;
                //var total_data_jenis_kelamin = data_jenis_kelamin.series[0] + data_jenis_kelamin.series[1];
                var total_data_jenis_kelamin = data_jenis_kelamin.series.reduce((total, current) => total + current, 0);
                document.querySelector("#total_data_jenis_kelamin").textContent = total_data_jenis_kelamin;
            },
            error: function (error) {
                console.error('Error fetching jenis kelamin data:', error);
            }
        });
    }

    // Call the functions to fetch data initially
    fetchUsersByRoleData();
    fetchDataJenisTerapi();
    fetchDataJenisKelamin();
});