// =========================== Sales Statistic Line Chart Start ===============================
var options = {
    series: [
        {
            name: "This month",
            data: [10, 20, 12, 30, 14, 35, 16, 32, 14, 25, 13, 28],
        },
    ],
    chart: {
        height: 264,
        type: "line",
        toolbar: {
            show: false,
        },
        zoom: {
            enabled: false,
        },
        dropShadow: {
            enabled: true,
            top: 6,
            left: 0,
            blur: 4,
            color: "#000",
            opacity: 0.1,
        },
    },
    dataLabels: {
        enabled: false,
    },
    stroke: {
        curve: "smooth",
        colors: ["#487FFF"], // Specify the line color here
        width: 3,
    },
    markers: {
        size: 0,
        strokeWidth: 3,
        hover: {
            size: 8,
        },
    },
    tooltip: {
        enabled: true,
        x: {
            show: true,
        },
        y: {
            show: false,
        },
        z: {
            show: false,
        },
    },
    grid: {
        row: {
            colors: ["transparent", "transparent"], // takes an array which will be repeated on columns
            opacity: 0.5,
        },
        borderColor: "#D1D5DB",
        strokeDashArray: 3,
    },
    yaxis: {
        labels: {
            formatter: function (value) {
                return value;
            },
            style: {
                fontSize: "14px",
            },
        },
    },
    xaxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
        ],
        tooltip: {
            enabled: false,
        },
        labels: {
            formatter: function (value) {
                return value;
            },
            style: {
                fontSize: "14px",
            },
        },
        axisBorder: {
            show: false,
        },
        crosshairs: {
            show: true,
            width: 20,
            stroke: {
                width: 0,
            },
            fill: {
                type: "solid",
                color: "#487FFF40",
                // gradient: {
                //   colorFrom: '#D8E3F0',
                //   // colorTo: '#BED1E6',
                //   stops: [0, 100],
                //   opacityFrom: 0.4,
                //   opacityTo: 0.5,
                // },
            },
        },
    },
};

var chart = new ApexCharts(document.querySelector("#chart-pertek"), options);
chart.render();
// =========================== Sales Statistic Line Chart End ===============================

// =========================== Sales Statistic Line Chart Start ===============================
var options = {
    series: [
        {
            name: "This month",
            data: [10, 20, 12, 30, 14, 35, 16, 32, 14, 25, 13, 28],
        },
    ],
    chart: {
        height: 264,
        type: "line",
        toolbar: {
            show: false,
        },
        zoom: {
            enabled: false,
        },
        dropShadow: {
            enabled: true,
            top: 6,
            left: 0,
            blur: 4,
            color: "#000",
            opacity: 0.1,
        },
    },
    dataLabels: {
        enabled: false,
    },
    stroke: {
        curve: "smooth",
        colors: ["#487FFF"], // Specify the line color here
        width: 3,
    },
    markers: {
        size: 0,
        strokeWidth: 3,
        hover: {
            size: 8,
        },
    },
    tooltip: {
        enabled: true,
        x: {
            show: true,
        },
        y: {
            show: false,
        },
        z: {
            show: false,
        },
    },
    grid: {
        row: {
            colors: ["transparent", "transparent"], // takes an array which will be repeated on columns
            opacity: 0.5,
        },
        borderColor: "#D1D5DB",
        strokeDashArray: 3,
    },
    yaxis: {
        labels: {
            formatter: function (value) {
                return value;
            },
            style: {
                fontSize: "14px",
            },
        },
    },
    xaxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
        ],
        tooltip: {
            enabled: false,
        },
        labels: {
            formatter: function (value) {
                return value;
            },
            style: {
                fontSize: "14px",
            },
        },
        axisBorder: {
            show: false,
        },
        crosshairs: {
            show: true,
            width: 20,
            stroke: {
                width: 0,
            },
            fill: {
                type: "solid",
                color: "#487FFF40",
                // gradient: {
                //   colorFrom: '#D8E3F0',
                //   // colorTo: '#BED1E6',
                //   stops: [0, 100],
                //   opacityFrom: 0.4,
                //   opacityTo: 0.5,
                // },
            },
        },
    },
};

