(function (jQuery) {
    "use strict";
    if (document.querySelectorAll("#myChart").length) {
        const options = {
            series: [todayWithdraw, todayDeposit],
            chart: {
                height: 230,
                type: "radialBar",
            },
            colors: ["#4bc7d2", "#3a57e8"],
            plotOptions: {
                radialBar: {
                    hollow: {
                        margin: 10,
                        size: "50%",
                    },
                    track: {
                        margin: 10,
                        strokeWidth: "50%",
                    },
                    dataLabels: {
                        show: false,
                    },
                },
            },
            labels: ["Today's Withdraw", "Today's Deposit"],
            tooltip: {
                enabled: true,
                y: {
                    formatter: function (value, { seriesIndex }) {
                        if (seriesIndex === 0) {
                            return "$" + todayWithdraw;
                        } else if (seriesIndex === 1) {
                            return "$" + todayDeposit;
                        }
                    }
                }
            }
        };

        if (ApexCharts !== undefined) {
            const chart = new ApexCharts(
                document.querySelector("#myChart"),
                options
            );
            chart.render();

            document.addEventListener("ColorChange", (e) => {
                const newOpt = { colors: [e.detail.detail2, e.detail.detail1] };
                chart.updateOptions(newOpt);
            });
        }
    }

    if (document.querySelectorAll("#d-activity").length) {
        async function fetchSeriesData() {
            try {
                const response = await fetch('https://crm.fxdemo.site//public/admin/api/get-lead-data');
                const data = await response.json();
                return data;
            } catch (error) {
                console.error('Error fetching series data:', error);
                return [];
            }
        }

        async function initChart() {
            const seriesData = await fetchSeriesData();

            const options = {
                series: [
                    {
                        name: "Lead",
                        data: seriesData,
                    },
                ],
                chart: {
                    type: "bar",
                    height: 230,
                    stacked: true,
                    toolbar: {
                        show: false,
                    },
                },
                colors: ["#4bc7d2"],
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: "28%",
                        endingShape: "rounded",
                        borderRadius: 5,
                    },
                },
                legend: {
                    show: false,
                },
                dataLabels: {
                    enabled: false,
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ["transparent"],
                },
                xaxis: {
                    categories: ["FTD", "CB", "CF", "H", "C", "NA", "NI", "NR", "NEW"],
                    labels: {
                        minHeight: 20,
                        maxHeight: 20,
                        style: {
                            colors: "#8A92A6",
                        },
                    },
                },
                yaxis: {
                    title: {
                        text: "",
                    },
                    labels: {
                        minWidth: 19,
                        maxWidth: 19,
                        style: {
                            colors: "#8A92A6",
                        },
                    },
                },
                fill: {
                    opacity: 1,
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return val;
                        },
                    },
                },
            };

            const chart = new ApexCharts(document.querySelector("#d-activity"), options);
            chart.render();

            document.addEventListener("ColorChange", (e) => {
                const newOpt = { colors: [e.detail.detail1, e.detail.detail2] };
                chart.updateOptions(newOpt);
            });
        }

        initChart();
    }
    if (document.querySelectorAll("#d-main").length) {
        const options = {
            series: [
                {
                    name: "total",
                    data: [94, 80, 94, 80, 94, 80, 94],
                },
                {
                    name: "pipline",
                    data: [72, 60, 84, 60, 74, 60, 78],
                },
            ],
            chart: {
                fontFamily:
                    '"Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
                height: 245,
                type: "area",
                toolbar: {
                    show: false,
                },
                sparkline: {
                    enabled: false,
                },
            },
            colors: ["#3a57e8", "#4bc7d2"],
            dataLabels: {
                enabled: false,
            },
            stroke: {
                curve: "smooth",
                width: 3,
            },
            yaxis: {
                show: true,
                labels: {
                    show: true,
                    minWidth: 19,
                    maxWidth: 19,
                    style: {
                        colors: "#8A92A6",
                    },
                    offsetX: -5,
                },
            },
            legend: {
                show: false,
            },
            xaxis: {
                labels: {
                    minHeight: 22,
                    maxHeight: 22,
                    show: true,
                    style: {
                        colors: "#8A92A6",
                    },
                },
                lines: {
                    show: false, //or just here to disable only x axis grids
                },
                categories: ["Jan", "Feb", "Mar", "Apr", "Jun", "Jul", "Aug"],
            },
            grid: {
                show: false,
            },
            fill: {
                type: "gradient",
                gradient: {
                    shade: "dark",
                    type: "vertical",
                    shadeIntensity: 0,
                    gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
                    inverseColors: true,
                    opacityFrom: 0.4,
                    opacityTo: 0.1,
                    stops: [0, 50, 80],
                    colors: ["#3a57e8", "#4bc7d2"],
                },
            },
            tooltip: {
                enabled: true,
            },
        };

        const chart = new ApexCharts(
            document.querySelector("#d-main"),
            options
        );
        chart.render();
        document.addEventListener("ColorChange", (e) => {
            console.log(e);
            const newOpt = {
                colors: [e.detail.detail1, e.detail.detail2],
                fill: {
                    type: "gradient",
                    gradient: {
                        shade: "dark",
                        type: "vertical",
                        shadeIntensity: 0,
                        gradientToColors: [e.detail.detail1, e.detail.detail2], // optional, if not defined - uses the shades of same color in series
                        inverseColors: true,
                        opacityFrom: 0.4,
                        opacityTo: 0.1,
                        stops: [0, 50, 60],
                        colors: [e.detail.detail1, e.detail.detail2],
                    },
                },
            };
            chart.updateOptions(newOpt);
        });
    }
    if ($(".d-slider1").length > 0) {
        const options = {
            centeredSlides: false,
            loop: false,
            slidesPerView: 4,
            autoplay: false,
            spaceBetween: 32,
            breakpoints: {
                320: { slidesPerView: 1 },
                550: { slidesPerView: 2 },
                991: { slidesPerView: 3 },
                1400: { slidesPerView: 3 },
                1500: { slidesPerView: 4 },
                1700: { slidesPerView: 6 },
                2040: { slidesPerView: 7 },
                2440: { slidesPerView: 8 },
            },
            pagination: {
                el: ".swiper-pagination",
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },

            // And if we need scrollbar
            scrollbar: {
                el: ".swiper-scrollbar",
            },
        };
        let swiper = new Swiper(".d-slider1", options);

        document.addEventListener("ChangeMode", (e) => {
            if (e.detail.rtl === "rtl" || e.detail.rtl === "ltr") {
                swiper.destroy(true, true);
                setTimeout(() => {
                    swiper = new Swiper(".d-slider1", options);
                }, 500);
            }
        });
    }
})(jQuery);
