@include('common.header')
<div id="upload-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">
@include('alert.alert_panel')
<div class="col-lg-12" id="load-overlay" name="load-overlay" style="display:none;">
        <div id="loader" ></div>
        <div id="overlay"></div>
    </div>
    <div class="row">
   
        <div class="col-xs-12">
            <div class="box box-primary">
                 <form action="">
                    <div class="box-header">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <h3 class="box-title"><b>Shipment</b></h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding">
                        <table class="table">
                            <tr>
                                <td colspan="4"><h3>All Waybill</h3></td>
                            </tr>
                            <tr>
                                <td><b>Waybill Created 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="waybill-from-date" name="waybill_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="waybill-to-date" name="waybill_to_date" placeholder="" max="2050-01-01">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><b>CN No</b></td>
                                <td> : </td>
                                <td><input type="text" id="waybill-no" name="waybill-no" class="form-control"/></td>
                                <td>
                                    <button type="button" id="search-button" class="col-xs-4 btn btn-success"onClick = "startNewSearch()"> Search</button>
                                    <!-- <a href="#" class="col-xs-offset-1 col-xs-4 btn btn-primary">Print All</a> -->
                                </td>
                            </tr>
                        </table><br/>
                    </div>
                </form>
            </div>

    

        <div id="resultTable">
                    <div class="box">
                        <div class="box-header">
                        </div>
                        <!-- /.box-header -->
                        <div class="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>
                            <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            </tfoot>
                        </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
        </div>

</div>

            
</section>

@include('common.footer')

<script>
var allWaybills = []

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

$('form input').on('keypress', function(e) {
    return e.which !== 13;
    });

     function displayLoading() {
        $("#load-overlay").show();
    }

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

        if($("#waybill-no").val()=='')
        {
            if(((toDate-fromDate)/86400000) > 6)
            {
                show_warning("You are only allow to search waybill within 7 days, please try again")
                return; //stop the execution of function
            }

            if(isNaN((toDate-fromDate)/86400000))
            {
                show_warning("You are selected invalid date, please try again")
                return; //stop the execution of function
            }
        }

        //console.log(((toDate-fromDate)/86400000));

        allWaybills=[]
        $('#waybill-table').DataTable().clear().draw();
        search_waybill()
    }

function search_waybill()
{  
    $("#load-overlay").show();
    var from_date = ''
    var to_date =''
    if($("#waybill-from-date").val()!= '' || $("#waybill-to-date").val() != '' )
    {
        from_date = new Date($("#waybill-from-date").val());
        from_date.setHours(from_date.getHours()+ThistimeZone);
        from_date=from_date.toISOString() 


        to_date = new Date($("#waybill-to-date").val());
        to_date.setHours(to_date.getHours()+(24+ThistimeZone));
        to_date=to_date.toISOString()
    }
   
    
    const data = {
                from:from_date ,
                to: to_date,
                cnno:$("#waybill-no").val(),
                offset:0
                };
    const searchParams = new URLSearchParams(data);

    
                    var settings = {
                                    "async": true,
                                    "crossDomain": true,
                                    "url":'