@extends('admin.layouts.container')

@section('content')

    <div class="dashbord_home">
        <div class="row">

        <!-- ------------ charts ------------- -->
        <div class="charts_container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="chart_box mb-4">
                        <div class="chart_head mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h5> العنوان هنا </h5>
                                </div>
                            </div>
                        </div>
                        <div id="chart8"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="chart_box mb-4">
                        <div class="chart_head mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h5> الطاقة الاستيعابية للزوار </h5>
                                </div>
                            </div>
                        </div>
                        <div id="chart4"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="chart_box mb-4">
                        <div class="chart_head mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h5> عدد الزوار اسبوعيا  </h5>
                                </div>
                            </div>
                        </div>
                        <div id="bar_chart3"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="chart_box mb-4">
                        <div class="chart_head mb-4">
                            <div class="row">
                                <div class="col-lg-7">
                                    <h5>الزيارات حسب اليوم</h5>
                                </div>
                            </div>
                        </div>
                        <div class="chart_cont" dir="ltr">
                            <div id="chart7"></div>
                        </div>
                    </div>
                </div>
                <!--<div class="col-lg-6">-->
                <!--    <div class="chart_box mb-4">-->
                <!--        <div class="chart_head mb-4">-->
                <!--            <div class="row">-->
                <!--                <div class="col-lg-12">-->
                <!--                    <h5> زيارات الاقسام </h5>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--        <div class="chart_cont" dir="ltr">-->
                <!--            <div id="h_bar_chart"></div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->
                <div class="col-lg-6">
                    <div class="chart_box mb-4">
                        <div class="chart_head mb-4">
                            <div class="row">
                                <div class="col-lg-7">
                                    <h5>مسؤولين البيع</h5>
                                </div>
                                <div class="col-lg-5">
                                    <input type="text" name="daterange" class="datarange fnt_rpt form-control input_gray" />
                                </div>
                            </div>
                        </div>
                        <div id="bar_chart"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="chart_box mb-4">
                        <div class="chart_head mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h5> العنوان هنا </h5>
                                </div>
                            </div>
                        </div>
                        <div id="chart5"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="chart_box mb-4">
                        <div class="chart_head mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h5> العنوان هنا </h5>
                                </div>
                            </div>
                        </div>
                        <div id="chart6"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="chart_box mb-4">
                        <div class="chart_head mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h5> العنوان هنا </h5>
                                </div>
                            </div>
                        </div>
                        <div id="chart9"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="chart_box mb-4">
                        <div class="chart_head mb-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h5> العنوان هنا </h5>
                                </div>
                            </div>
                        </div>
                        <div id="chart10"></div>
                    </div>
                </div>
            </div>
        </div>


        </div>
    </div>
@endsection

@section('inner_js')

<script>
    const state_route= '{{ route("dashboard.stats") }}'
