@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>
   <div class="row">
   @include('alert.alert_panel')
   <div class="col-md-3">
      <!-- Profile Image -->
      <div class="box box-primary">
         <a href="{{ url('/jobs/jobs_add') }}" class="btn btn-default btn-sm"><i class="fa fa-reply"></i></a>
         <div class="box-body box-profile">
            <img class="profile-user-img img-responsive img-circle" src="{{ asset('dist/img/user.ico') }}" alt="User profile picture">
            <p class="text-muted text-center">
               <select class="profile-username text-center form-control select2" id="select-driver" name="select_driver" style="width: 70%;">
                  <option value="">Select Driver</option>
                  @foreach($drivers_list as $driver)
                  @if($driver->id === old('select-driver',$driver ? $driver->id : null))
                  <option value="{{ $driver->uid }}" selected="selected">{{ $driver->uid }} - {{ $driver->name }}</option>
                  @else
                  <option value="{{ $driver->uid }}" >{{ $driver->uid }} - {{ $driver->name }}</option>
                  @endif
                  @endforeach
               </select>
            </p>
            <P ALIGN=CENTER>
               <input type="date"  class="form-control input-sm" align="center" id="input-date-from" placeholder="" min="1900-01-01" style="width: 70%;">
            </P>
            <ul class="list-group list-group-unbordered">
               <li class="list-group-item">
                  <b>Total Assingned CN</b><a class="pull-right" id="total-cn">0</a>
               </li>
               <li class="list-group-item">
                  <b>POD CN</b><a class="pull-right" id="total-pod-cn">0</a>
               </li>
               <li class="list-group-item">
                  <b>Deliver Failed</b> <a class="pull-right" id="total-failed-cn">0</a>
               </li>
            </ul>
            <a href="#" class="btn btn-primary btn-block" onClick="searchJobs()"><b>Search</b></a>
         </div>
         <!-- /.box-body -->
      </div>
      <!-- /.box -->
   </div>
   <div class="col-md-9">
      <div class="box box-info">
         <div class="box-header with-border">
            <h3 class="box-title">Driver Jobs</h3>
            <div class="box-tools">
               <div style="width: 130px;">
                  <button type="button" class="btn btn-success pull-right" id="count-label">0</button>    
                  <a class="btn btn-info" id="job-print" ><i class="fa fa-print"></i>Print</a>
               </div>
            </div>
         </div>
         <!-- /.box-header -->
         <!-- form start -->
         <table class="table table-hover" id="jobs-table" name = "jobs_table">
            <thead>
               <tr>
                  <th style="width: 20px">#</th>
                  <th>Jobs ID</th>
                  <th>CN</th>
                  <th>Deliver Info</th>
                  <th>Date</th>
                  <th></th>
                  <th>Status</th>
               </tr>
            </thead>
            <tbody>
            </tbody>
         </table>
      </div>
   </div>
</section>
@include('common.footer')
<script>

