<input type="hidden" id="page-menu-id" name="" value="#menu_case" />
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Case > Time Sheet</h1>
</div>
<form action="index.php" method="get" class="mb-3">
    <div class="row">
        <div class="col-md-1">
            Year:
        </div>
        <?php
        $year = date("Y");
        $month = date("m");
        if(@$_GET['Year']!=''){$year=@$_GET['Year'];}
        if(@$_GET['Month']!=''){$month=@$_GET['Month'];}
        ?>
        <div class="col-md-2">
            <select class="form-control" name="Year">
              <?php for($i = $year-1; $i<=$year+1;$i++){ //  @for (int i = (DateTime.Now.Year - 1); i <= (DateTime.Now.Year + 1); i++){ ?>

                    <option value="<?php echo $i; ?>" <?php echo ($year==$i)?"selected" : ""; ?>><?php echo $i; ?></option>
                <?php } ?>
            </select>
        </div>
        <div class="col-md-1">
            Month:
        </div>
        <div class="col-md-2">
            <select class="form-control" name="Month">
              <?php for($i = 1; $i<=12;$i++){ //  @for (int i = (DateTime.Now.Year - 1); i <= (DateTime.Now.Year + 1); i++){ ?>
                    <option value="<?php echo $i; ?>" <?php echo ($month==$i)?"selected" : ""; ?>>
                      <?php echo $util_class->m_th_re($i); ?>
                    </option>

              <?php } ?>
            </select>
        </div>
        <div class="col-md-2">
            <button class="btn btn-success"><i class="fa fa-search"></i> Search</button>
        </div>
    </div>
</form>
 <?php $data = $timesheet_db->Index($_SESSION['UserInfo'][0]['UserId'],$year,$month); ?>
 <?php
 /*
 <?php
 echo "<pre>";
 print_r($_SESSION['UserInfo'][0]['UserId']);
 echo "</pre>";
 ?>
 echo json_encode($data, JSON_UNESCAPED_UNICODE);
 */
 echo "<pre>";
 print_r($data);
 echo "</pre>";
 ?>


<div id="jsGrid"></div>

    <link href="<?php echo $path; ?>Assets/Backend/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" />
    <script src="<?php echo $path; ?>Assets/Backend/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="<?php echo $path; ?>Assets/Backend/vendor/moment.js"></script>


    <!--
    <link href="<?php echo $path; ?>Assets/Backend/vendor/jsgrid/jsgrid.min.css" rel="stylesheet" />
    <link href="<?php echo $path; ?>Assets/Backend/vendor/jsgrid/jsgrid-theme.min.css" rel="stylesheet" />
    <script src="<?php echo $path; ?>Assets/Backend/vendor/jsgrid/jsgrid.min.js"></script>
  -->
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
    <script>
          //var tsList = @Html.Raw(@Model.JsonData);
          var tsList = '<?php echo json_encode($data, JSON_UNESCAPED_UNICODE); ?>';
          tsList = JSON.parse(tsList);
          //var tsList = JSON.parse(jsonRaw.replace(/\n/g, "\\\\n").replace(/\r/g, "\\\\r").replace(/\t/g, "\\\\t").replace(/\\/g, '\\\\'));*@
          tsList.forEach((element, index) => {
              //var date = new Date(parseInt(element.TaskDate.replace("/Date(", "").replace(")/", ""), 10));
              var date = element.TaskDate.split(' ');
              date = date[0].split('-');
              date = formatDate(new Date(date[0], date[1]-1, date[2]));
              element.TaskDate = moment(date, "DD-MM-YYYY").toISOString();
              //onsole.log(date);
          })
              for (var i = (tsList.length + 1); i <= tsList.length; i++) {
                  tsList.push({
                      "TimeSheetId": null,
                      "TaskDate": null,
                      "TaskDescription": "",
                      "Duration": null,
                      "CaseNumber": "",
                      "CustomerCode":""
                  });
              }
          var urlCreate = "Create.php";//"@Url.Action("Create")";
          var urlUpdate = "Update.php"//"@Url.Action("Update")";
          var urlDelete = "Delete.php";//"@Url.Action("Delete")";
          var urlLoadCaseNumber = "LoadCaseAutoComplete.php"//"@Url.Action("LoadCaseAutoComplete", "CaseList")";
          var urlLoadCustomer = "LoadCustomerAutoComplete.php"//"@Url.Action("LoadCustomerAutoComplete","Customer")";

          function formatDate(date) {
            return [
              padTo2Digits(date.getDate()),
              padTo2Digits(date.getMonth() + 1),
              date.getFullYear(),
            ].join('/');
          }
          function padTo2Digits(num) {
            return num.toString().padStart(2, '0');
          }
    </script>
    <link href="<?php echo $path; ?>Assets/Backend/vendor/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
    <script src="<?php echo $path; ?>Assets/Backend/vendor/jquery-ui/jquery-ui.min.js"></script>
    <script src="<?php echo $path; ?>Scripts/pages_v1/timesheet.js?t=<?php echo $date_ticks4; ?>"></script>