<style type="text/css">
   .text-right{
   text-align: right !important;
   }
   .text-left{
   text-align: left !important;
   }
   .hitz-report {
   background: #fff !important;
   padding: 6px 0px 9px 0 !important;
   }
</style>
<section class="content-header">
   <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 bottom20">
         <h3 class="capital font15 padding5 bold">PENDING LR FOR LHC</h3>
      </div>
   </div>
</section>
<hr class="bottom35">
<section class="content-header bottom35-report bottom40">
   <div class="row">
      <form>
         <div class="col-md-12 hitz-report">
            <div class="col-lg-2">
               <div class="form-group">
                  <label class="capital">START DATE</label>
                  <div class="input-group date">
                     <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                     </div>
                     <input type="text" size="35" id="start_date" name="start_date" class="form-control date-picker start_date" placeholder="DATE" autocomplete="off" value="<?php echo risFormatDate(date())?>" />
                  </div>
               </div>
            </div>
            <div class="col-lg-2">
               <div class="form-group">
                  <label class="capital">END DATE</label>
                  <div class="input-group date">
                     <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                     </div>
                     <input type="text" size="35" id="end_date" name="end_date" class="form-control date-picker end_date" placeholder="DATE" autocomplete="off" value="<?php echo risFormatDate(date())?>" />
                  </div>
               </div>
            </div>
            
            <div class="col-md-1" style="position: relative;top: 10px;">
               <div class="form-group">
                  <button type="button" class="btn btn-primary" id="btn-genrate"><i class="fa fa-floppy-o" aria-hidden="true"></i></button>
                  
               </div>
            </div>
         </div>
      </form>
   </div>
   <br/>
   <div class="row">
      <div class="col-md-12">
         <div class="col-md-12">
            <div class="box box-success">
               <div class="box-body">
                  <div class="nav-tabs-custom">
                     <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">MASTER</a></li>
                        <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">TRANSACTION</a></li>
                        
                     </ul>
                     <div class="tab-content">
                        <div class="tab-pane active" id="tab_1">
                          <table id="list_data" class="table table-bordered table-striped list_data">
                            <thead>
                              <tr>
                                <th class="text-center mr-report-vertical" width="150" rowspan="2">U NAME</th>
                                <th class="text-center" width="50" colspan="2">VENDOR</th>
                                <th class="text-center" width="50" colspan="2">ACC.GROUP</th>
                                <th class="text-center" width="50" colspan="2">ACCONT</th>
                                <th class="text-center" width="50" colspan="2">TRUCK</th>
                                <th class="text-center" width="50" colspan="2">DRIVER</th>
                                <th class="text-center" width="50" colspan="2">COMPANY</th>
                                <th class="text-center" width="50" colspan="2">BRANCH</th>
                                <th class="text-center" width="50" colspan="2">DOCUMENT</th>
                                <th class="text-center" width="50" colspan="2">EMPLOYEE</th>
                              </tr>
                              <tr>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td colspan="19" class="text-center">No Data found to show !!</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane" id="tab_2">
                          <table id="list_datas" class="table table-bordered table-striped list_datas">
                            <thead>
                              <tr>
                                <th class="text-center mr-report-vertical" width="150" rowspan="2">U NAME</th>
                                <th class="text-center" width="50" colspan="2">LR</th>
                                <th class="text-center" width="50" colspan="2">LHC</th>
                                <th class="text-center" width="50" colspan="2">BILL</th>
                                <th class="text-center" width="50" colspan="2">MR</th>
                                <th class="text-center" width="50" colspan="2">CONTRACT</th>
                                <th class="text-center" width="150" colspan="2">BAL. ADVICE</th>
                                <th class="text-center" width="50" colspan="2">BANK RECEIPT</th>
                                <th class="text-center" width="50" colspan="2">BANK PAYMENT</th>
                                <th class="text-center" width="50" colspan="2">CASH RECEIPT</th>
                                <th class="text-center" width="50" colspan="2">CASH PAYMENT</th>
                                <th class="text-center" width="50" colspan="2">JV</th>
                                <th class="text-center" width="50" colspan="2">TRACKING</th>
                              </tr>
                              <tr>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                                <th class="text-center" width="50">C</th>
                                <th class="text-center" width="50">U</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td colspan="12" class="text-center">No Data found to show !!</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        
                     </div>
                     <!-- /.tab-content -->
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<script type="text/javascript">
   jQuery(document).ready(function() {
     $('#vendor_id').select2();
     $('#truck_no').select2();
     $('#broker').select2();
     jQuery(document).on('click', '#btn-genrate', function(e){
       getData();
       getDatas();
     });
   });
   
   function getData() {
     var url = "report/01_data.php?>" + '&start_date=' + jQuery('#start_date').val() + '&end_date=' + jQuery('#end_date').val() + '&vendor_id=' + jQuery('#vendor_id').val() + '&truck_no=' + jQuery('#truck_no').val() + '&broker=' + jQuery('#broker').val();
     //jQuery('#list_data .start_date').html(jQuery('#start_date').text());
     //jQuery('#list_data .end_date').html(jQuery('#end_date').text());
     jQuery.ajax({
       type        : 'GET',
       url         :  url,
       dataType    : 'JSON',
       beforeSend:function(){
         jQuery('#list_data tbody').html('<tr><td colspan="12" class="text-center"><i class="fa fa-2x fa-spin fa-spinner"></i> Loading Data....</td></tr>');
       },
       success: function(data) {
         if(data.status == 'success') {
           if(data.tbody != '') {
             jQuery('#list_data tbody').html(data.tbody);
             jQuery('.total-records').html(data.total_count);  
             jQuery('.min_data').html(data.min_data);  
             jQuery('.max_data').html(data.max_data);
             jQuery('.average').html(data.average);
           } else {
             jQuery('#list_data tbody').html('<tr><td colspan="12" class="text-center">No Data found to show !!</td></tr>');
             jQuery('.total-records').html(0);
           }
         }
       }
     });
   }

   function getDatas() {
     var url = "report/02_data.php?>" + '&start_date=' + jQuery('#start_date').val() + '&end_date=' + jQuery('#end_date').val() + '&vendor_id=' + jQuery('#vendor_id').val() + '&truck_no=' + jQuery('#truck_no').val() + '&broker=' + jQuery('#broker').val();
     //jQuery('#list_data .start_date').html(jQuery('#start_date').text());
     //jQuery('#list_data .end_date').html(jQuery('#end_date').text());
     jQuery.ajax({
       type        : 'GET',
       url         :  url,
       dataType    : 'JSON',
       beforeSend:function(){
         jQuery('#list_datas tbody').html('<tr><td colspan="25" class="text-center"><i class="fa fa-2x fa-spin fa-spinner"></i> Loading Data....</td></tr>');
       },
       success: function(data) {
         if(data.status == 'success') {
           if(data.tbody != '') {
             jQuery('#list_datas tbody').html(data.tbody);
             jQuery('.total-records').html(data.total_count);  
             jQuery('.min_data').html(data.min_data);  
             jQuery('.max_data').html(data.max_data);
             jQuery('.average').html(data.average);
           } else {
             jQuery('#list_datas tbody').html('<tr><td colspan="25" class="text-center">No Data found to show !!</td></tr>');
             jQuery('.total-records').html(0);
           }
         }
       }
     });
   }
</script>