@include('common.header')

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

            <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">Updated Weight Waybills Search</h3>
            
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding">
                        <table class="table">
                        <tr>
                                <td><b>Waybill Weight Updated Date</b></td>
                                <td> : </td>
                                <td>
                                    <div class="input-group date">
                                        <div class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                        <input type="date" class="form-control input-sm" id="from-date" name="from_date" placeholder="" min="1900-01-01">
                                    </div>
                                </td>
                                <td>
                                    <div class="input-group date">
                                        <div class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                        <input type="date" class="form-control input-sm" id="to-date" name="to_date" placeholder="" max="2050-01-01">
                                    </div>
                                </td>
                                <td>
                                    <button type="button" id="search-button" class="col-xs-4 btn btn-success" onClick ="search_waybill()"> Search</button>
                                    <!-- <a href="#" class="col-xs-offset-1 col-xs-4 btn btn-primary">Print All</a> -->
                                </td>
                            </tr>
                        </table>
                    </div>
            </div>

    

            <div class="box box-primary">
            <div class="box-header with-border">
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                        <table id="waybills-table" class="table table-bordered">
                        <thead>
                            <tr>
                            <th>ID</th>
                            <th>CN</th>
                            <th>Updated Weight Date</th>
                            <th>Origin</th>
                            <th>Description</th>
                            </tr>                           
                        </thead>
                            <tbody>
                        </tbody>
                        </table>
                        </div>
              <!-- /.box-body -->
          </div>

            
</section>

@include('common.footer')

<script>

var allWaybills = [];
var waybillTable  = "";

$( document ).ready(function() 
   {
    initializeDataTable()
        var                     today              = IOSDateToLocalDateString_withoud_time_YMD(new Date())
        document.getElementById('from-date').value = today;
        document.getElementById('to-date').value   = today;
   });

 //Flat red color scheme for iCheck
 $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
      checkboxClass: 'icheckbox_flat-green',
      radioClass   : 'iradio_flat-green'
    })

$('.select2').select2();

$(document).on('focus', '.select2', function (e) {
if (e.originalEvent) {
    $(this).siblings('select').select2('open');    
} 
});

//control bulk check on check box
$('#checkAll').click(function () {    
     $('input:checkbox').prop('checked', this.checked);    
 });

function initializeDataTable()
{

  waybillTable =  $('#waybills-table').DataTable( {
                                                  dom: 'Bfrtip',
                                                  buttons: [
                                                      'excelHtml5',
                                                      'csvHtml5',
                                                      'pageLength'
                                                  ],
                                                  "lengthMenu": [ 10, 25, 50, 100 ],
                                                  data:[],
                                                  columns:[
                                                              {data: "id"},
                                                              {data: "cn"},
                                                              {data: "update_weight_date"},
                                                              {data: "origin"},
                                                              {data: "description"}
                                                            ]
                                                });

                         

}


async function search_waybill()
{  

    var fromDate = new Date($("#from-date").val())
    var toDate   = new Date($("#to-date").val())

    if(((toDate-fromDate)/86400000) > 90)
    {
        show_warning("You are only allow to search within 90 days, please try again")
        return; //stop the execution of function
    }


    $("#load-overlay").show();
    $('#waybills-table').DataTable().clear().draw();


    allWaybills = [];

    var dataArray = {};
        dataArray['from']        = ($("#from-date").val() != "") ? localTimeToISOGMT($("#from-date").val(),"from") : "";
        dataArray['to']          = ($("#to-date").val() != "") ? localTimeToISOGMT($("#to-date").val(),"to") : "";


     var searchEnpoint = "{{ url('/post/call/hq/shipment_updated_weight/report?page=1')}}"; 
                        while(1)
                        {
                            const searchResult = await syncAjaxCall(dataArray,searchEnpoint,"POST",bearerToken);
                            allWaybills  = allWaybills.concat(searchResult.data);
                            if( searchResult.next_page_url != null)
                            {
                                searchEnpoint = searchResult.next_page_url;
                            }else{
                                    break;
                            }
                        }

     render_waybill_table(allWaybills)

}

function render_waybill_table(dataArray)
{

var totalRowData = [];

 for(i in dataArray)
        {
            var temRow = {
                              "id"                : dataArray[i].ID,
                              "cn"                : dataArray[i].cnNo,
                              "update_weight_date": IOSDateToLocalDateString(dataArray[i].ShippingsCreatedAt),
                              "origin"            : dataArray[i].initSrcWarehouse_id,
                              "description"       : dataArray[i].ShippingsDescription,
                          }
            totalRowData.push(temRow);
        }

        waybillTable.rows.add(totalRowData).draw(); 


    $("#load-overlay").hide();

}

    function show_transfer_invalid_warning($msg)
    {
                    $("#transfer-invalid-warning-message").html($msg);
                    $("#transfer-invalid-warning").show();
                    $("#transfer-invalid-warning").delay(3000).hide(0, function() {});
    }



    function show_warning($msg)
    {
                    $("#invalid-warning-message").html($msg);
                    $("#invalid-warning").show();
                    $("#invalid-warning").delay(3000).hide(0, function() {});
    }

    function show_danger($msg)
    {
                    $("#invalid-danger-message").html($msg);
                    $("#invalid-danger").show();
                    $("#invalid-danger").delay(3000).hide(0, function() {});
    }

    function show_success($msg)
    {
                    $("#invalid-success-message").html($msg);
                    $("#invalid-success").show();
                    $("#invalid-success").delay(3000).hide(0, function() {});
                    
    }

    


</script>