@include('common.header')
<div class="col-lg-12" id="load-overlay" name="load-overlay" style="display:none;">
        <div id="loader" ></div>
        <div id="overlay"></div>
</div>

<div id="process-info-box-content" style="display:none;">
  <div class="info-box bg-yellow">
    <span class="info-box-icon">
      <i class="fa fa-search"></i>
    </span>
    <div class="info-box-content">
      <span class="info-box-text" id="upload-info-box-text">SEARCHING IN PROGRESS</span>
      <span class="info-box-number" id="upload-info-box-number">41,410</span>
      <div class="progress">
        <div class="progress-bar" id="upload-progress-bar" style="width: 10%"></div>
      </div>
      <span class="progress-description" id="upload-progress-description"> 70% Increase in 30 Days </span>
    </div>
    <!-- /.info-box-content -->
  </div>
  <!-- /.info-box -->
</div>
<!-- /.info-box -->

<section class="content">
<div class="box box-primary">
     <div class="box-header">
       <h3 class="box-title" id="title">
         <b>Dashboard Data Export</b>
       </h3>
       <div class="box-tools pull-right">
         <div style="width: 300px;">
           <a href="{{ url('/dashboard/export') }}" class="btn btn-primary pull-left" id="new-btn">
             <i class="fa fa-file"></i> New Search </a>
           <a href="{{ url('/dashboard/view') }}" class="btn btn-warning pull-right" id="new-btn">
             <i class="fa fa-bar-chart"></i> BACK TO DASHBOARD </a>
         </div>
       </div>
     </div>
     <!-- /.box-header -->
     <!-- form start -->
     <div class="box-body table-responsive no-padding">
       <input type="hidden" name="_token" value="{{ csrf_token() }}">
       <div class="col-md-12">
         <!-- The time line -->
         <ul class="timeline">
           <!-- timeline time label -->
           <li class="time-label"></li>
           <!-- /.timeline-label -->
           <!-- timeline item -->
           <li>
             <i class="fa fa-barcode bg-blue"></i>
             <div class="timeline-item">
               <h3 class="timeline-header">
                 <a href="#">STEP 1 Select Export Option</a>
               </h3>
               <div class="timeline-body col-xs-5">
                 <select class="form-control select2 option-select2-class" id="dataExport-option-select2" style="width: 100%;" data-dashboardID="dataExport">
                   <option value = "byOfdNoFutherAction">Outbound: Shipment OFD, No Status Update</option>
                   <option value = "byArrivedDestNotOfd">Outbound: Shipment Arrived Destination, No OFD</option>
                   <option value = "byLastActivity">Outbound: All shipment Sorted by Last Activity</option>
                   <option value = "byManifestedNotArrivedDest">Outbound: Not Arrived Destination</option>
                   <option value = "byNewVsManifested">Outbound: Total Unmanifested & Manifested Shipment</option>
                   <option value = "byInboundToTransitAndNotPod">Inbound : Shipment Success Transit to My Station and Pending POD</option>

                 </select>
               </div>
             </div>
           </li>
           <!-- END timeline item -->
           <!-- timeline item -->
           <li>
             <i class="fa fa-barcode bg-blue"></i>
             <div class="timeline-item">
               <h3 class="timeline-header">
                 <a href="#">STEP 2</a> Select Filter
               </h3>
               <div class="timeline-body col-lg-12" id="filter-selection">
                 <div class="row">
                   <div class="col-lg-3">
                     <select class="form-control select2 station-select2-class" id="dataExport-station-select2" style="width: 100%;" data-dashboardID="dataExport"></select>
                   </div>
                   <div class="col-lg-3">
                     <select class="form-control select2 customer-select2-class" id="dataExport-customer-select2" style="width: 100%;">
                       <option value="">All Customer</option>
                     </select>
                   </div>
                   <div class="col-lg-3">
                     <button type="button" class="btn btn-default btn-sm daterange-btn" id="dataExport-daterange">
                       <span>
                         <i class="fa fa-calendar"></i> Last 7 Days </span>
                       <i class="fa fa-caret-down"></i>
                     </button>
                   </div>
                   <div class="col-lg-3">
                     <span class="loader" id="dataExport-loader" style="display:none;"></span>
                     <button type="button" class="btn btn-block btn-sm btn-primary search-btn" id="dataExport-search" onclick="searchClick()">Search</button>
                   </div>
                 </div>
               </div>
             </div>
           </li>
           <!-- END timeline item -->
       </div>
     </div>
     <!-- /.box-body -->
   </div>

   <p id="display-remark"></p>

   <div id="resultTable">
        <div class="box">
          <div class="box-header ">
          </div>
          <!-- /.box-header -->
          <div class="box-body" id="waybill-table-box-body">
            <table id="waybill-table" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>CN No</th>
                  <th>Shipper</th>
                  <th>Consignee</th>
                  <th>Created Date</th>
                  <th>Ori</th>
                  <th>Dest</th>
                  <th>Last Avtivity</th>
                </tr>
              </thead>
              <tbody></tbody>
              </tfoot>
            </table>
          </div>
          <!-- /.box-body -->
        </div>
      </div>
