<!-- footer start-->
<?php include('partial/footer.php') ?>
      </div>
    </div>
    <?php include('partial/scripts.php') ?>
    <!-- Plugins JS start-->
<script src="<?= $cfg_baseurl ?>assets/js/clock.js"></script>
<script src="<?= $cfg_baseurl ?>assets/js/chart/apex-chart/moment.min.js"></script>
<script src="<?= $cfg_baseurl ?>assets/js/notify/bootstrap-notify.min.js"></script>
<script src="<?= $cfg_baseurl ?>/assets/js/sweet-alert/sweetalert.min.js"></script>
<script src="<?= $cfg_baseurl ?>/assets/js/sweet-alert/app.js"></script>
<script src="<?= $cfg_baseurl ?>assets/js/dashboard/default.js"></script>
<script src="<?= $cfg_baseurl ?>assets/js/height-equal.js"></script>
<script src="<?= $cfg_baseurl ?>assets/js/animation/wow/wow.min.js"></script>
<!-- Plugins JS Ends-->
<script>
  new WOW().init();
</script>
<script>
    var options = {
      chart: {
        type: "area",
        height: 300,
        foreColor: "#999",
        stacked: true,
        dropShadow: {
          enabled: true,
          enabledSeries: [0],
          top: -2,
          left: 2,
          blur: 5,
          opacity: 0.06
        },
        zoom: {
        enabled: false, 
        type: 'x',
        autoScaleYaxis: false 
        }
      },
      colors: ['#ffa305', '#0090FF', '#05f585', '#080000', '#FF0000'], 
      stroke: {
        curve: "smooth",
        width: 3
      },
      dataLabels: {
        enabled: false
      },
      series: [{
        name: 'Orders Pending',
        data: generateDayWiseTimeSeries(0, 7)
      },{
        name: 'Orders Processing',
        data: generateDayWiseTimeSeries(1, 7)
      }, {
        name: 'Orders Success',
        data: generateDayWiseTimeSeries(2, 7)
      }, {
        name: 'Orders Partial', 
        data: generateDayWiseTimeSeries(3, 7) 
      }, {
        name: 'Orders Error', 
        data: generateDayWiseTimeSeries(4, 7) 
      }],
      markers: {
        size: 0,
        strokeColor: "#fff",
        strokeWidth: 3,
        strokeOpacity: 1,
        fillOpacity: 1,
        hover: {
          size: 6
        }
      },
      xaxis: {
        type: "datetime",
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        }
      },
      yaxis: {
        labels: {
          offsetX: 14,
          offsetY: -5
        },
        tooltip: {
          enabled: true
        }
      },
      grid: {
        padding: {
          left: -5,
          right: 5
        }
      },
      tooltip: {
        x: {
          format: "dd MMM yyyy"
        },
      },
      legend: {
        position: 'bottom',
        horizontalAlign: 'left'
      },
      fill: {
        type: ["solid", "solid", "solid", "solid", "solid"], // Menetapkan jenis pengisian warna untuk setiap area grafik
        fillOpacity: [0.7, 0.7, 0.7, 0.7, 0.7], // Menetapkan opasitas warna untuk setiap area grafik (misalnya, 0.7 untuk warna merah)
        gradient: {
          shade: "light",
          type: "vertical",
          opacityFrom: 0.9,
          opacityTo: 0.3,
          stops: [0, 100]
        }
      }
    };

    var chart = new ApexCharts(document.querySelector("#timeline-chart"), options);

    chart.render();

    function generateDayWiseTimeSeries(s, count) {
      var values = [
        <?= json_encode($data_total[$status_labels[0]]) ?>,
        <?= json_encode($data_total[$status_labels[1]]) ?>,
        <?= json_encode($data_total[$status_labels[2]]) ?>,
        <?= json_encode($data_total[$status_labels[3]]) ?>,
        <?= json_encode($data_total[$status_labels[4]]) ?>,
        ];
      var i = 0;
      var series = [];
      var x = new Date("<?= date('d F Y', strtotime('-5 days'))?>").getTime();
      while (i < count) {
        series.push([x, values[s][i]]);
        x += 86400000;
        i++;
      }
      return series;
    }
  </script>
  <script>
    var options = {
      chart: {
        type: "area",
        height: 300,
        foreColor: "#999",
        stacked: true,
        dropShadow: {
          enabled: true,
          enabledSeries: [0],
          top: -2,
          left: 2,
          blur: 5,
          opacity: 0.06
        },
        zoom: {
        enabled: false, 
        type: 'x',
        autoScaleYaxis: false 
      }
      },
      colors: ['#ffa305', '#0090FF', '#05f585', '#080000', '#FF0000'], 
      stroke: {
        curve: "smooth",
        width: 3
      },
      dataLabels: {
        enabled: false
      },
      series: [{
        name: 'Orders Pending',
        data: generateDayWiseTimeSeries(0, 29)
      },{
        name: 'Orders Processing',
        data: generateDayWiseTimeSeries(1, 29)
      }, {
        name: 'Orders Success',
        data: generateDayWiseTimeSeries(2, 29)
      }, {
        name: 'Orders Partial', 
        data: generateDayWiseTimeSeries(3, 29) 
      }, {
        name: 'Orders Error', 
        data: generateDayWiseTimeSeries(4, 29) 
      }],
      markers: {
        size: 0,
        strokeColor: "#fff",
        strokeWidth: 3,
        strokeOpacity: 1,
        fillOpacity: 1,
        hover: {
          size: 6
        }
      },
      xaxis: {
        type: "datetime",
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        }
      },
      yaxis: {
        labels: {
          offsetX: 14,
          offsetY: -5
        },
        tooltip: {
          enabled: true
        }
      },
      grid: {
        padding: {
          left: -5,
          right: 5
        }
      },
      tooltip: {
        x: {
          format: "dd MMM yyyy"
        },
      },
      legend: {
        position: 'bottom',
        horizontalAlign: 'left'
      },
      fill: {
        type: ["solid", "solid", "solid", "solid", "solid"], // Menetapkan jenis pengisian warna untuk setiap area grafik
        fillOpacity: [0.7, 0.7, 0.7, 0.7, 0.7], // Menetapkan opasitas warna untuk setiap area grafik (misalnya, 0.7 untuk warna merah)
        gradient: {
          shade: "light",
          type: "vertical",
          opacityFrom: 0.9,
          opacityTo: 0.3,
          stops: [0, 100]
        }
      }
    };

    var chart = new ApexCharts(document.querySelector("#total-chart"), options);

    chart.render();

    function generateDayWiseTimeSeries(s, count) {
      var values = [
        <?= json_encode($data_total[$status_labels[0]]) ?>,
        <?= json_encode($data_total[$status_labels[1]]) ?>,
        <?= json_encode($data_total[$status_labels[2]]) ?>,
        <?= json_encode($data_total[$status_labels[3]]) ?>,
        <?= json_encode($data_total[$status_labels[4]]) ?>,
        ];
      var i = 0;
      var series = [];
      var x = new Date("<?= date('d F Y', strtotime('-28 days'))?>").getTime();
      while (i < count) {
        series.push([x, values[s][i]]);
        x += 86400000;
        i++;
      }
      return series;
    }
  </script>
<!-- Add the Clipboard.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

<script type="text/javascript">
    function copy_to_clipboard(element) {
        var copyText = document.getElementById(element);
        copyText.select();
        document.execCommand("copy");
    }
</script>

<?php include('partial/footer-end.php') ?>