@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>Network 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>Search Type</label></td>
                                <td>   

                                            <select class="form-control select2" id="search-type" name="search_type" style="width: 100%;">
                                                <option value="outbound">Outbound</option>
                                                <option value="inbound_pod">Inbound with <b>POD</b></option>
                                            </select>
 
                                </td>
                                <td></td>

                                 
                            </tr>
                            <tr id="customer-selection-row">
                                <td><label>Group By Customer</label>
                                </td>
                                <td>   
                                            <select class="form-control select2" id="customer-no" name="customer_no" style="width: 100%;">
                                                        <option value="">All Customer</option>
                                                        @foreach($all_customers as $customer)
                                                            <option value="{{ $customer->account_no }}">{{ $customer->account_no }} - {{ $customer->name }}</option>
                                                        @endforeach
                                            </select>
                                </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>Consolidate Date</th>
                                <th>Src</th>
                                <th>CN</th>
                                <th>Account No</th>
                                <th>Congsignee Name</th>
                                <th>Dest</th>
                                <th>Actual Weight</th>
                                <th>Volumn Weight</th>
                                <th>Parcel Type</th>
                                <th>pc</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()
{
    $("#invalid-success").hide();
    allWaybills=[]
    $('#waybill-table').DataTable().clear().draw();
    runSearchAjax(1)
}


function runSearchAjax(pages)
{   var totalPages = 0 
         //AVTIVE LOADED
         $("#load-overlay").show();
                                //******************* */
                                $.ajax({
                                    type:"POST",//or POST
                                    url:"{{ URL::to('/reports/network_manifested_waybill_report_search/get_manifested_waybill_all') }}?page="+pages,
                                    data: {
                                        '_token': "{{ csrf_token() }}",
                                        'search_type':$("#search-type").val(),
                                        'from_date': $("#input-date-from").val(),
                                        'to_date': $("#input-date-to").val(),
                                        'account_no': $("#customer-no").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")
                                        { 
                                            allWaybills = allWaybills.concat(responsedata.response.data)
                                        }

                                        if(responsedata.response.last_page == pages || responsedata.response.last_page == 0)
                                        {
                                            $("#load-overlay").hide();
                                            $("#upload-info-box-content").hide();
                                            document.getElementById("export-excel").innerText = "Export All "+(allWaybills.length++)+" waybills"
                                            renderTable(allWaybills)
                                        }else{
                                            runSearchAjax(pages+1)

                                        }
                                        
            
                                       

                                    },

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


                                });
                                    


    }

    function renderTable(data)
    {
        //remove the empty object in the array
        var newDataArray = data.filter(value => JSON.stringify(value) !== '{}');

        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>"+
                                "<tr>"+
                                "<th>Consolidate Date</th>"+
                                "<th>Src</th>"+
                                "<th>CN</th>"+
                                "<th>Account No</th>"+
                                "<th>Congsignee Name</th>"+
                                "<th>Dest</th>"+
                                "<th>Actual Weight</th>"+
                                "<th>Volumn Weight</th>"+
                                "<th>Parcel Type</th>"+
                                "<th>pc</th>"+
                                "</tr>"+
                            "</thead>"+
                            "<tbody>"
        var result = "";
        // for(i in data)
        // {       
        //         var tem = 
        //         "<tr class='odd gradeX'>"+
        //         "<td>"+IOSDateToLocalDateString(data[i].consolidateDate)+"</td>"+
        //         "<td>"+data[i].srcWarehouseID+"</td>"+
        //         "<td>"+data[i].cnNo+"</td>"+
        //         "<td>"+data[i].accountNo+"</td>"+
        //         "<td>"+data[i].consigneeName+"</td>"+
        //         "<td>"+data[i].destWarehouseID+"</td>"+
        //         "<td>"+data[i].actualWeight+"</td>"+
        //         "<td>"+data[i].volumeWeight+"</td>"+
        //         "<td>"+data[i].parcelType+"</td>"+
        //         "<td>"+data[i].pc+"</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();


        var search_type     = $("#search_type").val()
        var from_date       = $("#input-date-from").val()
        var to_date         = $("#input-date-to").val()
        var totalWaybill    = newDataArray.length
        show_final_result("Total billing "+totalWaybill+" from "+from_date+" to "+to_date+" is ready , please click export now to download")


    }

    

   async function exportToExcel()
    {
        $("#load-overlay").show();

        var temWaybills = allWaybills

        for (i in temWaybills)
        {
            temWaybills[i].consolidateDate = IOSDateToLocalDateString_withoud_time_DMY(temWaybills[i].consolidateDate)
        }
            //remove the last elemenet null 
            temWaybills.pop();
            var chunkedTableArray = arrayChunk(temWaybills,10000);
            var index = 0 ; 
            for(var i = 0 ; i < chunkedTableArray.length ; i++)
                            {
                                var dataArray = {};
                                dataArray['_token']                 = "{{ csrf_token() }}";
                                dataArray['search_type']            = $("#search-type").val();
                                dataArray['from_date']              = $("#input-date-from").val() ;
                                dataArray['to_date']                = $("#input-date-to").val() ;
                                dataArray['manifestedWaybillArray'] = chunkedTableArray[i] ;

                                const result = await syncAjaxCall(dataArray , "{{ URL::to('/reports/network_manifested_waybill_report_search/manifested_waybill_seach') }}","POST",bearerToken)
                                if (result.status=="SUCCESS")
                                                            { 
                                                                var link=document.createElement('a');
                                                                document.body.appendChild(link);
                                                                link.href=result.response ;
                                                                link.click();
                                                            }
                                                    index ++;               
                                if(index ==  chunkedTableArray.length )
                                {
                                    $("#load-overlay").hide();
                                }
                            

                            }
                        


    }


    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>