@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">
    <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">
    @include('alert.alert_panel')
    
        <div class="col-xs-12">
            <div class="box box-info ">
                <form>
                    <div class="box-header">
                        <h3 class="box-title"><b>Search Uplift Report By Station</b></h3>

                        <div class="box-tools">
                            <div style="width: 160px;">
                                <a href="{{ url('/hub/uplift_report_view') }}"  class="btn btn-primary"><i class="fa fa-file"></i> NEW</a>
                                <a href="{{ url('/hub/uplift_report/print') }}"  target="_blank" class="btn btn-warning pull-right"><i class="fa fa-print"></i> Print</a>
                            </div>
                        </div>
                    </div>

                    <div class="box-body">
                        
                        <div class="row form-group">
                                <div class="col-md-1">
                                    <b>Destination Station</b>
                                </div>
                                <div class="col-md-1">
                                    <b>:</b>
                                </div>
                                <div class="col-md-5">
                                                <select class="form-control select2" id="destination-station-select2" name="destination-station-select2" style="width: 100%;">
                                                    <option value="">Select Station</option>
                                                        @foreach($stations_list as $station)
                                                        <option value="{{ $station->code }}">{{ $station->stateShort }} - {{ $station->stateLong }}</option>
                                                        @endforeach
                                                </select>
                                </div>
                        </div>

                        <div class="row form-group">
                                <div class="col-md-1">
                                    <b>Transit By</b>
                                </div>
                                <div class="col-md-1">
                                    <b>:</b>
                                </div>
                                <div class="col-md-5">
                                                <select class="form-control select2" id="uid-select2" name="destination-station-select2" style="width: 100%;">
                                                    <option value="">ALL</option>
                                                        @foreach($user_list as $user)
                                                        <option value="{{ $user->uid }}">{{ $user->uid }} - {{ $user->name }}</option>
                                                        @endforeach
                                                </select>
                                </div>
                        </div>

                        <div class="row form-group">
                            <div class="col-md-1">
                            <b>Date Time</b>
                            </div>
                            <div class="col-md-1">
                            <b>:</b>
                            </div>
                            <div class="col-md-5">
                                        FROM
                                        <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>

                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-clock-o"></i>
                                            </div>
                                            <input class="form-control time-picker" id="from-time" name="from_time" autocomplete="off" value="00:00:00"//>
                                        </div> 

                            </div>
                            <div class="col-md-5">
                                        TO
                                        <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="" min="1900-01-01">
                                        </div>

                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-clock-o"></i>
                                            </div>
                                            <input class="form-control time-picker" type="text" id="to-time" name="to_time" autocomplete="off" value="00:00:00"/>
                                        </div> 
                            </div>
                        </div>


                        <div class="row form-group">
                            <div class="col-md-1 ">
                            </div>
                            <div class="col-md-1">
                            </div>
                            <div class="col-md-5">
                            </div>
                            <div class="col-md-2">
                            <button type="button" id="search-button" class="col-xs-4 btn btn-success float-right"onClick = "uplift_search()" style="width: 100%;"> Search</button>
                            </div>
                        </div>



                    </div>
                   
                </form>

                
        </div>

        
    </div>

                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                        <h3 class="box-title">Uplifted List</h3>
                        
                        <button type="button" class="btn btn-success pull-right" id="count-label">0</button>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body table-responsive no-padding" id="data-list-table-div">
                        <table class="table table-bordered table-striped" id="data-list-table">
                            <thead>
                            <tr>
                            <th>Waybill</th>
                            <th>Shipper</th>
                            <th>Receiver</th>
                            <th>Parcel Type</th>
                            <th>Description</th>
                            <th>Transit At (UTC+8)</th>
                            <th>Transit Scan By</th>
                            <th>Pcs</th>
                            <th>Weight(Kgs)</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                    </div>
                    

                </div>

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

<script>

$( document ).ready(function() 
{
    $('.select2').select2();
    
    $('.time-picker').datetimepicker({
            format: 'HH:mm:ss',            
        });

});


function reInitializeTable()
{
  $(function () {
    $('#data-list-table').DataTable().draw(true);
    
  })

}