var allJobs = [];

   $( document ).ready(function() {
       document.getElementById('input-date-from').valueAsDate = new Date();
   
   });
   
   
     $( "input[type=radio]" ).on( "click",function()
       {
           var value = $(this).val();
           $("#jobs-table tbody tr").filter(function() {
           $(this).toggle($(this).text().indexOf(value) > -1)
           });
       });
   
   
   $('.select2').select2();
   
       $('#scan-waybill').keydown(function (e){
       if(e.keyCode == 13){
           //alert('you pressed enter ^_^');
           get_waybill($('#scan-waybill').val());
           $('#scan-waybill').val("");
           $( "#scan-waybill" ).focus();
           $('#count-label').text($('#jobs-table tr').size()-1)
       }
   })
   
   
   
   $( "#job-print" ).click(function() {
        generate_runsheet();
   });
   
   async function searchJobs()
   {
      $("#load-overlay").show();
      allJobs = [];

      from_date = new Date($("#input-date-from").val());
        from_date.setHours(from_date.getHours()+ThistimeZone);
        from_date = from_date.toISOString()


        to_date = new Date($("#input-date-from").val());
        to_date.setHours(to_date.getHours()+(24+ThistimeZone));
        to_date = to_date.toISOString()

        const jobSearchDataBody = {
                                       "from"  : from_date,
                                       "to"    : to_date,
                                       "assignee_uid"    : $('#select-driver').val()
                                       }
        var apiEndPoint = courierApiMatrix+"/api/v2/courier/job/get?page=1" ; 
        while(1)
                        {
                           const searchResult = await syncAjaxCall(jobSearchDataBody,apiEndPoint,"POST",matrixBearerToken);
                                 allJobs      = allJobs.concat(searchResult.data)
                           //If response next page is valid continue calling the API 
                           if(searchResult.next_page_url != null)
                           {
                                 apiEndPoint = searchResult.next_page_url;
                           }else{
                                 break;
                           }
                        }
       renderJobsDetails(allJobs)
       $("#load-overlay").hide();
   }
   

   async function generate_runsheet()
   {
     $("#load-overlay").show();
       // GET ALL DATA IN receive-table 
   
         var TableDataJobsID = new Array();
         $('#jobs-table tr:visible').each(function(row, tr){
            TableDataJobsID.push($(tr).find('td:eq(1)').text());
         }); 
         TableDataJobsID.shift();  // first row is the table header - so remove



         var postData =  {
                           _token          : "{{ csrf_token() }}",
                           job_assignee_uid: $('#select-driver').val(),
                           job_date        : $("#input-date-from").val(),
                           jobs_filter     : TableDataJobsID,
                           jobs            : allJobs
                         }
          const responsedata = await syncAjaxCall(postData,"{{ URL::to('/jobs/jobs_search/job_print') }}","POST","");
                  $("#load-overlay").hide();  
                   var win = window.open();
                   win.document.write(responsedata);       

                
   }


   function renderJobsDetails(jobsData)
   {
      $("#jobs-table .runsheet-data").remove();
   
                              var totalCN = 0;
                              var totalPOD = 0 ;
                              var totalFailed = 0;
                               for(i in jobsData)
                               {
                                   totalCN ++;
                                   var status_label ;
                                      switch(jobsData[i].job_status)
                                      {
                                          case "out_for_deliver" :
                                          status_label = "<td><span class='label label-primary'>Out For Deliver</span></td>"
                                          break;
   
                                          case "proof_of_deliver":
                                          totalPOD ++
                                          status_label = "<td><span class='label label-success'>POD</span></td>"
                                          break;
   
                                          case "not_delivered":
                                          totalFailed ++
                                          status_label = "<td><span class='label label-danger'>Deliver Failed</span></td>"
                                          break;
   
                                      } 

                                      var deliverInfo = jobsData[i].consignee_name +"<br>"+
                                                        jobsData[i].consignee_address +"<br>"+
                                                        jobsData[i].consignee_postcode

                                                   $('#jobs-table').append("<tr class='item"+jobsData[i].job_id+" runsheet-data'>"+
                                                   "<td>"+totalCN+"</td>"+
                                                   "<td>"+jobsData[i].job_id+"</td>"+
                                                   "<td>"+jobsData[i].cn_no+"</td>"+
                                                   "<td>"+deliverInfo+"</td>"+
                                                   "<td>"+IOSDateToLocalDateString(jobsData[i].job_created_at)+"</td>"+
                                                   "<td style='display:none'>"+jobsData[i].job_status+"</td>"+
                                                   "<td>"+status_label+"</td>"+
                                                   "</tr>");
                                }
                                $('#total-cn').html(totalCN)
                                $('#total-pod-cn').html(totalPOD)
                                $('#total-failed-cn').html(totalFailed)
                                show_success("Search Completed")
                                $('#count-label').text($('#jobs-table tr').size()-1)
                                $('.dropdown-filter-dropdown').remove();
                                $('#jobs-table ').excelTableFilter();
   }
   
   
   
   
       function show_warning($msg)
       {
                       $("#invalid-warning-message").html($msg);
                       $("#invalid-warning").show();
                       $("#invalid-warning").delay(5000).hide(0, function() {});
       }
   
       function show_danger($msg)
       {
                       $("#invalid-danger-message").html($msg);
                       $("#invalid-danger").show();
                       $("#invalid-danger").delay(5000).hide(0, function() {});
       }
   
       function show_success($msg)
       {
                       $("#invalid-success-message").html($msg);
                       $("#invalid-success").show();
                       $("#invalid-success").delay(5000).hide(0, function() {});
       }
   
   
   
   
    
   
   
   
       
   
   
   
</script>