@extends('admin.layouts.container')

@section('content')
    <div class="dashbord_home">
        
        <!-- ------------ data cards ------------- -->
        <div class="row">
            <div class="col-lg-3">
                <div class="data_card">
                    <div class="content">
                        <div class="head_card d-flex align-items-center">
                            <div class="icon_box"> <img src="{{url('')}}/assets/store_admin/images/icons/home/data-1.svg" class="icon" alt="">  </div>
                            <h6 class="title mb-0"> Total Sales </h6>
                        </div>

                        <h1 class="number"> SAR  271,632.09 </h1>

                        <h5 class="ratio_txt">
                            <span class="text-success me-1"> <i class="fas fa-sort-up"></i> </span>
                            <span class="me-2"> 25,5% </span>
                            <span class="color-gray"> +4k Today </span>
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="data_card">
                    <div class="content">
                        <div class="head_card d-flex align-items-center">
                            <div class="icon_box"> <img src="{{url('')}}/assets/store_admin/images/icons/home/data-2.svg" class="icon" alt="">  </div>
                            <h6 class="title mb-0">   Total Orders today </h6>
                        </div>

                        <h1 class="number"> 1,354,121 </h1>

                        <h5 class="ratio_txt">
                            <span class="text-success me-1"> <i class="fas fa-sort-up"></i> </span>
                            <span class="me-2"> 5% </span>
                            <span class="color-gray"> +4k Today </span>
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="data_card">
                    <div class="content">
                        <div class="head_card d-flex align-items-center">
                            <div class="icon_box"> <img src="{{url('')}}/assets/store_admin/images/icons/home/data-3.svg" class="icon" alt="">  </div>
                            <h6 class="title mb-0">   Total Number of Orders  </h6>
                        </div>

                        <h1 class="number"> 13,213 </h1>

                        <h5 class="ratio_txt">
                            <span class="text-success me-1"> <i class="fas fa-sort-up"></i> </span>
                            <span class="me-2"> 12% </span>
                            <span class="color-gray"> +1k Today </span>
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="data_card">
                    <div class="content">
                        <div class="head_card d-flex align-items-center">
                            <div class="icon_box"> <img src="{{url('')}}/assets/store_admin/images/icons/home/data-4.svg" class="icon" alt="">  </div>
                            <h6 class="title mb-0">   Total Orders of the month </h6>
                        </div>

                        <h1 class="number"> 10,313 </h1>

                        <h5 class="ratio_txt">
                            <span class="text-danger me-1"> <i class="fas fa-sort-down"></i> </span>
                            <span class="me-2"> 12% </span>
                            <span class="color-gray"> +13 Today </span>
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="data_card">
                    <div class="content">
                        <div class="head_card d-flex align-items-center">
                            <div class="icon_box"> <img src="{{url('')}}/assets/store_admin/images/icons/home/data-5.svg" class="icon" alt="">  </div>
                            <h6 class="title mb-0">   Total Orders of the Year </h6>
                        </div>

                        <h1 class="number"> SAR 271,632.09  </h1>

                        <h5 class="ratio_txt">
                            <span class="text-success me-1"> <i class="fas fa-sort-up"></i> </span>
                            <span class="me-2"> 25,5% </span>
                            <span class="color-gray"> +4k Today </span>
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="data_card">
                    <div class="content">
                        <div class="head_card d-flex align-items-center">
                            <div class="icon_box"> <img src="{{url('')}}/assets/store_admin/images/icons/home/data-2.svg" class="icon" alt="">  </div>
                            <h6 class="title mb-0">   Total Number of Activated Product </h6>
                        </div>

                        <h1 class="number"> 1,354,121 </h1>

                        <h5 class="ratio_txt">
                            <span class="text-success me-1"> <i class="fas fa-sort-up"></i> </span>
                            <span class="me-2"> 5% </span>
                            <span class="color-gray"> +4k Today </span>
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="data_card">
                    <div class="content">
                        <div class="head_card d-flex align-items-center">
                            <div class="icon_box"> <img src="{{url('')}}/assets/store_admin/images/icons/home/data-6.svg" class="icon" alt="">  </div>
                            <h6 class="title mb-0">  Total Inactive product </h6>
                        </div>

                        <h1 class="number"> 13,213 </h1>

                        <h5 class="ratio_txt">
                            <span class="text-success me-1"> <i class="fas fa-sort-up"></i> </span>
                            <span class="me-2"> 12% </span>
                            <span class="color-gray"> +1k Today </span>
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="data_card">
                    <div class="content">
                        <div class="head_card d-flex align-items-center">
                            <div class="icon_box"> <img src="{{url('')}}/assets/store_admin/images/icons/home/data-7.svg" class="icon" alt="">  </div>
                            <h6 class="title mb-0">  Total Products </h6>
                        </div>

                        <h1 class="number"> 10,313 </h1>

                        <h5 class="ratio_txt">
                            <span class="text-success me-1"> <i class="fas fa-sort-up"></i> </span>
                            <span class="me-2"> 12% </span>
                            <span class="color-gray"> +13 Today </span>
                        </h5>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- ------------ charts ------------- -->
        <div class="charts_container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="chart_box mb-4">
                        <div class="row gx-3">
                            <div class="col-lg-4">
                                <div class="chart_box bg-white mb-1">
                                    <div class="chart_head mb-4">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <h6 class="text-center"> Orders & Returns </h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="chart4"></div>
                                </div>
                            </div>
                            <div class="col-lg-8">
                                <div class="chart_box mb-4">
                                    <div class="chart_head mb-4">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <h6 class="text-center"> Orders VS delivered </h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="bar_chart"></div>
                                </div>
                            </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">
                                    <h6> Number of visitors per week </h6>
                                </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-12">-->
                <!--                    <h6 class="text-center"> Orders delivered </h6>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--        <div class="chart_cont" dir="ltr">-->
                <!--            <div id="chart-17"></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-12">
                                    <h6 class=""> Title Here </h6>
                                </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">-->
                <!--                    <h6 class=""> Title Here </h6>-->
                <!--                </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">
                                    <h6 class="text-center"> Vendors vs Orders </h6>
                                </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">
                                    <h6 class=""> Title Here </h6>
                                </div>
                            </div>
                        </div>
                        <div id="chart10"></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: 'Negotiation Cases',
      data: [44, 55, 57, 56, 61, 58, 63, 50, 48, 52, 60, 65] // Jan → Dec
    }, {
      name: 'Sales Cases',
      data: [35, 41, 36, 26, 45, 48, 52, 40, 44, 38, 49, 55]
    }],
    colors: ['#27DDE0', '#3215C5'],
    chart: {
      type: 'bar',
      height: 320,
      toolbar: {
        show: false
      }
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '45%',
        borderRadius: 6,
        endingShape: 'rounded'
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      show: true,
      width: 2,
      colors: ['#fff']
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'light',
        type: 'vertical',
        gradientToColors: ['#6B5AED', '#BFAEFF'],
        opacityFrom: 0.9,
        opacityTo: 0.6,
        stops: [0, 100]
      }
    },
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      labels: {
        style: {
          colors: '#555',
          fontSize: '12px'
        }
      },
      axisBorder: {
        color: '#eee'
      },
      axisTicks: {
        color: '#eee'
      }
    },
    yaxis: {
      labels: {
        style: {
          colors: '#444',
          fontSize: '12px'
        }
      }
    },
    grid: {
      borderColor: '#f1f1f1',
      row: {
        colors: ['#fafafa', 'transparent'],
        opacity: 0.5
      }
    },
    tooltip: {
      theme: 'light',
      y: {
        formatter: function(val) {
          return val + ' SAR';
        }
      }
    },
    legend: {
      position: 'top',
      horizontalAlign: 'right',
      fontSize: '13px',
      fontWeight: 500,
      labels: {
        colors: '#333'
      },
      markers: {
        radius: 5
      }
    }
  };

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



    <script>
          var bar_chart_options = {
            series: [{
              name: 'Visits',
              data: [10, 30, 60, 40, 15, 32, 55]
            }],
            colors: ['#27DDE0'],
            chart: {
              type: 'bar',
              height: 300,
              toolbar: { show: false }
            },
            plotOptions: {
              bar: {
                borderRadius: 6,
                horizontal: false,
                columnWidth: '45%',
                endingShape: 'rounded'
              }
            },
            dataLabels: {
              enabled: false
            },
            stroke: {
              show: true,
              width: 2,
              colors: ['#fff']
            },
            fill: {
              type: 'gradient',
              gradient: {
                shade: 'light',
                type: "vertical",
                gradientToColors: ['#3215C5'],
                opacityFrom: 0.9,
                opacityTo: 0.6,
                stops: [0, 100]
              }
            },
            xaxis: {
              categories: ['FRI', 'STR', 'SUN', 'MON', 'TUE', 'WEN', 'THU'],
              labels: {
                style: {
                  fontSize: '12px',
                  colors: '#555'
                }
              },
              axisBorder: {
                color: '#eee'
              },
              axisTicks: {
                color: '#eee'
              }
            },
            yaxis: {
              labels: {
                style: {
                  fontSize: '12px',
                  colors: '#444'
                }
              }
            },
            grid: {
              borderColor: '#f1f1f1',
              row: {
                colors: ['#fafafa', 'transparent'],
                opacity: 0.5
              }
            },
            tooltip: {
              theme: 'light',
              y: {
                formatter: function(val) {
                  return val + ' visits';
                }
              }
            }
          };
        
          var chart = new ApexCharts(document.querySelector("#bar_chart3"), bar_chart_options);
          chart.render();
        </script>


        <script>
  var options = {
    series: [90],
    chart: {
      height: 280,
      type: 'radialBar',
      offsetY: 0
    },
    plotOptions: {
      radialBar: {
        startAngle: -135,
        endAngle: 135,
        hollow: {
          size: '70%'
        },
        dataLabels: {
          name: {
            show: false
          },
          value: {
            show: true,
            fontSize: '22px',
            color: '#3215C5',
            offsetY: 6,
            formatter: function (val) {
              return val + "%";
            }
          }
        }
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'light',
        type: 'horizontal',
        gradientToColors: ['#3215C5'],
        stops: [0, 100],
        opacityFrom: 1,
        opacityTo: 1
      }
    },
    stroke: {
      dashArray: 4
    },
    labels: []
  };

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


    <script>
      var options = {
        series: [45, 55],
        labels: ['Orders', 'Sales'],
        chart: {
          type: 'donut'
        },
        colors: ['#27DDE0', '#3215C5'],
        fill: {
          type: 'gradient',
          gradient: {
            shade: 'light',
            type: 'diagonal1',
            gradientToColors: ['#80F1F5', '#6B5AED'],
            opacityFrom: 0.9,
            opacityTo: 0.6,
            stops: [0, 100]
          }
        },
        plotOptions: {
          pie: {
            donut: {
              size: '70%',
              labels: {
                show: false
              }
            },
            expandOnClick: false,
            customScale: 1
          }
        },
        stroke: {
          show: true,
          width: 6,
          colors: ['#fff']
        },
        dataLabels: {
          enabled: true,
          style: {
            fontSize: '14px',
            fontWeight: 600,
            colors: ['#fff']
          },
          background: {
            enabled: false
          }
        },
        legend: {
          show: true,
          position: 'bottom',
          fontSize: '14px',
          fontWeight: 500,
          labels: {
            colors: '#333'
          },
          markers: {
            width: 14,
            height: 14,
            radius: 12
          }
        },
        tooltip: {
          enabled: true,
          theme: 'light',
          y: {
            formatter: function (val) {
              return val + '%';
            }
          }
        },
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 240
            },
            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>
  var options = {
    series: [44, 55, 67, 83],
    chart: {
      height: 380,
      type: "radialBar"
    },
    colors: ['#27DDE0', '#3215C5', '#6B5AED', '#BFAEFF'],
    plotOptions: {
      radialBar: {
        offsetY: 0,
        startAngle: 0,
        endAngle: 360,
        hollow: {
          margin: 10,
          size: '55%',
          background: 'transparent'
        },
        track: {
          background: '#f0f0f0',
          strokeWidth: '100%',
          margin: 8
        },
        dataLabels: {
          name: {
            show: true,
            fontSize: '14px',
            fontWeight: 500,
            color: '#333'
          },
          value: {
            show: true,
            fontSize: '16px',
            fontWeight: 600,
            color: '#333',
            formatter: function(val) {
              return val + '%';
            }
          },
          total: {
            show: false
          }
        }
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'light',
        type: 'diagonal1',
        gradientToColors: ['#6B5AED', '#BFAEFF', '#27DDE0', '#3215C5'],
        opacityFrom: 0.9,
        opacityTo: 0.5,
        stops: [0, 100]
      }
    },
    labels: ["Apples", "Oranges", "Bananas", "Berries"],
    legend: {
      show: true,
      position: 'bottom',
      horizontalAlign: 'center',
      fontSize: '13px',
      fontWeight: 500,
      labels: {
        colors: '#333'
      },
      markers: {
        width: 12,
        height: 12,
        radius: 12
      }
    },
    tooltip: {
      enabled: true,
      theme: 'light',
      y: {
        formatter: function(val) {
          return val + '%';
        }
      }
    }
  };

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


    <script>
  var options = {
    series: [{
      name: 'Sessions',
      data: [10, 20, 15, 30, 35, 30, 45, 59, 30, 35, 25, 29, 15]
    }],
    chart: {
      type: "area",
      height: 280,
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false
      }
    },
    colors: ['#27DDE0'],
    dataLabels: {
      enabled: false
    },
    markers: {
      size: 5,
      strokeWidth: 2,
      colors: ["#fff"],
      strokeColors: '#27DDE0',
      hover: {
        size: 7
      }
    },
    stroke: {
      curve: "smooth",
      width: 3
    },
    fill: {
      type: "gradient",
      gradient: {
        shade: "light",
        type: "vertical",
        gradientToColors: ["#3215C5"],
        opacityFrom: 0.6,
        opacityTo: 0.05,
        stops: [0, 100]
      }
    },
    xaxis: {
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      },
      labels: {
        style: {
          colors: "#555",
          fontSize: '11px'
        }
      }
    },
    yaxis: {
      labels: {
        show: false
      }
    },
    grid: {
      borderColor: "#eee",
      row: {
        colors: ['#fafafa', 'transparent'],
        opacity: 0.5
      }
    },
    tooltip: {
      theme: "light",
      y: {
        formatter: function (val) {
          return val + ' sessions';
        }
      }
    },
    legend: {
      show: false
    }
  };

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


    <script>
      var dataSet = [
        [
          [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]
        ],
        [
          [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]
        ]
      ];
    
      var options = {
        series: [
          { name: 'PRODUCT A', data: dataSet[0] },
          { name: 'PRODUCT B', data: dataSet[1] }
        ],
        chart: {
          type: 'area',
          stacked: false,
          height: 350,
          toolbar: {
            show: false
          },
          zoom: {
            enabled: false
          }
        },
        colors: ['#27DDE0', '#3215C5'],
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth',
          width: 3
        },
        markers: {
          size: 5,
          strokeWidth: 2,
          hover: {
            size: 7
          }
        },
        fill: {
          type: 'gradient',
          gradient: {
            shade: 'light',
            type: 'vertical',
            shadeIntensity: 0.5,
            gradientToColors: ['#a1f1f2', '#5a40f0'],
            opacityFrom: 0.5,
            opacityTo: 0.1,
            stops: [0, 100]
          }
        },
        yaxis: {
          labels: {
            style: {
              colors: '#444',
              fontSize: '11px',
              fontWeight: 400
            },
            formatter: function(val) {
              return (val / 1000000).toFixed(2) + 'M';
            }
          },
          axisBorder: { show: false },
          axisTicks: { show: false }
        },
        xaxis: {
          type: 'datetime',
          tickAmount: 7,
          min: new Date("01/01/2024").getTime(),
          max: new Date("01/07/2024").getTime(),
          labels: {
            rotate: -10,
            style: {
              colors: '#555',
              fontSize: '11px'
            },
            formatter: function(val, timestamp) {
              return moment(new Date(timestamp)).format("DD MMM");
            }
          },
          axisBorder: {
            color: '#eee'
          },
          axisTicks: {
            color: '#eee'
          }
        },
        tooltip: {
          theme: 'light',
          x: {
            format: 'dd MMM yyyy'
          },
          y: {
            formatter: function(val) {
              return (val / 1000000).toFixed(2) + 'M';
            }
          }
        },
        legend: {
          position: 'top',
          horizontalAlign: 'right',
          fontSize: '12px',
          fontWeight: 400,
          labels: {
            colors: '#333'
          },
          markers: {
            radius: 5
          }
        },
        grid: {
          borderColor: '#f1f1f1',
          row: {
            colors: ['#fafafa', 'transparent'],
            opacity: 0.5
          }
        }
      };
    
      var chart = new ApexCharts(document.querySelector("#chart8"), 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: 380,
      type: 'rangeBar',
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false
      }
    },
    colors: ['#27DDE0', '#3215C5'],
    plotOptions: {
      bar: {
        horizontal: true,
        isDumbbell: true,
        dumbbellColors: [['#27DDE0', '#3215C5']],
        columnWidth: '70',
        borderRadius: 8
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        gradientToColors: ['#3215C5'],
        inverseColors: false,
        opacityFrom: 0.85,
        opacityTo: 0.65,
        stops: [0, 100]
      }
    },
    legend: {
      show: true,
      showForSingleSeries: true,
      position: 'top',
      horizontalAlign: 'right',
      fontSize: '13px',
      fontWeight: 500,
      labels: {
        colors: '#333'
      },
      customLegendItems: ['Female', 'Male'],
      markers: {
        width: 12,
        height: 12,
        radius: 6
      }
    },
    grid: {
      borderColor: '#f1f1f1',
      xaxis: {
        lines: {
          show: true
        }
      },
      yaxis: {
        lines: {
          show: false
        }
      }
    },
    tooltip: {
      enabled: true,
      theme: 'light',
      y: {
        formatter: function(val) {
          return val + ' USD';
        }
      }
    }
  };

  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