<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">LR QUERY</h3>
      </div>
  </div>
</section>
<hr class="bottom35"> 
<section class="content-header bottom35-report bottom40">
    <div class="row">
      <div class="col-md-3 hitz-report">
        <div class="col-lg-12">
          <div class="form-group">
              <label class="capital">LR NO</label>
              <div class="input-group">
                <input type="text" size="35" id="lr_no" name="lr_no" class="form-control" placeholder="LR NO" autocomplete="off"/>
              </div>
          </div>
        </div>
        <div class="col-lg-12">
          <div class="form-group">
              <label class="capital">LHC NO</label>
              <div class="input-group">
                <input type="text" size="35" id="lhc_no" name="lhc_no" class="form-control " placeholder="LHC NO" autocomplete="off"/>
              </div>
          </div>
        </div>
        <div class="col-lg-12">
          <div class="form-group">
              <label class="capital">BILL NO</label>
              <div class="input-group">
                <input type="text" size="35" id="bill_no" name="bill_no" class="form-control" placeholder="BILL NO" autocomplete="off"/>
              </div>
          </div>
        </div>
        <div class="col-lg-12">
          <div class="form-group">
              <label class="capital">MR NO</label>
              <div class="input-group">
                <input type="text" size="35" id="mr_no" name="mr_no" class="form-control" placeholder="MR NO" autocomplete="off"/>
              </div>
          </div>
        </div>
        <div class="col-lg-12">
          <div class="form-group">
            <button type="button" class="btn btn-primary" id="btn-genrate">GENERATE REPORT</button>
            <button type='submit' class="btn btn-primary" id="btnExport"><i class="fa fa-file-excel-o" aria-hidden="true"></i></button>
            
          </div>
        </div>
        </div>
        <div class="col-md-9">
          <div class="box box-info">
            <div class="box-body table-responsive">
              <table id="list_data" class="table table-bordered table-striped list_data">
                <tbody>
                    <tr>
                      <td colspan="8" class="text-center">No Data found to show !!</td>
                    </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
    </div>
</section>

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery(document).on('click', '#btn-genrate', function(e){
      getData();
    });
    jQuery(document).on('click', '#btnExport', function(e){
      ExportExcel();
    });
  });
  
  function ExportExcel(){
    $("#list_data").table2excel({
      filename: "LR QUERY.xls"
    });
  }

  function getData() {
    var url = "report/lr_query_data.php?>" + '&lr_no=' + jQuery('#lr_no').val() + '&lhc_no=' + jQuery('#lhc_no').val() + '&bill_no=' + jQuery('#bill_no').val() + '&mr_no=' + jQuery('#mr_no').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="8" 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="8" class="text-center">No Data found to show !!</td></tr>');
            jQuery('.total-records').html(0);
          }
        }
      }
    });
  }
</script>