var chart = new ApexCharts(document.querySelector("#chart-rintek"), options);
chart.render();
// =========================== Sales Statistic Line Chart End ===============================

// =========================== Sales Statistic Line Chart Start ===============================
var options = {
    series: [
        {
            name: "This month",
            data: [10, 20, 12, 30, 14, 35, 16, 32, 14, 25, 13, 28],
        },
    ],
    chart: {
        height: 264,
        type: "line",
        toolbar: {
            show: false,
        },
        zoom: {
            enabled: false,
        },
        dropShadow: {
            enabled: true,
            top: 6,
            left: 0,
            blur: 4,
            color: "#000",
            opacity: 0.1,
        },
    },
    dataLabels: {
        enabled: false,
    },
    stroke: {
        curve: "smooth",
        colors: ["#487FFF"], // Specify the line color here
        width: 3,
    },
    markers: {
        size: 0,
        strokeWidth: 3,
        hover: {
            size: 8,
        },
    },
    tooltip: {
        enabled: true,
        x: {
            show: true,
        },
        y: {
            show: false,
        },
        z: {
            show: false,
        },
    },
    grid: {
        row: {
            colors: ["transparent", "transparent"], // takes an array which will be repeated on columns
            opacity: 0.5,
        },
        borderColor: "#D1D5DB",
        strokeDashArray: 3,
    },
    yaxis: {
        labels: {
            formatter: function (value) {
                return value;
            },
            style: {
                fontSize: "14px",
            },
        },
    },
    xaxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
        ],
        tooltip: {
            enabled: false,
        },
        labels: {
            formatter: function (value) {
                return value;
            },
            style: {
                fontSize: "14px",
            },
        },
        axisBorder: {
            show: false,
        },
        crosshairs: {
            show: true,
            width: 20,
            stroke: {
                width: 0,
            },
            fill: {
                type: "solid",
                color: "#487FFF40",
                // gradient: {
                //   colorFrom: '#D8E3F0',
                //   // colorTo: '#BED1E6',
                //   stops: [0, 100],
                //   opacityFrom: 0.4,
                //   opacityTo: 0.5,
                // },
            },
        },
    },
};

var chart = new ApexCharts(document.querySelector("#chart-amdal"), options);
chart.render();
// =========================== Sales Statistic Line Chart End ===============================

// ================================ Total Subscriber bar chart Start ================================
var options = {
    series: [
        {
            name: "Sales",
            data: [
                {
                    x: "Sun",
                    y: 15,
                },
                {
                    x: "Mon",
                    y: 12,
                },
                {
                    x: "Tue",
                    y: 18,
                },
                {
                    x: "Wed",
                    y: 20,
                },
                {
                    x: "Thu",
                    y: 13,
                },
                {
                    x: "Fri",
                    y: 16,
                },
                {
                    x: "Sat",
                    y: 6,
                },
            ],
        },
    ],
    chart: {
        type: "bar",
        height: 235,
        toolbar: {
            show: false,
        },
    },
    plotOptions: {
        bar: {
            borderRadius: 6,
            horizontal: false,
            columnWidth: 24,
            columnWidth: "52%",
            endingShape: "rounded",
        },
    },
    dataLabels: {
        enabled: false,
    },
    fill: {
        type: "gradient",
        colors: ["#dae5ff"], // Set the starting color (top color) here
        gradient: {
            shade: "light", // Gradient shading type
            type: "vertical", // Gradient direction (vertical)
            shadeIntensity: 0.5, // Intensity of the gradient shading
            gradientToColors: ["#dae5ff"], // Bottom gradient color (with transparency)
            inverseColors: false, // Do not invert colors
            opacityFrom: 1, // Starting opacity
            opacityTo: 1, // Ending opacity
            stops: [0, 100],
        },
    },
    grid: {
        show: false,
        borderColor: "#D1D5DB",
        strokeDashArray: 4, // Use a number for dashed style
        position: "back",
        padding: {
            top: -10,
            right: -10,
            bottom: -10,
            left: -10,
        },
    },
    xaxis: {
        type: "category",
        categories: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    },
    yaxis: {
        show: false,
    },
};

var chart = new ApexCharts(document.querySelector("#barChart"), options);
chart.render();
// ================================ Total Subscriber bar chart End ================================