</script>
<script src="{{asset('assets/admin/js/lib/Chart.min.js')}}"></script>
<script src="{{ asset('assets/admin/js/charts.js') }}"></script>

    <!----------- new scripts ----------->
    <!-- ------- apex chart -------------- -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <!-- ----------- datepicker ----------- -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <!-- ---------- charts ---------- -->
    <script>
        var bar_chart_options = {
            series: [{
                name:  'حالات التفاوض ',
                data: [44, 55, 57, 56, 61, 58, 63]
            }, {
                name: 'حالات البيع ',
                data: [35, 41, 36, 26, 45, 48, 52]
            }],
            colors: ['#303AB2', '#76B73A'],
            chart: {
                type: 'bar',
                height: 350
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded'
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            xaxis: {
                categories: ['يناير','فبراير', 'مارس', 'ابريل', 'مايو', 'يونيو','يوليو','اغسطس'],
            },
            yaxis: {
                title: {
                    text: ''
                }
            },
            fill: {
                opacity: 1
            },
            tooltip: {
                y: {
                    formatter: function(val) {
                        return val + " ريال"
                    }
                }
            },
        };
        var chart = new ApexCharts(document.querySelector("#bar_chart"), bar_chart_options);
        chart.render();
    </script>

    <script>
        var bar_chart_options = {
            series: [{
                name:  'الزيارات ',
                data: [10, 30, 60, 40, 15, 32, 55]
            }],
            colors: ['#303AB2'],
            chart: {
                type: 'bar',
                height: 350
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded'
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            xaxis: {
                categories: ['الجمعة','الخميس','الاربعاء','الثلاثاء','الاثنين', 'الاحد','السبت'],
            },
            yaxis: {
                title: {
                    text: ''
                }
            },
            fill: {
                opacity: 1
            },
            // tooltip: {
            //     y: {
            //         formatter: function(val) {
            //             return val + " ريال"
            //         }
            //     }
            // },
        };
        var chart = new ApexCharts(document.querySelector("#bar_chart3"), bar_chart_options);
        chart.render();
    </script>

    <script>
        var bar_chart_options = {
            series: [{
                name: 'الجمعة ',
                data: [12, 20, 35, 85, 80, 72, 63, 20, 32, 44, 25, 15]
            }, {
                name: 'الخميس ',
                data: [15, 24, 35, 74, 41, 76, 55, 32, 54, 20, 30, 10]
            }, {
                name: 'الاربعاء ',
                data: [23, 56, 24, 42, 20, 54, 55, 87, 65, 30, 45, 30]
            }, {
                name: 'الثلاثاء ',
                data: [40, 54, 65, 78, 54, 24, 35, 12, 45, 65, 12, 5]
            }, {
                name: 'الأتنين ',
                data: [15, 25, 45, 74, 78, 80, 65, 12, 5, 12, 10, 10]
            }, {
                name: 'الاحد ',
                data: [15, 24, 35, 44, 45, 65, 70, 52, 54, 20, 15, 10]
            }, {
                name:  'السبت ',
                data: [15, 12, 45, 74, 75, 76, 41, 52, 54, 20, 30, 10]
            }],
            colors: ['#303AB2'],
            chart: {
                type: 'heatmap',
                height: 350
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded'
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: true,
                width: 2,
                // colors: ['transparent']
            },
            xaxis: {
                categories: ['12AM','2PM','4PM','6PM','8PM', '10PM','12PM','2AM','4AM','6AM','8AM','10AM'],
            },
            yaxis: {
                title: {
                    text: ''
                }
            },
            fill: {
                opacity: 1
            },
        };
        var chart = new ApexCharts(document.querySelector("#chart7"), bar_chart_options);
        chart.render();
    </script>

    <script>
        var options = {
            series: [45, 55],
            colors:['#303AB2', '#f0f0f0'],
            chart: {
            type: 'donut',
        },
        tooltip: {
            enabled: false,
        },
        legend: {
        show: true,
        position: 'bottom',
        },
        responsive: [{
        breakpoint: 480,
        options: {
            chart: {
            width: 200
            },
            legend: {
            position: 'bottom'
            }
        }
        }]
        };

        var chart = new ApexCharts(document.querySelector("#chart4"), options);
        chart.render();
    </script>

    <script>
        var options = {
            series: [{
                data: [4000, 5000, 6000, 7000, 8000, 9000, 10000, 11000]
            }],
        chart: {
        type: 'bar',
        height: 380
        },
        plotOptions: {
        bar: {
            barHeight: '80%',
            distributed: true,
            horizontal: true,
            borderRadius: 5,
            dataLabels: {
            position: 'bottom'
            },
        }
        },
        colors: ['#DA4453', '#ED5565', '#FC6E51', '#F6BB42', '#E0C341', '#A0D468', '#2ECC71', '#4FC1E9'
        ],
        xaxis: {
            categories: ['القسم 1', 'القسم 2', 'القسم 4', 'القسم 5', 'القسم 41', 'القسم 7', 'القسم 45', 'القسم 5']

        },
        };

        var chart = new ApexCharts(document.querySelector("#h_bar_chart"), options);
        chart.render();
    </script>

    <script>
        var options = {
            series: [{
                data: [4582, 7455, 1254, 7854, 4521, 6522, 2220, 7888, 1422, 4587]
            }],
        chart: {
        type: 'bar',
        height: 380
        },
        plotOptions: {
        bar: {
            barHeight: '80%',
            distributed: true,
            horizontal: true,
            borderRadius: 5,
            dataLabels: {
            position: 'bottom'
            },
        }
        },
        colors: ['#DA4453', '#ED5565', '#FC6E51', '#F6BB42', '#E0C341', '#A0D468', '#2ECC71', '#4FC1E9',
        '#AC92EC', '#BAA286'
        ],
        xaxis: {
            categories: ['القسم 1', 'القسم 2', 'القسم 4', 'القسم 5', 'القسم 9', 'القسم 0', 'القسم 41', 'القسم 7', 'القسم 45', 'القسم 5']

        },
        };

        var chart = new ApexCharts(document.querySelector("#h_bar_chart1"), options);
        chart.render();
    </script>

    <script>
        // chart.render();
        var options = {
            chart: {
                height: 410,
                type: "radialBar"
            },
            plotOptions: {
                circle: {
                    dataLabels: {
                        showOn: "hover"
                    }
                }
            },
            series: [44, 55, 67, 83],
            labels: ["Apples", "Oranges", "Bananas", "Berries"]
        };

        var chart = new ApexCharts(document.querySelector("#chart6"), options);
        chart.render();
    </script>

    <script>
        var options = {
            series: [
                {
                data: [10, 20, 15, 30, 35, 30, 45, 59, 30, 35, 25, 29, 15]
                }
            ],
            chart: {
                type: "area",
                height: 350,
                background: "#fff",
                dropShadow: {
                enabled: true,
                color: "#999"
                },
                zoom: {
                enabled: false
                }
            },
            dataLabels: {
                enabled: false
            },
            markers: {
                colors: ["#FFFFFF"]
            },
            stroke: {
                curve: "smooth",
                width: 3,
                fill: {
                type: "gradient",
                gradient: {
                    type: "horizontal",
                    colorStops: [
                    [
                        {
                        offset: 0,
                        color: "#5892FF",
                        opacity: 1
                        },
                        {
                        offset: 33,
                        color: "#5892FF",
                        opacity: 1
                        },
                        {
                        offset: 80,
                        color: "#5892FF",
                        opacity: 1
                        },
                        {
                        offset: 99,
                        color: "#5892FF",
                        opacity: 1
                        }
                    ]
                    ]
                }
                }
            },
            fill: {
                type: "gradient",
                gradient: {
                shadeIntensity: 1,
                type: "vertical",
                colorStops: [
                    [
                    {
                        offset: 0,
                        color: "#5892FF",
                        opacity: 1.0
                    },
                    {
                        offset: 70,
                        color: "#5892FF",
                        opacity: 0.2
                    },
                    {
                        offset: 97,
                        color: "#6510F8",
                        opacity: 0.0
                    }
                    ]
                ]
                }
            },
            xaxis: {
                axisBorder: {
                show: false
                },
                axisTicks: {
                show: false
                },
                labels: {
                style: {
                    colors: "#aaa"
                }
                }
            },
            yaxis: {
                labels: {
                show: false
                }
            },
            grid: {
                borderColor: "#f0f0f0"
            },
            legend: {
                horizontalAlign: "left"
            },
            };

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

    </script>

    <script>
        // Initializing the dataset
        var dataSet = [
          // Data for Product A
          [
            [new Date("01/01/2024").getTime(), 1200000],
            [new Date("01/02/2024").getTime(), 1300000],
            [new Date("01/03/2024").getTime(), 1400000],
            [new Date("01/04/2024").getTime(), 1450000],
            [new Date("01/05/2024").getTime(), 1500000],
            [new Date("01/06/2024").getTime(), 1350000],
            [new Date("01/07/2024").getTime(), 1400000]
          ],
          // Data for Product B
          [
            [new Date("01/01/2024").getTime(), 900000],
            [new Date("01/02/2024").getTime(), 950000],
            [new Date("01/03/2024").getTime(), 1000000],
            [new Date("01/04/2024").getTime(), 1050000],
            [new Date("01/05/2024").getTime(), 1100000],
            [new Date("01/06/2024").getTime(), 1150000],
            [new Date("01/07/2024").getTime(), 1200000]
          ],
          // Data for Product C
          [
            [new Date("01/03/2024").getTime(), 850000],
            [new Date("01/04/2024").getTime(), 900000],
            [new Date("01/05/2024").getTime(), 950000],
            [new Date("01/06/2024").getTime(), 1000000],
            [new Date("01/07/2024").getTime(), 1050000]
          ]
        ];

        var options = {
          series: [{
            name: 'PRODUCT A',
            data: dataSet[0]
          }, {
            name: 'PRODUCT B',
            data: dataSet[1]
          }, {
            name: 'PRODUCT C',
            data: dataSet[2]
          }],
          chart: {
            type: 'area',
            stacked: false,
            height: 350,
            zoom: {
              enabled: false
            },
          },
          dataLabels: {
            enabled: false
          },
          markers: {
            size: 0,
          },
          fill: {
            type: 'gradient',
            gradient: {
              shadeIntensity: 1,
              inverseColors: false,
              opacityFrom: 0.45,
              opacityTo: 0.05,
              stops: [20, 100, 100, 100]
            },
          },
          yaxis: {
            labels: {
              style: {
                colors: '#8e8da4',
              },
              offsetX: 0,
              formatter: function(val) {
                return (val / 1000000).toFixed(2); // Dividing by a million to format values
              },
            },
            axisBorder: {
              show: false,
            },
            axisTicks: {
              show: false
            }
          },
          xaxis: {
            type: 'datetime',
            tickAmount: 8,
            min: new Date("01/01/2024").getTime(),
            max: new Date("01/07/2024").getTime(),
            labels: {
              rotate: -15,
              rotateAlways: true,
              formatter: function(val, timestamp) {
                return moment(new Date(timestamp)).format("DD MMM YYYY")
              }
            }
          },
          title: {
            text: 'Irregular Data in Time Series',
            align: 'left',
            offsetX: 14
          },
          tooltip: {
            shared: true
          },
          legend: {
            position: 'top',
            horizontalAlign: 'right',
            offsetX: -10
          }
        };

        var chart = new ApexCharts(document.querySelector("#chart8"), options);
        chart.render();
    </script>


    <script>
        var options = {
          series: [{
          name: 'Points',
          type: 'scatter',

          //2.14, 2.15, 3.61, 4.93, 2.4, 2.7, 4.2, 5.4, 6.1, 8.3
          data: [{
            x: 1,
            y: 2.14
          }, {
            x: 1.2,
            y: 2.19
          }, {
            x: 1.8,
            y: 2.43
          }, {
            x: 2.3,
            y: 3.8
          }, {
            x: 2.6,
            y: 4.14
          }, {
            x: 2.9,
            y: 5.4
          }, {
            x: 3.2,
            y: 5.8
          }, {
            x: 3.8,
            y: 6.04
          }, {
            x: 4.55,
            y: 6.77
          }, {
            x: 4.9,
            y: 8.1
          }, {
            x: 5.1,
            y: 9.4
          }, {
            x: 7.1,
            y: 7.14
          },{
            x: 9.18,
            y: 8.4
          }]
        }, {
          name: 'Line',
          type: 'line',
          data: [{
            x: 1,
            y: 2
          }, {
            x: 2,
            y: 3
          }, {
            x: 3,
            y: 4
          }, {
            x: 4,
            y: 5
          }, {
            x: 5,
            y: 6
          }, {
            x: 6,
            y: 7
          }, {
            x: 7,
            y: 8
          }, {
            x: 8,
            y: 9
          }, {
            x: 9,
            y: 10
          }, {
            x: 10,
            y: 11
          }]
        }],
          chart: {
          height: 350,
          type: 'line',
        },
        fill: {
          type:'solid',
        },
        markers: {
          size: [6, 0]
        },
        tooltip: {
          shared: false,
          intersect: true,
        },
        legend: {
          show: false
        },
        xaxis: {
          type: 'numeric',
          min: 0,
          max: 12,
          tickAmount: 12
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart9"), options);
        chart.render();
    </script>

    <script>
        var options = {
          series: [
          {
            data: [
              {
                x: 'Operations',
                y: [2800, 4500]
              },
              {
                x: 'Customer Success',
                y: [3200, 4100]
              },
              {
                x: 'Engineering',
                y: [2950, 7800]
              },
              {
                x: 'Marketing',
                y: [3000, 4600]
              },
              {
                x: 'Product',
                y: [3500, 4100]
              },
              {
                x: 'Data Science',
                y: [4500, 6500]
              },
              {
                x: 'Sales',
                y: [4100, 5600]
              }
            ]
          }
        ],
          chart: {
          height: 390,
          type: 'rangeBar',
          zoom: {
            enabled: false
          }
        },
        colors: ['#EC7D31', '#36BDCB'],
        plotOptions: {
          bar: {
            horizontal: true,
            isDumbbell: true,
            dumbbellColors: [['#EC7D31', '#36BDCB']]
          }
        },
        title: {
          text: 'Paygap Disparity'
        },
        legend: {
          show: true,
          showForSingleSeries: true,
          position: 'top',
          horizontalAlign: 'left',
          customLegendItems: ['Female', 'Male']
        },
        fill: {
          type: 'gradient',
          gradient: {
            gradientToColors: ['#36BDCB'],
            inverseColors: false,
            stops: [0, 100]
          }
        },
        grid: {
          xaxis: {
            lines: {
              show: true
            }
          },
          yaxis: {
            lines: {
              show: false
            }
          }
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart10"), options);
        chart.render();
    </script>


    <!-- ---------- date range ---------- -->
    <script>
        $(function() {
            $('input.datarange').daterangepicker({
                opens: 'left',
            }, function(start, end, label) {
                console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
            });
        });
    </script>

    <!-- ----------- table select ---------- -->
    <script>
        $(function() {
            $('#selectall').on('click', function() {
                $('.selectOne').prop('checked', this.checked);
            });

            $('.selectOne').change(function() {
                var check = ($('.selectOne').filter(":checked").length == $('.selectOne').length);
                $('#selectall').prop("checked", check);
            });
        });
    </script>

@endsection