function addExportButton()
{
    $('#data-list-table').dataTable({
               
               dom: 'Bfrtip',
               buttons: [
                   {
                       extend: 'excelHtml5',
                       title: 'Excel',
                       text:'Export to excel'
                       //Columns to export
                       //exportOptions: {
                      //     columns: [0, 1, 2, 3,4,5,6]
                      // }
                   }
                //    {
                //        extend: 'pdfHtml5',
                //        title: 'PDF',
                //        text: 'Export to PDF'
                //        //Columns to export
                //        //exportOptions: {
                //       //     columns: [0, 1, 2, 3, 4, 5, 6]
                //      //  }
                //    }
               ]
           });
}

var allWaybills = []

 
async function uplift_search()
    {  
    allWaybills = [];
    localStorage.removeItem("upliftReportArray");
    localStorage.removeItem("upliftReportParam");


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


    if(((toDate-fromDate)/86400000) > 8)
    {
        show_warning("You are only allow to search variance within 7 days, please try again")
        return; //stop the execution of function
    }
    if(((toDate-fromDate)/86400000) < 0 || isNaN((toDate-fromDate)/86400000) )
    {
        show_warning("You are selected invalid date, please try again")
        return; //stop the execution of function
    }

    if($("#destination-station-select2").val()== "")
    {
        show_warning("You are selected invalid station, please try again")
        return; //stop the execution of function
    }

    var dataArray = {};
    dataArray['_token']                 = "{{ csrf_token() }}";
    dataArray['from']                   = IOSDateToGMTDateString_YMD_HMS(fromDate);
    dataArray['to']                     = IOSDateToGMTDateString_YMD_HMS(toDate);
    dataArray['destination_station']    = $("#destination-station-select2").val();
    dataArray['uid']                    = $("#uid-select2").val();


    $("#load-overlay").show();
    var upliftEndPoint =  "{{ URL::to('/hub/uplift_report/waybills?page=1') }}";
    while(1)
    {   
        const result = await syncAjaxCall(dataArray , upliftEndPoint, "POST",bearerToken)
        
        var process = parseInt((100/parseInt(result.last_page))*(result.current_page))
        displayProcess(process+"%","Fetching data of "+(result.current_page)+" of "+result.last_page,process)

        allWaybills = allWaybills.concat(result.data)
        if(result.next_page_url != null)
        {
            upliftEndPoint = result.next_page_url;
        }else{
            
            break;
        }
    } 

    allWaybills = allWaybills.sort(compareValues('cnNo',''));

    renderTable(allWaybills)
    localStorage.setItem("upliftReportParam", JSON.stringify(dataArray));
    localStorage.setItem("upliftReportArray", JSON.stringify(allWaybills));

    }

    function renderTable(dataArray)
    {

        $('#data-list-table').DataTable().clear().draw();
        var tableResult_head = 
        "<table id='data-list-table' class='table table-bordered table-striped'>"+
                                "<thead>"+
                                    "<tr>"+
                                    "<th>Waybill</th>"+
                                    "<th>shipperName</th>"+
                                    "<th>Receiver</th>"+
                                    "<th>Parcel Type</th>"+
                                    "<th>Description</th>"+
                                    "<th>Transit At (UTC+8)</th>"+
                                    "<th>Transit Scan By</th>"+
                                    "<th>Pcs</th>"+
                                    "<th>Weight(Kgs)</th>"+
                                    "</tr>"+                         
                                "</thead>"+
                                "<tbody>"

        var result = "";


        for(i in dataArray)
        { 
            var tem = 
            "<tr class='odd gradeX'>"+
            "<td>"+dataArray[i].cnNo            +"</td>"+
            "<td>"+dataArray[i].shipperName     +"</td>"+
            "<td>"+dataArray[i].consigneeName   +"</td>"+
            "<td>"+dataArray[i].parcelType      +"</td>"+
            "<td>"+dataArray[i].description     +"</td>"+
            "<td>"+IOSDateToLocalDateString(dataArray[i].shippingCreatedAt)+"</td>"+
            "<td>"+dataArray[i].shippingCreatedBy+"</td>"+
            "<td>"+dataArray[i].pc              +"</td>"+
            "<td>"+dataArray[i].actualWeight    +"</td>"+
            "</tr>"
            result = result.concat(tem);   

        }
        var tableResult_tail ="</tbody>"+
                        "</table>"



        var finalResult = tableResult_head + result+tableResult_tail;
        document.getElementById("data-list-table-div").innerHTML = "";
        document.getElementById("data-list-table-div").innerHTML = finalResult;      
        addExportButton();
        reInitializeTable();

        $('#count-label').text(dataArray.length)
        $("#upload-info-box-content").hide();
        $("#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-danger").delay(3000).hide(0, function() {});
                    
    }

    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>