<?php 
$lr = mysqli_query($conn, "SELECT DISTINCT `lr_no` AS lr_no FROM `tracking` ORDER BY lr_no");
$lr_data = array();
while ($lr_row = mysqli_fetch_assoc($lr)) {
  $lr_data[] = $lr_row['lr_no'];
}
?>
<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">TRACKING REPORT</h3>
      </div>
  </div>
</section>
<hr class="bottom35"> 
<section class="content-header bottom35-report bottom40">
    <div class="row">
      <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('01-04-Y'))?>" />
            </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('d-m-Y'))?>" />
            </div>
          </div>
        </div> -->
        <div class="col-lg-2">
          <div class="form-group">
              <label class="capital">LR</label>
              <div class="form-group">
                <select class="form-control select2" style="width: 100%;" name="lr_no" id="lr_no">
                  <option value>ALL</option>
                  <?php foreach ($lr_data as $key => $lr_datas) { ?>
                  <option value="<?php echo $lr_datas?>"><?php echo $lr_datas?></option>
                  <?php } ?>
                </select>
              </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">GET DATA</button>
          </div>
        </div>
      </div>
    </div><br/>
    <div class="row">
      <div class="col-md-12">
          <div class="col-md-12">
              <div class="box box-info">
                  <div class="box-body table-responsive">
                      <table id="list_data" class="table table-bordered table-striped list_data">
                          <thead>
                            <tr>
                              <th class="text-center" width="5%">LR NO.</th>
                              <th class="text-center" width="5%">DATE</th>
                              <th class="text-center" width="7%">TRUCK NO</th>
                              <th class="text-center" width="20%">CONSIGNOR</th>
                              <th class="text-center" width="20%">CONSIGNEE</th>
                              <th class="text-center" width="5%">TIME</th>
                              <th class="text-center" width="10%">FROM</th>
                              <th class="text-center" width="10%">TO</th>
                              <th class="text-center" width="10%">LOCATION</th>
                              <th class="text-center" width="10%">Status</th>
                              
                            </tr>
                          </thead>
                          <tbody>
                              <tr>
                                  <td colspan="10" class="text-center">No Data found to show !!</td>
                              </tr>
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>
      </div>
    </div>
</section>

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#lr_no').select2();
    jQuery(document).on('click', '#btn-genrate', function(e){
      getData();
    });
  });
  
  function getData() {
    var url = "report/tracking_report_data.php?>" + '&start_date=' + jQuery('#start_date').val() + '&end_date=' + jQuery('#end_date').val() + '&lr_no=' + jQuery('#lr_no').val();
    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);
          } else {
            jQuery('.send_mail').attr('disabled', true);
            jQuery('#list_data tbody').html('<tr><td colspan="12" class="text-center">No Data found to show !!</td></tr>');
            jQuery('.total-records').html(0);
          }
        }
      }
    });
  }
</script>