<?php
require("includes/check_auth_user.php");
require("includes/dbconnect.php");
include('includes/function.php');

//include("includes/menu_rights.php");
$admin = $_SESSION["admin_" . $dbname];
$usertype = $_SESSION["usertype"];
$complogo = $_SESSION["complogo"];
$menutype = $_SESSION["menutype"];

$zroot = $_SESSION["zdir"];
$tdate = date("Y-m-d");
$zdb = $_SESSION["zdbyear_" . $dbname];
//$zdb = "raj_eva_101";
// browse($zdb);
mysqli_select_db($conn, $zdb);

if ($usertype != 1) {
  include("includes/menu_rights.php");
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
  <title>
    HUTFIT
  </title>
  <!--     Fonts and icons     -->
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,900" />
  <!-- Nucleo Icons -->
  <link href="../assets/css/nucleo-icons.css" rel="stylesheet" />
  <link href="../assets/css/nucleo-svg.css" rel="stylesheet" />
  <!-- Font Awesome Icons -->
  <!-- <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script> -->

  <!-- links added by obaid for date picker -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <!-- <script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script> -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

  <!-- links of date ends here -->

  <!-- Material Icons -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
  <!-- CSS Files -->
  <link id="pagestyle" href="../assets/css/material-dashboard.css?v=3.2.0" rel="stylesheet" />
</head>

<body class="g-sidenav-show  bg-gray-100">
  <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <div class="container-fluid py-2">
      <div <?= $schedcalendar; ?> class="row">
        <div class="col-xl-12 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-header p-2 ps-3">
              <div class="d-flex justify-content-between">
                <div>
                  <div id="reportrange"
                    style="background: #fff; color:black; cursor: pointer; width: 100%;margin-top:10px">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <i class="fa fa-caret-down"></i>
                  </div>

                  <script type="text/javascript">

                    $(document).ready(function () {

                      function getDashData(date_start, date_end) {
                        const startdate = date_start; // Replace with your actual start date
                        const enddate = date_end; // Replace with your actual end date

                        fetch('get_Dashboard.php', {
                          method: 'POST',
                          headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                          },
                          body: new URLSearchParams({
                            startdate: startdate,
                            enddate: enddate
                          })
                        })
                          .then(response => response.text()) // Change to .text() if not expecting JSON
                          .then(data => {
                            // Handle the data received from the server
                            $(".dashBoardData").html("");
                            $(".dashBoardData").html(data);
                            // console.log(data);
                          })
                          .catch(error => {
                            console.error('Error:', error);
                          });
                      }


                      $(function () {

                        // var start = moment().subtract(29, 'days');
                        var start = moment().date(1).startOf('day');
                        var end = moment();

                        function cb(start, end) {
                          let date_start = start;
                          let date_end = end;

                          $(".date_start").val(date_start);
                          $(".date_end").val(date_end);

                          $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

                          getDashData(date_start, date_end);
                        }



                        $('#reportrange').daterangepicker({
                          startDate: start,
                          endDate: end,
                          ranges: {
                            'Today': [moment(), moment()],
                            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                            'This Month': [moment().startOf('month'), moment().endOf('month')],
                            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                          }
                        }, cb);

                        cb(start, end);
                      });
                    })

                  </script>
                  <!-- date picker ends here -->

                  <!-- </p> -->
                </div>
              </div>
            </div>
            <hr class="dark horizontal my-0">
          </div>
        </div>

        <!-- section of date end here -->
      </div>
      <!-- <br> -->

      <div class="row dashBoardData">

      </div>


    </div>
  </main>

  <script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
  </script>
</body>

</html>