</section>
@include('common.footer')
@include('dashboard.dashboard_settings')


<script>
var httpPostSetting
var dashboardExportRequestResult   = []
var dashboadID                     = ""
var dashboardExportHttpPostSetting = ""

//this is for dashboard clicked value and perform filter refer below example
//localhost:8888/api/dashboard/report/export/waybills/by/lastActivity?page=1&page_size=5000&filter=true&filterValue=arrived_dest
//
var filter      = "" //accept true or false value
var filterValue = "" //filter value 

$( document ).ready(function() 
{  
  filter                         = urlParams.get('filter');
  filterValue                    = urlParams.get('filterValue');

  dashboadID                     = urlParams.get('dashboadID');
  dashboardExportHttpPostSetting = JSON.parse(urlParams.get('httpPostSetting'));

  $("#dataExport-option-select2").select2().val(dashboadID).trigger("change");

  initializeFilterSelection()

  //http://localhost:8000/dashboard/export?dashboadID=byLastActivity
  //if the url contain the ?dashboadID=byLastActivity param mean this is navigate from dashboard page
  if(dashboadID != null)
  {
  updateExpliciteExportSearchFilter()
  }

});

//if the export is navigate from dashboard view then update the filter below 
function updateExpliciteExportSearchFilter()
{
  
 $("#dataExport-option-select2").attr('disabled', 'disabled');

 var account_no       = dashboardExportHttpPostSetting.searchBody.account_no ;
 var src_warehouse_id = dashboardExportHttpPostSetting.searchBody.src_warehouse_id ;
 var manifested_to    = dashboardExportHttpPostSetting.searchBody.manifested_to ;


 if(account_no != "")
 {
  $("#dataExport-customer-select2").empty();
  $("#dataExport-customer-select2").attr('disabled', 'disabled');
  $("#dataExport-customer-select2").append('<option value="'+account_no+'">'+account_no+'</option>');
  $("#dataExport-customer-select2").val(account_no).trigger('change');
 }else{
  $("#dataExport-customer-select2").attr('disabled', 'disabled');
 }

 if(dashboardExportHttpPostSetting.dashboadID == "byManifestedNotArrivedDest" || dashboardExportHttpPostSetting.dashboadID == "byNewVsManifested")
 {
  if(src_warehouse_id != "")
   {
    $("#dataExport-station-select2").attr('disabled', 'disabled');
    src_warehouse_id.forEach((data, index) => {
    $("#dataExport-station-select2").append('<option selected="selected" value="'+data+'">'+data+'</option>');
    });
  }
  else{
    $("#dataExport-station-select2").attr('disabled', 'disabled');
    $("#dataExport-station-select2").append('<option selected="selected" value="">All Stations</option>');

  }
 }else
 {
   if(src_warehouse_id != "")
   {
    $("#dataExport-station-select2").empty();
    $("#dataExport-station-select2").attr('disabled', 'disabled');
    $("#dataExport-station-select2").append('<option value="'+src_warehouse_id+'">'+src_warehouse_id+'</option>');
    $("#dataExport-station-select2").val(src_warehouse_id).trigger('change');
   }else{
    $("#dataExport-station-select2").attr('disabled', 'disabled');
   }

 }

if(dashboardExportHttpPostSetting.dashboadID == "byInboundToTransitAndNotPod")
{
    $("#dataExport-station-select2").empty();
    $("#dataExport-station-select2").attr('disabled', 'disabled');
    $("#dataExport-station-select2").append('<option value="'+manifested_to+'">'+manifested_to+'</option>');
    $("#dataExport-station-select2").val(manifested_to).trigger('change');
}


$('#dataExport-daterange').daterangepicker({ startDate: dashboardExportHttpPostSetting.rawFromDate, endDate: dashboardExportHttpPostSetting.rawToDate });
$('#dataExport-daterange span').html(dashboardExportHttpPostSetting.rawFromDate+' - '+dashboardExportHttpPostSetting.rawToDate )
$("#dataExport-daterange").attr('disabled', 'disabled');

searchClick()

}

