'use strict';
document.addEventListener('DOMContentLoaded', function () {
    setTimeout(function () {
        floatchart();
    }, 500);
    if (!!document.querySelector('.user-scroll')) {
        new SimpleBar(document.querySelector('.user-scroll'));
    }
    if (!!document.querySelector('.feed-scroll')) {
        new SimpleBar(document.querySelector('.feed-scroll'));
    }
    const datepicker_inline = new Datepicker(document.querySelector('#pc-datepicker-6'), {
        buttonClass: 'btn'
    });
    peity.defaults.donut = {
        delimiter: null,
        fill: ["#ff9900", "#fff4dd", "#ffd592"],
        height: null,
        innerRadius: 11,
        radius: 16,
        width: null,
    };
    document.querySelectorAll(".donut").forEach((e) => peity(e, "donut"));
});

function floatchart() {
    (function () {
        var options = {
            chart: {
                type: 'area',
                height: 250,
                toolbar: {
                  show: false
                }
              },
              colors: ['#f4c22b', '#4680ff'],
              dataLabels: {
                enabled: false
              },
              legend: {
                show: true,
                position: 'top'
              },
              markers: {
                size: 1,
                colors: ['#fff', '#fff', '#fff'],
                strokeColors: ['#f4c22b', '#4680ff'],
                strokeWidth: 1,
                shape: 'circle',
                hover: {
                  size: 4
                }
              },
              stroke: {
                width: 2,
                curve: 'smooth'
              },
              fill: {
                type: 'gradient',
                gradient: {
                  shadeIntensity: 1,
                  type: 'vertical',
                  inverseColors: false,
                  opacityFrom: 0.5,
                  opacityTo: 0
                }
              },
              grid: {
                show: false,
              },
              series: [
                {
                  name: 'Revenue',
                  data: [200, 320, 320, 275, 275, 400, 400, 300, 440, 320, 320, 275, 275, 400, 300, 440]
                },
                {
                  name: 'Sales',
                  data: [200, 250, 240, 300, 340, 320, 320, 400, 350, 250, 240, 300, 340, 320, 400, 350]
                }
              ],
              xaxis: {
                labels: {
                  hideOverlappingLabels: true
                },
                axisBorder: {
                  show: false
                },
                axisTicks: {
                  show: false
                }
              }
        };
        var chart = new ApexCharts(document.querySelector("#revenue-sales-chart"), options);
        chart.render();
        var invites_goal_chart_option = {
            series: [76],
            chart: {
                type: 'radialBar',
                offsetY: -20,
                sparkline: {
                enabled: true
                }
            },
            colors: ['#04a9f5'],
            plotOptions: {
                radialBar: {
                startAngle: -95,
                endAngle: 95,
                hollow: {
                    margin: 15,
                    size: '50%',
                },
                track: {
                    background: '#eaeaea',
                    strokeWidth: '97%',
                    margin: 20
                },
                dataLabels: {
                    name: {
                    show: false
                    },
                    value: {
                    offsetY: 0,
                    fontSize: '20px'
                    }
                }
                }
            },
            grid: {
                padding: {
                top: 10
                }
            },
            stroke: {
                lineCap: 'round'
            },
            labels: ['Average Results']
        };
        var chart = new ApexCharts(document.querySelector('#invites-goal-chart'), invites_goal_chart_option);
        chart.render();

        var course_report_bar_chart_options = {
            chart: {
              type: 'bar',
              height: 210,
              toolbar: {
                show: false
              }
            },
            plotOptions: {
              bar: {
                columnWidth: '60%',
                borderRadius: 3
              }
            },
            stroke: {
              show: true,
              width: 3,
              colors: ['transparent']
            },
            dataLabels: {
              enabled: false
            },
            legend: {
              position: 'top',
              horizontalAlign: 'right',
              show: true,
              fontFamily: `'Public Sans', sans-serif`,
              offsetX: 10,
              offsetY: 10,
              labels: {
                useSeriesColors: false
              },
              markers: {
                width: 10,
                height: 10,
                radius: '50%',
                offsexX: 2,
                offsexY: 2
              },
              itemMargin: {
                horizontal: 15,
                vertical: 5
              }
            },
            colors: ['#04a9f5', '#ffa21d'],
            series: [{
              name: 'Net Profit',
              data: [180, 90, 135, 114, 120, 145, 180, 90, 135, 114, 120, 145]
            }, {
              name: 'Revenue',
              data: [120, 45, 78, 150, 168, 99, 120, 45, 78, 150, 168, 99]
            }],
            grid:{
              borderColor: '#00000010',
            },
            yaxis: {
              show:false
            }
        }
        var chart = new ApexCharts(document.querySelector("#course-report-bar-chart"), course_report_bar_chart_options);
        chart.render();

        var total_revenue_line_1_chart_options = {
            chart: {
              type: 'line',
              height: 60,
              sparkline: {
                enabled: true
              }
            },
            dataLabels: {
              enabled: false
            },
            colors: ['#1de9b6'],
            stroke: {
              curve: 'straight',
              lineCap: 'round',
              width: 3
            },
            series: [
              {
                name: 'series1',
                data: [20, 10, 18, 12, 25, 10, 20]
              }
            ],
            yaxis: {
              min: 0,
              max: 30
            },
            tooltip: {
              theme: 'dark',
              fixed: {
                enabled: false
              },
              x: {
                show: false
              },
              y: {
                title: {
                  formatter: function (seriesName) {
                    return '';
                  }
                }
              },
              marker: {
                show: false
              }
            }
        }
        var chart = new ApexCharts(document.querySelector("#total-revenue-line-1-chart"), total_revenue_line_1_chart_options);
        chart.render();

        var total_revenue_line_2_chart_options = {
            chart: {
              type: 'line',
              height: 60,
              sparkline: {
                enabled: true
              }
            },
            dataLabels: {
              enabled: false
            },
            colors: ['#f44236'],
            stroke: {
              curve: 'straight',
              lineCap: 'round',
              width: 3
            },
            series: [
              {
                name: 'series1',
                data: [20, 10, 25, 18, 18, 10, 12]
              }
            ],
            yaxis: {
              min: 0,
              max: 30
            },
            tooltip: {
              theme: 'dark',
              fixed: {
                enabled: false
              },
              x: {
                show: false
              },
              y: {
                title: {
                  formatter: function (seriesName) {
                    return '';
                  }
                }
              },
              marker: {
                show: false
              }
            }
        }
        var chart = new ApexCharts(document.querySelector("#total-revenue-line-2-chart"), total_revenue_line_2_chart_options);
        chart.render();

        var student_states_chart_options = {
            chart: {
              height: 250,
              type: 'donut'
            },
            dataLabels: {
              enabled: false
            },
            plotOptions: {
              pie: {
                donut: {
                  size: '65%'
                }
              }
            },
            labels: ['Total Signups', 'Active Student'],
            series: [76.7,  30],
            legend: {
              show: true,
              position: 'bottom',
            },
            fill: {
               opacity: [1, 0.5],
            },
            colors: ['#04a9f5', '#04a9f5']
        }
        var chart = new ApexCharts(document.querySelector("#student-states-chart"), student_states_chart_options);
        chart.render();

        var activity_line_chart_options = {
            chart: {
              type: 'line',
              height: 300,
              toolbar: {
                show: false
              }
            },
            colors: ['#1de9b6', '#4680ff'],
            dataLabels: {
              enabled: false
            },
            legend: {
              show: true,
              position: 'top',
            },
            markers: {
              size: 1,
              colors: ['#fff', '#fff', '#fff'],
              strokeColors: ['#1de9b6', '#4680ff'],
              strokeWidth: 1,
              shape: 'circle',
              hover: {
                size: 4
              }
            },
            stroke: {
              width: 3,
              curve: 'smooth',
            },
            grid: {
              strokeDashArray: 4
            },
            series: [
              {
                name: 'Free Course',
                data: [20, 90, 65, 85, 20, 80, 30]
              },
              {
                name: 'Subscription',
                data: [70, 30, 40, 15, 60, 40, 95]
              }
            ],
            xaxis: {
              labels: {
                hideOverlappingLabels: true
              },
              axisBorder: {
                show: false
              },
              axisTicks: {
                show: false
              }
            }
        }
        var chart = new ApexCharts(document.querySelector("#activity-line-chart"), activity_line_chart_options);
        chart.render();

        var visitors_bar_chart_options = {
            chart: {
                type: 'bar',
                height: 220,
                toolbar: {
                show: false
                }
            },
            colors: ['#1de9b6'],
            dataLabels: {
                enabled: false
            },
            grid: {
                strokeDashArray: 4
            },
            yaxis: {
                tickAmount: 3
            },
            states: {
                normal: {
                filter: {
                    type: 'lighten',
                    value: .5
                }
                },
                hover: {
                filter: {
                    type: 'lighten',
                    value: 0
                }
                }
            },
            plotOptions: {
                bar: {
                borderRadius: 2,
                columnWidth: '50%'
                }
            },
            labels: [
                '2018',
                '2019',
                '2020',
                '2021',
                '2022',
                '2023'
            ],
            series: [
                {
                data: [20, 15, 22, 25, 32, 50]
                }
            ]
        }
        var chart = new ApexCharts(document.querySelector("#visitors-bar-chart"), visitors_bar_chart_options);
        chart.render();

        var earning_courses_line_chart_options = {
            chart: {
              type: 'line',
              height: 230,
              toolbar: {
                show: false
              }
            },
            colors: ['#f4c22b', '#4680ff'],
            dataLabels: {
              enabled: false
            },
            markers: {
              size: 1,
              colors: ['#fff', '#fff', '#fff'],
              strokeColors: ['#f4c22b', '#4680ff'],
              strokeWidth: 1,
              shape: 'circle',
              hover: {
                size: 4
              }
            },
            stroke: {
              width: 3
            },
            grid: {
              strokeDashArray: 4
            },
            series: [
              {
                name: 'Last Month',
                data: [200, 320, 275, 400, 300, 440]
              }
            ],
            xaxis: {
              labels: {
                hideOverlappingLabels: true
              },
              axisBorder: {
                show: false
              },
              axisTicks: {
                show: false
              }
            }
        }
        var chart = new ApexCharts(document.querySelector("#earning-courses-line-chart"), earning_courses_line_chart_options);
        chart.render();


    })();
}