// ================================ Users Overview Donut chart Start ================================
var options = {
    series: [500, 500, 500],
    colors: ["#FF9F29", "#487FFF", "#E4F1FF"],
    labels: ["Active", "New", "Total"],
    legend: {
        show: false,
    },
    chart: {
        type: "donut",
        height: 270,
        sparkline: {
            enabled: true, // Remove whitespace
        },
        margin: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
        },
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
        },
    },
    stroke: {
        width: 0,
    },
    dataLabels: {
        enabled: false,
    },
    responsive: [
        {
            breakpoint: 480,
            options: {
                chart: {
                    width: 200,
                },
                legend: {
                    position: "bottom",
                },
            },
        },
    ],
};

var chart = new ApexCharts(
    document.querySelector("#userOverviewDonutChart"),
    options
);
chart.render();
// ================================ Users Overview Donut chart End ================================

// ================================ Pertek Distribusi Chart Start ================================
var options = {
    series: [
        {
            name: "Usaha Perdagangan dan Jasa",
            data: [
                20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000,
                48000, 18000, 22000,
            ],
        },
        {
            name: "Property",
            data: [
                15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000,
                38000, 14000, 16000,
            ],
        },
        {
            name: "Manufaktur",
            data: [
                12000, 14000, 16000, 18000, 25000, 15000, 20000, 9000, 15000,
                28000, 12000, 14000,
            ],
        },
        {
            name: "Lainnya",
            data: [
                8000, 10000, 11000, 12000, 18000, 10000, 14000, 7000, 11000,
                20000, 9000, 10000,
            ],
        },
    ],
    colors: ["#487FFF", "#FF9F29", "#10B981", "#EF4444"],
    labels: ["Active", "New", "Total"],
    legend: {
        show: false,
    },
    chart: {
        type: "bar",
        height: 250,
        toolbar: {
            show: false,
        },
    },
    grid: {
        show: true,
        borderColor: "#D1D5DB",
        strokeDashArray: 4, // Use a number for dashed style
        position: "back",
    },
    plotOptions: {
        bar: {
            borderRadius: 4,
            columnWidth: 10,
        },
    },
    dataLabels: {
        enabled: false,
    },
    stroke: {
        show: true,
        width: 2,
        colors: ["transparent"],
    },
    xaxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
        ],
    },
    yaxis: {
        categories: [
            "0",
            "5000",
            "10,000",
            "20,000",
            "30,000",
            "50,000",
            "60,000",
            "60,000",
            "70,000",
            "80,000",
            "90,000",
            "100,000",
        ],
    },
    fill: {
        opacity: 1,
        width: 18,
    },
};

var chart = new ApexCharts(
    document.querySelector("#paymentStatusChart-pertek"),
    options
);
chart.render();
// ================================ Pertek Distribusi Chart End ================================

// ================================ Rintek Distribusi Chart Start ================================
var options = {
    series: [
        {
            name: "Usaha Perdagangan dan Jasa",
            data: [
                20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000,
                48000, 18000, 22000,
            ],
        },
        {
            name: "Property",
            data: [
                15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000,
                38000, 14000, 16000,
            ],
        },
        {
            name: "Manufaktur",
            data: [
                12000, 14000, 16000, 18000, 25000, 15000, 20000, 9000, 15000,
                28000, 12000, 14000,
            ],
        },
        {
            name: "Lainnya",
            data: [
                8000, 10000, 11000, 12000, 18000, 10000, 14000, 7000, 11000,
                20000, 9000, 10000,
            ],
        },
    ],
    colors: ["#487FFF", "#FF9F29", "#10B981", "#EF4444"],
    labels: ["Active", "New", "Total"],
    legend: {
        show: false,
    },
    chart: {
        type: "bar",
        height: 250,
        toolbar: {
            show: false,
        },
    },
    grid: {
        show: true,
        borderColor: "#D1D5DB",
        strokeDashArray: 4, // Use a number for dashed style
        position: "back",
    },
    plotOptions: {
        bar: {
            borderRadius: 4,
            columnWidth: 10,
        },
    },
    dataLabels: {
        enabled: false,
    },
    stroke: {
        show: true,
        width: 2,
        colors: ["transparent"],
    },
    xaxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
        ],
    },
    yaxis: {
        categories: [
            "0",
            "5000",
            "10,000",
            "20,000",
            "30,000",
            "50,000",
            "60,000",
            "60,000",
            "70,000",
            "80,000",
            "90,000",
            "100,000",
        ],
    },
    fill: {
        opacity: 1,
        width: 18,
    },
};