function initializeFilterSelection()
{

  document.getElementById("filter-selection").innerHTML = ""

  var filterStationWithCustomer =    '<div class="row">'+
                                      '<div class="col-lg-3">'+
                                        '<select class="form-control select2 station-select2-class" id="dataExport-station-select2" style="width: 100%;" data-dashboardID="dataExport"></select>'+
                                      '</div>'+
                                      '<div class="col-lg-3">'+
                                        '<select class="form-control select2 customer-select2-class" id="dataExport-customer-select2" style="width: 100%;">'+
                                          '<option value="">All Customer</option>'+
                                        '</select>'+
                                      '</div>'+
                                      '<div class="col-lg-3">'+
                                        '<button type="button" class="btn btn-default btn-sm daterange-btn" id="dataExport-daterange">'+
                                          '<span>'+
                                            '<i class="fa fa-calendar"></i> Last 7 Days </span>'+
                                          '<i class="fa fa-caret-down"></i>'+
                                        '</button>'+
                                      '</div>'+
                                      '<div class="col-lg-3">'+
                                        '<span class="loader" id="dataExport-loader" style="display:none;"></span>'+
                                        '<button type="button" class="btn btn-block btn-sm btn-primary search-btn" id="dataExport-search" onclick="searchClick()">Search</button>'+
                                      '</div>'+
                                      '</div>'

var filterMultipleStation =    '<div class="row">'+
                                      '<div class="col-lg-3">'+
                                        '<select class="form-control select2 station-select2-class"  multiple="multiple" id="dataExport-station-select2" style="width: 100%;" data-dashboardID="dataExport"></select>'+
                                      '</div>'+
                                      '<div class="col-lg-3">'+
                                      '</div>'+
                                      '<div class="col-lg-3">'+
                                        '<button type="button" class="btn btn-default btn-sm daterange-btn" id="dataExport-daterange">'+
                                          '<span>'+
                                            '<i class="fa fa-calendar"></i> Last 7 Days </span>'+
                                          '<i class="fa fa-caret-down"></i>'+
                                        '</button>'+
                                      '</div>'+
                                      '<div class="col-lg-3">'+
                                        '<span class="loader" id="dataExport-loader" style="display:none;"></span>'+
                                        '<button type="button" class="btn btn-block btn-sm btn-primary search-btn" id="dataExport-search" onclick="searchClick()">Search</button>'+
                                      '</div>'+
                                      '</div>'

var filterSingleStation =    '<div class="row">'+
                                      '<div class="col-lg-3">'+
                                        '<select class="form-control select2 station-select2-class" id="dataExport-station-select2" style="width: 100%;" data-dashboardID="dataExport"></select>'+
                                      '</div>'+
                                      '<div class="col-lg-3">'+
                                      '</div>'+
                                      '<div class="col-lg-3">'+
                                        '<button type="button" class="btn btn-default btn-sm daterange-btn" id="dataExport-daterange">'+
                                          '<span>'+
                                            '<i class="fa fa-calendar"></i> Last 7 Days </span>'+
                                          '<i class="fa fa-caret-down"></i>'+
                                        '</button>'+
                                      '</div>'+
                                      '<div class="col-lg-3">'+
                                        '<span class="loader" id="dataExport-loader" style="display:none;"></span>'+
                                        '<button type="button" class="btn btn-block btn-sm btn-primary search-btn" id="dataExport-search" onclick="searchClick()">Search</button>'+
                                      '</div>'+
                                      '</div>'

                          var dataExportOptionSelect2 = $("#dataExport-option-select2").val()
                          switch(dataExportOptionSelect2) {
                            case "byOfdNoFutherAction":
                              document.getElementById("filter-selection").innerHTML = filterStationWithCustomer
                              break;
                            case "byArrivedDestNotOfd":
                              document.getElementById("filter-selection").innerHTML = filterStationWithCustomer
                              break;
                            case "byLastActivity":
                              document.getElementById("filter-selection").innerHTML = filterStationWithCustomer
                              break;
                              case "byManifestedNotArrivedDest":
                                document.getElementById("filter-selection").innerHTML = filterMultipleStation
                              break;
                              case "byNewVsManifested":
                                document.getElementById("filter-selection").innerHTML = filterMultipleStation
                              break;
                              case "byInboundToTransitAndNotPod":
                                document.getElementById("filter-selection").innerHTML = filterSingleStation
                              break;
                            default:
                          }

  prepareWarehosueSelect2()
  //initialize date range
  initializeDateRangeButton() 
  //initialize select2 
  $('.select2').select2();
  //initialize .station-select2-class 
  initializeStationSelect2() 
}

