@include('common.header')
 <!-- /.info-box -->
 <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-info">
                <form>
                    <div class="box-header">
                        <h3 class="box-title"><b>HQ Billing Module - Search Manifested Waybill</b></h3>

                        <!-- <div class="box-tools">
                            <div style="width: 160px;">
                                <a href="{{ url('/home/manifest_search') }}" class="btn btn-default pull-right"><i class="fa fa-search"></i></a>
                                <a href="{{ url('/home/manifest_add') }}" class="btn btn-info pull-right"><i class="fa fa-pencil"></i></a>
                            </div>
                        </div> -->
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding">
                        <table class="table">
                            <tr>
                                <td><input type="text"  class="form-control" style='display:none;'/></td>
                            </tr>
                            <tr>
                                <td><label>From Station </label></td>
                                <td>   
                                    <div class="form-group">
                                            <select class="form-control select2" id="manifest-from-station" name="manifest_from_hub" style="width: 100%;">
                                                <option value="">Select origin station</option>
                                                <option value="">All</option>
                                                @foreach($hub_list as $hub)
                                                @if(((isset($manifest_details))? $manifest_details->destWarehouseID : null) === $hub->code )
                                                    <option value="{{ $hub->code }}" selected="selected">{{ $hub->stateShort }} - {{ $hub->stateLong }}</option>
                                                @else
                                                    <option value="{{ $hub->code }}">{{ $hub->stateShort }} - {{ $hub->stateLong }}</option>
                                                @endif
                                                @endforeach
                                            </select>
                                    </div>    
                                </td>

                                <td><label>To Station </label></td>
                                <td>   
                                    <div class="form-group">
                                            <select class="form-control select2" id="manifest-to-station" name="manifest_to_hub" style="width: 100%;">
                                                <option value="">Select destination station</option>
                                                <option value="">All</option>
                                                @foreach($hub_list as $hub)
                                                @if(((isset($manifest_details))? $manifest_details->destWarehouseID : null) === $hub->code )
                                                    <option value="{{ $hub->code }}" selected="selected">{{ $hub->stateShort }} - {{ $hub->stateLong }}</option>
                                                @else
                                                    <option value="{{ $hub->code }}">{{ $hub->stateShort }} - {{ $hub->stateLong }}</option>
                                                @endif
                                                @endforeach
                                            </select>
                                    </div>    
                                </td>
                                 
                            </tr>
                            <tr>
                                <td><b>From </b>date</td>
                                <td>
                                <input type="date" class="form-control input-sm" id="input-date-from" placeholder="" min="1900-01-01">
                                </td>
                                <td><b>To </b>date</td>
                                <td>
                                <input type="date" class="form-control input-sm" id="input-date-to" placeholder="" max="2050-01-01">
                                </td>
                            </tr>

                            
                            <tr>
                                <td colspan="4">
                                        <!-- <button type="button" class="btn col-xs-5 btn-success pull-left">Export</button> -->
                                        <button type="button" class="btn col-xs-2 btn-info pull-right" onClick = "startNewSearch()">Search</button>
                                </td>
                            </tr>
                                
                        </table>
                    </div>
                   
                </form>
        </div>

                


        
    <!-- row  -->

        <div id="resultTable">
                <div class="box">
                        <div class="box-header">
                        <h3 class="box-title">Waybills</h3>
                        <button type="button" class="btn bg-olive margin pull-right " id="export-excel" name="export_excel" onclick="exportToExcel()"><i class="fa  fa-file-excel-o"></i> Export Now</button>
                        </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>Ori</th>
                                    <th>Dest</th>
                                    <th>Created Date</th>
                                    <th>Last Avtivity</th>
                                    <th>Last Avtivity Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                </tfoot>
                            </table>
                        </div>
                    <!-- /.box-body -->
                </div>
        </div>

         

               
    </div>
</div>
               
                
</section>
@include('common.footer')


<script>


var allWaybills = []

//initialize select 2 render function
$('.select2').select2();

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

$("#search-type").on('change', function() {
    if(this.value == "inbound_pod")
    {
        $("#customer-selection-row").hide()

    }else{
        $("#customer-selection-row").show()

    } 
});



function startNewSearch()
{
    allWaybills=[]
    $('#waybill-table').DataTable().clear().draw();
    runSearchAjax(1)
    $("#invalid-success").hide();
}