var chart = new ApexCharts(
    document.querySelector("#paymentStatusChart-rintek"),
    options
);
chart.render();
// ================================ Rintek Distribusi Chart End ================================

// ================================ Amdal Distribusi Chart Start ================================
var options = {
    series: [
        {
            name: "Usaha Perdagangan dan Jasa",
            data: [
                20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000,
                48000, 18000, 22000,
            ],
        },
        {
            name: "Property",
            data: [
                15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000,
                38000, 14000, 16000,
            ],
        },
        {
            name: "Manufaktur",
            data: [
                12000, 14000, 16000, 18000, 25000, 15000, 20000, 9000, 15000,
                28000, 12000, 14000,
            ],
        },
        {
            name: "Lainnya",
            data: [
                8000, 10000, 11000, 12000, 18000, 10000, 14000, 7000, 11000,
                20000, 9000, 10000,
            ],
        },
    ],
    colors: ["#487FFF", "#FF9F29", "#10B981", "#EF4444"],
    labels: ["Active", "New", "Total"],
    legend: {
        show: false,
    },
    chart: {
        type: "bar",
        height: 250,
        toolbar: {
            show: false,
        },
    },
    grid: {
        show: true,
        borderColor: "#D1D5DB",
        strokeDashArray: 4, // Use a number for dashed style
        position: "back",
    },
    plotOptions: {
        bar: {
            borderRadius: 4,
            columnWidth: 10,
        },
    },
    dataLabels: {
        enabled: false,
    },
    stroke: {
        show: true,
        width: 2,
        colors: ["transparent"],
    },
    xaxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
        ],
    },
    yaxis: {
        categories: [
            "0",
            "5000",
            "10,000",
            "20,000",
            "30,000",
            "50,000",
            "60,000",
            "60,000",
            "70,000",
            "80,000",
            "90,000",
            "100,000",
        ],
    },
    fill: {
        opacity: 1,
        width: 18,
    },
};

var chart = new ApexCharts(
    document.querySelector("#paymentStatusChart-amdal"),
    options
);
chart.render();
// ================================ Amdal Distribusi Chart End ================================

// ================================ J Vector Map Start ================================
$("#world-map").vectorMap({
    map: "world_mill_en",
    backgroundColor: "transparent",
    borderColor: "#fff",
    borderOpacity: 0.25,
    borderWidth: 0,
    color: "#000000",
    regionStyle: {
        initial: {
            fill: "#D1D5DB",
        },
    },
    markerStyle: {
        initial: {
            r: 5,
            fill: "#fff",
            "fill-opacity": 1,
            stroke: "#000",
            "stroke-width": 1,
            "stroke-opacity": 0.4,
        },
    },
    markers: [
        {
            latLng: [35.8617, 104.1954],
            name: "China : 250",
        },

        {
            latLng: [25.2744, 133.7751],
            name: "AustrCalia : 250",
        },

        {
            latLng: [36.77, -119.41],
            name: "USA : 82%",
        },

        {
            latLng: [55.37, -3.41],
            name: "UK   : 250",
        },

        {
            latLng: [25.2, 55.27],
            name: "UAE : 250",
        },
    ],

    series: {
        regions: [
            {
                values: {
                    US: "#487FFF ",
                    SA: "#487FFF",
                    AU: "#487FFF",
                    CN: "#487FFF",
                    GB: "#487FFF",
                },
                attribute: "fill",
            },
        ],
    },
    hoverOpacity: null,
    normalizeFunction: "linear",
    zoomOnScroll: false,
    scaleColors: ["#000000", "#000000"],
    selectedColor: "#000000",
    selectedRegions: [],
    enableZoom: false,
    hoverColor: "#fff",
});
// ================================ J Vector Map End ================================