function initializeDateRangeButton()
{
//InitializeDateRageButton
$('#dataExport-daterange').daterangepicker(dateRangeOption,
      function (start, end) {
        $('#dataExport-daterange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'))
      }
  )
}

//detect dataExport-option-select2 select2 change even
$('#dataExport-option-select2').on('select2:select', function (e) 
{
  initializeFilterSelection()
});

function  initializeStationSelect2() 
{
  //detect warehouse select2 change even
  $('.station-select2-class').on('select2:select', function (e) 
  {
    //to get the selectedCustomerSelect2ID we perform string replace
    // example we have selectedStationSelect2ID =  "byLastActivity-station-select2"
    // we replace "station" with "customer" to ge the ID 
    var selectedStationSelect2ID  = $(this).attr('id')
    var selectedCustomerSelect2ID = selectedStationSelect2ID.replace("station","customer")
    var customerSelect2LoadingID  = selectedStationSelect2ID.replace("station","loading")

    updateCustomerSelect2DataWithSelectedStation(selectedStationSelect2ID, selectedCustomerSelect2ID,customerSelect2LoadingID)
  });
}



async function updateCustomerSelect2DataWithSelectedStation(selectedStationSelect2ID , selectedCustomerSelect2ID,customerSelect2LoadingID)
{
    $("#"+customerSelect2LoadingID).show();
    $("#"+selectedCustomerSelect2ID).empty();
    var selectedStationCode                  = $("#"+selectedStationSelect2ID).val()
    var endPoint                             = "{{ URL::to('/hq/hq_consumer_register_search/get_all_customer_by_warehouse') }}"+"/"+selectedStationCode
    var data                                 = {'_token': "{{ csrf_token() }}",}

    const searchResult = await syncAjaxCall(data,endPoint,"POST","");
    if(searchResult.status=="SUCCESS")
    {
      $("#"+selectedCustomerSelect2ID).append("<option value=''>All Customer</option>")
      for(data of searchResult.response)
      {
          $("#"+selectedCustomerSelect2ID).append("<option value='" + data.account_no + "'"+">"+data.account_no+" - "+data.name+"</option>")
      }
      
    }
    
    $("#"+customerSelect2LoadingID).hide();
}

async function updateCustomerSelect2DataWithLoggedInWarehuseCode(warehouseCode)
{
    var endPoint                             = "{{ URL::to('/hq/hq_consumer_register_search/get_all_customer_by_warehouse') }}"+"/"+warehouseCode
    var data                                 = {'_token': "{{ csrf_token() }}",}

    const searchResult = await syncAjaxCall(data,endPoint,"POST","");
    if(searchResult.status=="SUCCESS")
    {
      for(data of searchResult.response)
      {
          $(".customer-select2-class").append("<option value='" + data.account_no + "'"+">"+data.account_no+" - "+data.name+"</option>")
      }
    }
}

