<?php
$PageSize = 10;
$PageNumber = 1;
if(isset($_GET['PageNumber'])){$PageNumber = $_GET['PageNumber'];}
/*
$arrayName = array(
  'CaseId' => @$_REQUEST['caseId'],
  'OrderBy' => 'NamesId',
  'OrderDirection' => 'ASC',
  'PageNumber' => 1,
  'PageSize' => 10,
);

$data = $customer_db->Index($arrayName);
*/
 ?>

    <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>
    var urlLoadCustomerAuto = "LoadCustomerAutoComplete.php";//"@Url.Action("LoadCustomerAutoComplete","Customer")";
    var urlloadCustomer = "LoadCustomer.php";
    var urlEdit = "Edit.php";
    $(document).ready(function ($) {
        $("li.page-item a").addClass("page-link");
        var customerInput = $("#customer-filter");
        var autocompCustomer = customerInput.autocomplete({
            source: function (request, response) {
                $.getJSON(urlLoadCustomerAuto, {
                    Keyword: customerInput.val()
                }, response);
            },
            select: function (event, ui) {
                customerInput.val(ui.item.custCode + '-' + ui.item.custName);
                $("#hd-customer-id").val(ui.item.custId);
                return false;
            }
        }).change(function (e) {
            if (e.target.value == "") { $("#hd-customer-id").val(''); }
        });
        autocompCustomer.autocomplete("instance")._renderItem = function (ul, item) {

            return $("<li>").append(item.custCode + '-' + item.custName).appendTo(ul);
        };

        if (urlloadCustomer != '') {
            loadCustomer();
        }
    });
    function loadCustomer(search = false) {
          var parent = $("#customer_pagination");
          var tableTbody = parent.find("table>tbody");
          var page = parent.find(".page").val();
          var pageSize = parent.find(".page-size").val();
          var orderBy = parent.find('.orderBy').val();
          var orderDirection = parent.find('.orderDirection').val();
          var paramsHidden = parent.find(".params").val();
          var $loader = parent.find('.table-loader');
          var params = {
              PageNumber: page,
              PageSize: pageSize,
              OrderBy: orderBy,
              OrderDirection: orderDirection
          };

          if (paramsHidden != "") {
              params = Object.assign({}, params, JSON.parse('{"' + decodeURI(paramsHidden).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}'));
          }
          $loader.show();
          $.get(urlloadCustomer, params)
              .done(function (resp) {
                var res = JSON.parse(resp);
                  //console.log(res);
                  if (res.Data.length > 0) {
                      $(tableTbody).html('');

                      $.each(res.Data, function (key, value) {
                          var html = '<tr>' +
                              '   <td>' + (key + 1) + '</td>' +
                              '   <td>' + value.NamesCode + '</td>' +
                              '   <td>' + value.NamesName + '</td>' +
                              '   <td><a href="' + urlEdit + "?Id=" + value.NamesId + '&Type=Edit" class="btn btn-info btn-sm"><i class="fas fa-edit"></i>Edit</a>' +
                              '   <a href="Delete.php?Id=' + value.NamesId + '" class="btn btn-danger btn-sm" ><i class="fa fa-trash"></i> Delete</a>' +
                              '</td > ' +
                              '</tr > ';
                          $(html).appendTo(tableTbody);
                      });
                      parent.find(".page").val(res.PageNumber);
                      parent.find(".page-size").val(res.PageSize);
                      parent.find(".numrows").val(res.TotalRecords);
                      parent.find(".orderBy").val(res.OrderBy);
                      parent.find(".orderDirection").val(res.OrderDirection);
                      var $order = parent.find("th>a.order[data-by=" + res.OrderBy + "]");
                      if ($order.length > 0) {
                          parent.find("th>a.order").attr('data-direction', "").attr("class", "").addClass("order sorting");
                          $order.attr("data-direction", res.OrderDirection == null ? "" : res.OrderDirection);
                          $order.attr("class", "");
                          if (resp.OrderDirection != null) {
                              $order.addClass("order sorting_" + res.OrderDirection.toLowerCase());
                          } else {
                              $order.addClass("order sorting");
                          }
                      }
                      renderPagination('#customer_pagination', 'redirectPaging');
                  } else {
                      $(tableTbody).html('<tr><td colspan="7" class="text-center">Not found data</td></tr>');
                  }

                  $loader.hide();
              });
        }
    function exportToExcel() {
        var objParams = $("#form-report").serializeFormJSON();
        $.ajax({
          url: 'ExportToExcel.php',
          data: objParams,
          type: 'POST',
          success: function (resp) {
            //console.log(resp);
            var res = JSON.parse(resp);
            //console.log(res);
            if(res['mes'] == 'success'){
              window.open("report_excel/Customer.xlsx", "new");
            }
          }
        });
    }
    </script>

<input type="hidden" id="page-menu-id" name="" value="#menu_customer" />
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Customer > Customer List</h1>
</div>
<?php if(@$_SESSION['Success'] != ''){ ?>
  <div class="alert alert-success">
      <?php echo $_SESSION['Success']; ?>
  </div>
<?php } ?>
<?php if(@$_SESSION['Error'] != ''){ ?>
    <div class="alert alert-danger">
        <?php echo $_SESSION['Error']; ?>
    </div>
<?php } ?>

<form action="" method="get">
    <div class="row">
        <div class="col-md-1">
            Customer:
        </div>
        <div class="col-md-3">
            <input type="text" class="form-control" id="customer-filter" name="CustomerName" value="<?php echo (!@$_GET['CustomerName'])?'':@$_GET['CustomerName']; ?>" autocomplete="off" />
            <input type="hidden" value="<?php echo (@$_GET['CustomerId'])?'':@$_GET['CustomerId']; ?>" name="CustomerId" id="hd-customer-id" />
        </div>
    </div>
    <div class="row col-md-12">&nbsp;</div>
    <div class="row">
        <div class="col-md-12 text-right">
            <button class="btn btn-success"><i class="fa fa-search"></i> Search</button>
        </div>
    </div>
</form>

<div class="row col-md-12">&nbsp;</div>
<p>
    <a class="btn btn-danger" href="Create.php"><i class="fas fa-plus-square"></i> เพิ่มรายการ</a>
    <button class="btn btn-success" onclick="exportToExcel()"><i class="fas fa-file-excel"></i> Export to Excel</button>
</p>
<div id="customer_pagination" style="position:relative;">
  <table class="table table-bordered table-hover">
    <tr>
      <th>No.</th>
      <th>Customer No.</th>
      <th>Customer Name</th>
      <th style="width:180px;">-</th>
    </tr>
    <?php
    foreach ($data['Data'] as $key => $value){
      $start = $key  +1;
      ?>

      <tr>
        <td><?php echo $start; ?></td>
        <td><?php echo @$value['NamesCode']; ?></td>
        <td><?php echo @$value['NamesName']; ?></td>
        <td>
          <a class="btn btn-info btn-sm" href="Edit.php?Id=<?php echo @$value['NamesId']; ?>"><i class="fas fa-edit"></i>Edit</a>
          <button type="button" class="btn btn-danger btn-sm" onclick="if (confirm('Confirm to delete ?')) { window.location = 'Delete.php?Id=<?php echo @$value['NamesId']; ?>' }"><i class="fas fa-trash"></i> Delete</button>
        </td>
      </tr>

    <?php } ?>

  </table>
  <br /><br />
  <div class="supplierPager">
      <div class="row">
          <div class="col-md-6">
              <input type="hidden" class="page" value="<?php echo @$PageNumber; ?>" />
              <input type="hidden" class="page-size" value="<?php echo @$PageSize; ?>" />
              <input type="hidden" class="numrows" value="0" />
              <input type="hidden" class="orderBy" value="NamesId" />
              <input type="hidden" class="orderDirection" value="ASC" />
              <input type="hidden" class="params" value="CustomerName=<?php echo @$_GET['CustomerId']; ?>&CustomerId=<?php echo @$_GET['CustomerId']; ?>" />

              แสดงรายการ <span class="start-record"></span> ถึง <span class="end-record"></span> จากทั้งหมด <span class="total-record"></span> รายการ
          </div>
          <div class="col-md-6 text-right pagination-zone">

          </div>
      </div>
  </div>

</div>