"use strict";

setTimeout(() => {

    /* total sales */
    
    /* total sales */

    /* total revenue */
    var options = {
        chart: {
            height: 120,
            width: 100,
            type: "radialBar",
        },
        series: [62],
        colors: ["var(--primary-color)"],
        plotOptions: {
            radialBar: {
                hollow: {
                    margin: 0,
                    size: "50%",
                    background: "#fff"
                },
                dataLabels: {
                    name: {
                        offsetY: -10,
                        color: "#4b9bfa",
                        fontSize: "10px",
                        show: false
                    },
                    value: {
                        offsetY: 5,
                        color: "#4b9bfa",
                        fontSize: "11px",
                        show: true,
                        fontWeight: 500
                    }
                }
            }
        },
        stroke: {
            lineCap: "round"
        },
        labels: ["Followers"]
    };
    var chart5 = new ApexCharts(document.querySelector("#total-revenue"), options);
    chart5.render();
    /* total revenue */

    /* page views */
    var options = {
        chart: {
            height: 120,
            width: 100,
            type: "radialBar",
        },
        series: [80],
        colors: ["var(--primary-color)"],
        plotOptions: {
            radialBar: {
                hollow: {
                    margin: 0,
                    size: "50%",
                    background: "#fff"
                },
                dataLabels: {
                    name: {
                        offsetY: -10,
                        color: "#4b9bfa",
                        fontSize: "10px",
                        show: false
                    },
                    value: {
                        offsetY: 5,
                        color: "#4b9bfa",
                        fontSize: "11px",
                        show: true,
                        fontWeight: 500
                    }
                }
            }
        },
        stroke: {
            lineCap: "round"
        },
        labels: ["Followers"]
    };
    var chart5 = new ApexCharts(document.querySelector("#page-views"), options);
    chart5.render();
    /* page views */

    /* profit per sale */
    var options = {
        chart: {
            height: 120,
            width: 100,
            type: "radialBar",
        },
        series: [25],
        colors: ["var(--primary-color)"],
        plotOptions: {
            radialBar: {
                hollow: {
                    margin: 0,
                    size: "50%",
                    background: "#fff"
                },
                dataLabels: {
                    name: {
                        offsetY: -10,
                        color: "#4b9bfa",
                        fontSize: "10px",
                        show: false
                    },
                    value: {
                        offsetY: 5,
                        color: "#4b9bfa",
                        fontSize: "11px",
                        show: true,
                        fontWeight: 500
                    }
                }
            }
        },
        stroke: {
            lineCap: "round"
        },
        labels: ["Followers"]
    };
    var chart5 = new ApexCharts(document.querySelector("#profit-per-sale"), options);
    chart5.render();
    /* profit per sale */

    /* sales statistics */
    
    var chart4 = new ApexCharts(document.querySelector("#sales-statistics"), options);
    chart4.render();
    /* sales statistics */

    /* website traffic */
    var _seed = 42;
    Math.random = function() {
    _seed = _seed * 16807 % 2147483647;
    return (_seed - 1) / 2147483646;
    };
    var lastDate = 0;
    var data = [];
    var TICKINTERVAL = 86400000;
    let XAXISRANGE = 777600000;
    function getDayWiseTimeSeries(baseval, count, yrange) {
    var i = 0;
    while (i < count) {
        var x = baseval + i * TICKINTERVAL;
        var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
        console.log(x);
        console.log(y);
        data.push({
        x, y
        });
        lastDate = x;
        i++;
    }

    // Ensure data length is exactly 20
    if (data.length > 20) {
        data = data.slice(data.length - 20);
    }
    }
    getDayWiseTimeSeries(new Date('11 Feb 2024 GMT').getTime(), 20, {
    min: 10,
    max: 90
    });
    function getNewSeries(baseval, yrange) {
    var newDate = baseval + TICKINTERVAL;
    lastDate = newDate;

    for (var i = 0; i < data.length - 10; i++) {
        // IMPORTANT
        // we reset the x and y of the data which is out of drawing area
        // to prevent memory leaks
        data[i].x = newDate - XAXISRANGE - TICKINTERVAL;
        data[i].y = 0;
    }

    data.push({
        x: newDate,
        y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
    });

    // Ensure data length is capped at 20
    data = data.slice(-20);
    }
    var options = {
    series: [{
        data: data.slice()
    }],
    chart: {
        id: 'realtime',
        height: 300,
        type: 'bar',
        animations: {
        enabled: true,
        easing: 'linear',
        dynamicAnimation: {
            speed: 500
        }
        },
        toolbar: {
        show: false
        },
        zoom: {
        enabled: false
        }
    },
    plotOptions: {
        bar: {
        columnWidth: "30%",
        borderRadius:4
        }
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'smooth'
    },
    colors: ["var(--primary-color)"],
    markers: {
        size: 0
    },
    fill: {
        type: "gradient",
        gradient: {
        shade: "dark",
        type: "vertical",
        shadeIntensity: 0.5,
        inverseColors: false,
        gradientToColors: ["rgb(0, 227, 210)"],
        opacityFrom: 1,
        opacityTo: 0,
        stops: [0, 90, 100]
        }
    },
    xaxis: {
        type: 'datetime',
        range: XAXISRANGE,
        labels: {
        show: true,
        },
        axisBorder: {
        show: false,
        },
        axisTicks: {
        show: false,
        },
        crosshairs: {
        show: false,
        }
    },
    yaxis: {
        max: 100,
        labels: {
        show: false,
        },
        axisBorder: {
        show: false,
        },
        axisTicks: {
        show: false,
        },
        crosshairs: {
        show: false,
        }
    },
    legend: {
        show: false
    },
    };
    var chart = new ApexCharts(document.querySelector("#website-traffic"), options);
    chart.render();
    window.setInterval(function () {
    getNewSeries(lastDate, {
        min: 10,
        max: 90
    });
    chart.updateSeries([{
        data: data
    }]);
    }, 3000);
    /* website traffic */

    /* Profit Analysis */
    var options = {
        chart: {
            height: 250,
            type: 'radialBar',
            responsive: 'true',
        },
        plotOptions: {
            radialBar: {
                startAngle: -135,
                endAngle: 135,
                size: 120,
                imageWidth: 50,
                imageHeight: 50,
                track: {
                    strokeWidth: "0",
                },
                dropShadow: {
                    enabled: false,
                    top: 0,
                    left: 0,
                    bottom: 0,
                    blur: 3,
                    opacity: 0.5
                },
                dataLabels: {
                    name: {
                        fontSize: '16px',
                        color: undefined,
                        offsetY: 30,
                    },
                    hollow: {
                        size: "60%"
                    },
                    value: {
                        offsetY: -10,
                        fontSize: '22px',
                        color: undefined,
                        formatter: function (val) {
                            return val + "%";
                        }
                    }
                }
            }
        },
        colors: ['var(--primary-color)'],
        fill: {
        type: 'gradient',
        gradient: {
            shadeIntensity: 1,
            type: "horizontal",
            gradientToColors: ["rgb(0, 227, 210)"],
            opacityFrom: 1,
            opacityTo: 1,
            stops: [0, 100]
        }
        },
        stroke: {
            dashArray: 3
        },
        series: [92],
        labels: ["Profit"]
    };
    var chart1 = new ApexCharts(document.querySelector("#profit-analysis"), options);
    chart1.render();
    /* Profit Analysis */

    /* Tilt JS */
    const tilt = document.querySelectorAll(".tilt");
    VanillaTilt.init(tilt, {
        reverse: true,
        max: 15,
        speed: 300,
        scale: 1,
        glare: true,
        reset: true,
        perspective: 500,
        transition: true,
        "max-glare": 0.45,
        "glare-prerender": false,
        gyroscope: true,
        gyroscopeMinAngleX: -45,
        gyroscopeMaxAngleX: 45,
        gyroscopeMinAngleY: -45,
        gyroscopeMaxAngleY: 45
    });
    /* Tilt JS */
    
}, 200);