async function prepareWarehosueSelect2()
  {

    if(warehouseCode == "HUB")
    {
      $(".station-select2-class").append("<option value=''>All Station</option>")
      warehouseList.forEach(function (warehouse, index) {
        $(".station-select2-class").append("<option value='"+warehouse.code+"'>"+warehouse.code+"</option>")
      });

      $('.station-select2-class').val(); // Select the option with a value of 
      $('.station-select2-class').trigger('change'); // Notify any JS components that the value changed

      $('.station-select2-multiple-class').val([""]).trigger('change');
    }else{
      $(".station-select2-class").append("<option value='"+warehouseCode+"'>"+warehouseCode+"</option>")
      $('.station-select2-class').val(warehouseCode); // Select the option with a value of 
      $('.station-select2-class').trigger('change'); // Notify any JS components that the value changed
      $('.station-select2-multiple-class').val([warehouseCode]).trigger('change');

      updateCustomerSelect2DataWithLoggedInWarehuseCode(warehouseCode)
    }

  }
 function searchClick()
 {
  updateFilterSetting()
  fetchDashboardData()
 }


function updateFilterSetting()
{
  //find out the selected dashBoardID
  var dashBoardID     =  $("#dataExport-option-select2").val();
  //export the setting from config 
  var EXPORT_SETTINGS = JSON.parse('@php echo json_encode(config('dahsboardSettings.EXPORT_SETTINGS')) @endphp')
  //loop the esport setting and match with dashBoardID
  var thisDashBoardIDSetting ;
  EXPORT_SETTINGS.forEach(function(data,index){
    if(data.dashboadID == dashBoardID)
    {
      thisDashBoardIDSetting = data;
    }
  })

  httpPostSetting = JSON.parse(JSON.stringify(defaultHttpPostSetting));

  var rawFromDate = IOSDateToLocalDateString_withoud_time_YMD($('#dataExport-daterange').data('daterangepicker').startDate._d)
  var rawToDate   = IOSDateToLocalDateString_withoud_time_YMD($('#dataExport-daterange').data('daterangepicker').endDate._d)
  var fromDate    = localTimeToSQLGMT(rawFromDate,"from")
  var toDate      = localTimeToSQLGMT(rawToDate,"to")

  var srcWarehouseID = $("#dataExport-station-select2").val()
  var accountNo      = $("#dataExport-customer-select2").val()


  httpPostSetting.rawFromDate = rawFromDate
  httpPostSetting.rawToDate   = rawToDate

  httpPostSetting.dashboadID = thisDashBoardIDSetting.dashboadID
  httpPostSetting.chartType  = thisDashBoardIDSetting.chartType
  httpPostSetting.endPoint   = thisDashBoardIDSetting.endPoint


  var dataExportOptionSelect2 = $("#dataExport-option-select2").val()
                          switch(dataExportOptionSelect2) {
                            case "byOfdNoFutherAction":
                              httpPostSetting.searchBody = {
                                                            from                  : fromDate,
                                                            to                    : toDate,
                                                            src_warehouse_id      : srcWarehouseID,
                                                            account_no            : accountNo,
                                                            }
                              break;
                            case "byArrivedDestNotOfd":
                              httpPostSetting.searchBody = {
                                                            from                  : fromDate,
                                                            to                    : toDate,
                                                            src_warehouse_id      : srcWarehouseID,
                                                            account_no            : accountNo,
                                                            }
                              break;
                            case "byLastActivity":
                              httpPostSetting.searchBody = {
                                                            from                  : fromDate,
                                                            to                    : toDate,
                                                            src_warehouse_id      : srcWarehouseID,
                                                            account_no            : accountNo,
                                                            }
                              break;
                              case "byManifestedNotArrivedDest":
                              httpPostSetting.searchBody = {
                                                            from                  : fromDate,
                                                            to                    : toDate,
                                                            src_warehouse_id      : srcWarehouseID,
                                                            account_no            : accountNo,
                                                            }
                              break;
                              case "byNewVsManifested":
                              httpPostSetting.searchBody = {
                                                            from                  : fromDate,
                                                            to                    : toDate,
                                                            src_warehouse_id      : srcWarehouseID,
                                                            account_no            : accountNo,
                                                            }
                              break;
                              case "byInboundToTransitAndNotPod":
                                httpPostSetting.searchBody = {
                                                              from                  : fromDate,
                                                              to                    : toDate,
                                                              manifested_to         : srcWarehouseID,
                                                              }
                              break;
                            default:
                            }


}