function runSearchAjax(pages)
{   var totalPages = 0 
       
         //AVTIVE LOADED
         $("#load-overlay").show();
                                //******************* */
                                $.ajax({
                                    type:"POST",//or POST
                                    url:"{{ URL::to('/hq/account_billing/search/get_diverge_manifested_waybill') }}?page="+pages,
                                    data: {
                                        '_token': "{{ csrf_token() }}",
                                        'from_station':$("#manifest-from-station").val(),
                                        'to_station':$("#manifest-to-station").val(),
                                        'from_date': $("#input-date-from").val(),
                                        'to_date': $("#input-date-to").val(),
                                    },
                            
                                    success:function(responsedata)
                                    {
                                       
                                        var process = parseInt((100/parseInt(responsedata.response.last_page))*(pages))
                                        displayProcess(process+"%","Fetching Waybill process of "+(pages)+" of "+responsedata.response.last_page,process)

                                        if (responsedata.status=="SUCCESS")
                                        { 
                                            console.log(responsedata);
                                            allWaybills = allWaybills.concat(responsedata.response.data)

                                            
                                        }

                                        if(responsedata.response.last_page == pages || responsedata.response.last_page == 0)
                                        {
                                            //console.log(JSON.stringify(allWaybills))
                                            $("#load-overlay").hide();
                                            $("#upload-info-box-content").hide();
                                            document.getElementById("export-excel").innerText = "Export All "+(allWaybills.length)+" waybills"
                                            //show_success("Search Completed")
                                            show_final_result("Total waybill "+allWaybills.length+" is ready for download")

                                            //renderTable(allWaybills)
                                            //console.log(allWaybills);
                                        }else{
                                            runSearchAjax(pages+1)

                                        }
                                        
            
                                       

                                    },

                                    error: function( objAJAXRequest, strError ){                                         
                                            alert('System Error: Failed code'+strError); 
                                            //do something. Try again perhaps?
                                    }


                                });
                                    


    }

    function renderTable(data)
    {

        var tableResult_head = 
        "<div class='box'>"+
                    "<div class='box-header'>"+
                    "<h3 class='box-title'>Waybills</h3>"+
                    "<button type='button' class='btn bg-olive margin pull-right ' id='export-excel' name='export_excel' onclick='exportToExcel()'><i class='fa  fa-file-excel-o'></i> Export Now</button>"+
                    "</div>"+
                    "<div class='box-body'>"+
                        "<table id='waybill-table' class='table table-bordered table-striped'>"+
                            "<thead>"+
                                    "<th>CN No</th>"+
                                    "<th>Shipper</th>"+
                                    "<th>Consignee</th>"+
                                    "<th>Ori</th>"+
                                    "<th>Dest</th>"+
                                    "<th>Created Date</th>"+
                                    "<th>Last Avtivity</th>"+
                                    "<th>Last Avtivity Date</th>"+
                                "</tr>"+
                            "</thead>"+
                            "<tbody>"
        var result = "";
        for(i in data)
        {       
                var tem = 
                "<tr class='odd gradeX'>"+
                "<td>"+data[i].cnNo+"</td>"+
                "<td>"+data[i].shipperName+"</td>"+
                "<td>"+data[i].consigneeName+"</td>"+
                "<td>"+data[i].srcWarehouseID+"</td>"+
                "<td>"+data[i].destWarehouseID+"</td>"+
                "<td>"+IOSDateToLocalDateString(data[i].createdAt)+"</td>"+
                "<td>"+data[i].lastShippingActivity+"</td>"+
                "<td>"+IOSDateToLocalDateString(data[i].lastShippingActivityDate)+"</td>"+
                "</tr>"
                result = result.concat(tem);

        }

        var tableResult_tail ="</tbody>"+
                            "<tfoot>"+
                            "</tfoot>"+
                        "</table>"+
                    "</div>"+
            "</div>"

        var finalResult = tableResult_head + result+tableResult_tail;
        document.getElementById("resultTable").innerHTML = "";
        document.getElementById("resultTable").innerHTML = finalResult;
        reInitializeTable();

    }

    

    function exportToExcel()
    {
        var from_station = $("#manifest-from-station").val()
        var to_station = $("#manifest-to-station").val()
        var from_date = $("#input-date-from").val()
        var to_date = $("#input-date-to").val()
        filename = from_station+'-'+to_station+'_'+from_date+' to '+to_date
        //convert UTC time to local TIME
        for(i in allWaybills)
        {
            allWaybills[i]['createdAt'] = IOSDateToLocalDateString(allWaybills[i]['createdAt'])
            allWaybills[i]['consolidateDate'] = IOSDateToLocalDateString(allWaybills[i]['consolidateDate'])
            allWaybills[i]['lastShippingActivityDate'] = IOSDateToLocalDateString(allWaybills[i]['lastShippingActivityDate'])
            allWaybills[i]['updatedAt'] = IOSDateToLocalDateString(allWaybills[i]['updatedAt'])
            allWaybills[i]['cnNo'] = "'"+allWaybills[i]['cnNo']+"'" 
        }

        const xls = new XlsExport(allWaybills, 'BBB Billing')
        xls.exportToXLS(filename+'.xls') 
    }
  


    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() {});
                    
    }

    function show_final_result($msg)
    {
                    $("#invalid-success-message").html($msg);
                    $("#invalid-success").show();
                    
    }

    function sleep(delay) {
        var start = new Date().getTime();
        while (new Date().getTime() < start + delay);
      }

    function displayProcess(upload_info_box_number,upload_progress_description,width)
    {
        $("#upload-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+'%')
    }
</script>