
<?php

include('database_connection.php');

$slab_nature_lab = '';
$query = "SELECT DISTINCT slab_nature_lab FROM tbl_slab ORDER BY slab_City ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
 $slab_nature_lab .= '<option value="'.$row['slab_nature_lab'].'">'.$row['slab_nature_lab'].'</option>';
}

$slab_scope = '';
$query = "SELECT DISTINCT slab_scope FROM tbl_slab ORDER BY slab_City ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
 $slab_scope .= '<option value="'.$row['slab_scope'].'">'.$row['slab_scope'].'</option>';
}

?>

<html>
 <head>
  <title>Iamps</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
 </head>
 <body>
 <div class="heading" style="background-color:#232F3E">
		<img src="https://iampshz.com/static/images/iampshz/logo-white.png" style="padding-left:4%">
		<div style="font-size:30px;font-weight:bold;color:white;padding-left:4%"> KARNATAKA LABS LIST : EMC Testing Company Directory<br><a href="https://iampshz.com/" style="color:white" >Home</a>
	 </div>
	</div>
  <div class="container box">
   <br />
   <div class="row">
    <div class="col-md-4">
     
     <div class="form-group">
	 Nature of Lab
      <select name="slab_nature_lab" id="slab_nature_lab" class="form-control" required>
       <option value="">Select Nature Of Lab</option>
       <?php echo $slab_nature_lab; ?>
      </select>
     </div>
	</div>
    <div class="col-md-4">
	 <div class="form-group">
	 Scope
      <select name="slab_scope" id="slab_scope" class="form-control" required>
       <option value="">Select Scope</option>
		<?php echo $slab_scope; ?>
      </select>
     </div>
    </div>
    <div class="col-md-4">
	<br>
     <div class="form-group" align="left">
      <button type="button" name="filter" id="filter" class="btn btn-info">Filter</button>
	  <button onClick="window.location.reload();" class="btn btn-info">Reset</button>

     </div>
	
	</div>
   </div>
   <div class="table-responsive">
    <table id="customer_data" class="table table-bordered table-striped">
     <thead>
      <tr>
       <th width="40%">NAME</th>
       <th width="10%">NUMBER</th>
       <th width="15%">CITY</th>
       <th width="15%">EMAIL ID</th>
       <th width="25%">NATURE OF LAB</th>
       <th width="15%">SCOPE</th>
       <th width="15%">ID</th>
      </tr>
     </thead>
    </table>
    <br />
    <br />
    <br />
   </div>
  </div>
 </body>
</html>

<script type="text/javascript" language="javascript" >
 $(document).ready(function(){
  
  fill_datatable();
  
  function fill_datatable(slab_nature_lab = '', slab_scope = '')
  {
   var dataTable = $('#customer_data').DataTable({
    "processing" : true,
    "serverSide" : true,
    "order" : [],
    "searching" : false,
    "ajax" : {
     url:"fetch.php",
     type:"POST",
     data:{
      slab_nature_lab:slab_nature_lab, slab_scope:slab_scope
     }
    }
   });
  }
  
  $('#filter').click(function(){
   var slab_nature_lab = $('#slab_nature_lab').val();
   var slab_scope = $('#slab_scope').val();
   if(slab_nature_lab != '' && slab_scope != '')
   {
    $('#customer_data').DataTable().destroy();
    fill_datatable(slab_nature_lab, slab_scope);
   }
   else
   {
    alert('Select Both filter option');
    $('#customer_data').DataTable().destroy();
    fill_datatable();
   }
  });
  
  
 });
 
</script>