async function fetchDashboardData()
{
  $("#load-overlay").show();
  dashboardExportRequestResult             = []
  //this method is it split the date range to every day and search from API , to avoid congested from the API call if the date range is more than 1 month 
  var diffDay = compare2DateDiffDay(httpPostSetting.rawFromDate , httpPostSetting.rawToDate)
  var dateRangeSeachArrayList =[];
  if(diffDay > 1)//if search date range more than 2 days 
  {
    //form an array which store all the date range 
    dateRangeSeachArrayList = getDatesInRange(httpPostSetting.rawFromDate, httpPostSetting.rawToDate)
    //loop the date range 
    for (var index in dateRangeSeachArrayList)
    {   
        var page = 1

        var process = parseInt((100/parseInt(dateRangeSeachArrayList.length))*(index))
        displayProcess(process+"%","Fetching data process of "+(index)+" of "+dateRangeSeachArrayList.length,process)

        //append the httpPostSetting
        httpPostSetting.searchBody.from = dateRangeSeachArrayList[index]["from"]
        httpPostSetting.searchBody.to = dateRangeSeachArrayList[index]["to"]

        while(1)
        {
        const searchResult = await syncAjaxCall(httpPostSetting.searchBody,dashboardApiPath+httpPostSetting.endPoint+"?page="+page+"&page_size=5000&filter="+filter+"&filterValue="+filterValue,"POST",dashboardApiToken);
       
        if(searchResult != null){dashboardExportRequestResult    = dashboardExportRequestResult.concat(searchResult)}else{break;}
        if(searchResult.length <5000){break;}
        page++
        }
        $("#process-info-box-content").hide();
    }
  }else{//else using a convention way to search the result 
      var page = 1
      while(1)
          {
          const searchResult = await syncAjaxCall(httpPostSetting.searchBody,dashboardApiPath+httpPostSetting.endPoint+"?page="+page+"&page_size=5000&filter="+filter+"&filterValue="+filterValue,"POST",dashboardApiToken);
          if(searchResult != null){dashboardExportRequestResult    = dashboardExportRequestResult.concat(searchResult)}else{break;}
          if(searchResult.length <5000){break;}
          page++
          }
  }

  if(dashboardExportRequestResult.length>0)
  {
    renderWaybillTable()
    //exportDataToExcel()
  }
  $("#load-overlay").hide();
}

function renderWaybillTable()
{

  var tableResult = "";
  var displayDataLimitCount = 10000;
  var totalDashboardExportRequestResultCount = dashboardExportRequestResult.length;
  
        for(i in dashboardExportRequestResult)
        {     
                var cnSearchURL       = "{{url('/reports/waybill_report_search?cn=')}}"+dashboardExportRequestResult[i].CnNo
      
                var tem = 
                "<tr class='odd gradeX'>"+
                "<td><a href='"+cnSearchURL+"' class='product-title' target='_blank'>"+dashboardExportRequestResult[i].CnNo+"</a></td>"+
                "<td>"+dashboardExportRequestResult[i].ShipperName+"</td>"+
                "<td>"+dashboardExportRequestResult[i].ConsigneeName+"</td>"+
                "<td>"+IOSDateToLocalDateString(dashboardExportRequestResult[i].CreatedAt)+"</span></td>"+
                "<td>"+dashboardExportRequestResult[i].Src+"</td>"+
                "<td>"+dashboardExportRequestResult[i].Dest+"</td>"+
                "<td>"+dashboardExportRequestResult[i].LastShippingActivity+"</td>"+
                "<td>"+dashboardExportRequestResult[i].LastHandlingWarehouseId+"</td>"+
                "</tr>"
                tableResult = tableResult.concat(tem);
                if(i == displayDataLimitCount)
                {break;}
        }

        var tableStructureString =  '<button type="button" class="btn btn-block bg-olive btn-flat" onclick="exportDataToExcel()">Export to Excel</button>'+
                                    '<table id="waybill-table" class="table table-bordered table-striped">'+
                                      '<thead>'+
                                        '<tr>'+
                                          '<th>CN No</th>'+
                                          '<th>Shipper</th>'+
                                          '<th>Consignee</th>'+
                                          '<th>Created Date</th>'+
                                          '<th>Ori</th>'+
                                          '<th>Dest</th>'+
                                          '<th>Last Avtivity</th>'+
                                          '<th>Last Handdling Station</th>'+
                                        '</tr>'+
                                      '</thead>'+
                                      '<tbody id="waybill-table-t-body"></tbody>'+
                                      '</tfoot>'+
                                    '</table>'

        document.getElementById("waybill-table-box-body").innerHTML = "";
        document.getElementById("waybill-table-box-body").innerHTML = tableStructureString;
        document.getElementById("waybill-table-t-body").innerHTML   = "";
        document.getElementById("waybill-table-t-body").innerHTML   = tableResult;
        reInitializeTable();
        //display remark if the totalDashboardExportRequestResultCount is more than displayDataLimitCount
        if(totalDashboardExportRequestResultCount > displayDataLimitCount)
        {
          document.getElementById("display-remark").innerHTML = "<code>The Table below is only display first "+displayDataLimitCount+" data , please press export to export full data in excel</code>";
        }else
        {
          document.getElementById("display-remark").innerHTML = ""
        }

}

function exportDataToExcel()
{       var dashboardExportData     = [];
        var dataExportOptionSelect2 = $("#dataExport-option-select2").val()
        var rawFromDate             = IOSDateToLocalDateString_withoud_time_YMD($('#dataExport-daterange').data('daterangepicker').startDate._d)
        var rawToDate               = IOSDateToLocalDateString_withoud_time_YMD($('#dataExport-daterange').data('daterangepicker').endDate._d)

        filename = 'BBB Dashboard Expor_'+dataExportOptionSelect2+'_'+rawFromDate+' to '+rawToDate
        //convert UTC time to local TIME
        for(i in dashboardExportRequestResult)
        {
          var temArray = [];
          temArray['CreatedAt']                = "'"+IOSDateToLocalDateString(dashboardExportRequestResult[i]['CreatedAt']);
          temArray['ShipperName']              = dashboardExportRequestResult[i]['ShipperName']
          temArray['ConsigneeName']            = dashboardExportRequestResult[i]['ConsigneeName']
          temArray['CnNo']                     = dashboardExportRequestResult[i]['CnNo']
          temArray['Pc']                       = dashboardExportRequestResult[i]['Pc']
          temArray['LastShippingActivity']     = dashboardExportRequestResult[i]['LastShippingActivity']
          temArray['LastShippingActivityDate'] = "'"+IOSDateToLocalDateString(dashboardExportRequestResult[i]['LastShippingActivityDate']);
          temArray['LastHandlingStation']      = dashboardExportRequestResult[i]['LastHandlingWarehouseId'];
          temArray['DestinationStation']       = dashboardExportRequestResult[i]['Dest'];
          dashboardExportData.push(temArray);
        }

        const xls = new XlsExport(dashboardExportData, 'BBB Dashboard Export')
        xls.exportToXLS(filename+'.xls') 
}

function displayProcess(upload_info_box_number,upload_progress_description,width)
    {
        $("#process-info-box-content").show();
        $('#upload-info-box-number').text(upload_info_box_number);
        $('#upload-progress-description').text(upload_progress_description);
        $("#upload-progress-bar").width(width+'%')
    }

function reInitializeTable()
{
  $(function () {
    $('#waybill-table').DataTable()
  })

  $("a.cnData").click(function() {
      window.open( "{{ url('/reports/waybill_report_search?cn=') }}"+$(this).text());
  });
}


</script>