
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
	
<!-- Bootstrap JS -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
 
<!-- My custom JavaScript -->
<script src="js/loaddata.js"></script>

<!-- My custom JavaScript code here -->
<script>
$(document).ready(function(){
$('#district').on('change', function(){
var districtID = $(this).val();
if(districtID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'district_id='+districtID,
success:function(html){
$('#tehsil').html(html);
$('#constituency').html('<option value="">Select Tehsil First</option>');
$('#union_concils').html('<option value="">Select Constituency First</option>');
$('#school_level').html('<option value="">Select Union Concil First</option>');
$('#school_cate').html('<option value="">Select School Level First</option>');
}
}); 
}else{
$('#tehsil').html('<option value="">Select District First</option>');
$('#constituency').html('<option value="">Select Tehsil First</option>');
$('#union_concils').html('<option value="">Select Constituency First</option>');
$('#school_level').html('<option value="">Select Union Concil First</option>');
$('#school_cate').html('<option value="">Select School Level First</option>');
}
});

$('#tehsil').on('change', function(){
var tehsilID = $(this).val();
if(tehsilID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'tehsil_id='+tehsilID,
success:function(html){
$('#constituency').html(html);
$('#union_concils').html('<option value="">Select Constituency First</option>');
$('#school_level').html('<option value="">Select Union Concil First</option>');
$('#school_cate').html('<option value="">Select School Level First</option>');
}
}); 
}else{
$('#constituency').html('<option value="">Select Tehsil First</option>');
$('#union_concils').html('<option value="">Select Constituency First</option>');
$('#school_level').html('<option value="">Select Union Concil First</option>');
$('#school_cate').html('<option value="">Select School Level First</option>');
}
});

$('#constituency').on('change', function(){
var consID = $(this).val();
if(consID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'cons_id='+consID,
success:function(html){
$('#union_concils').html(html);
}
}); 
}else{
$('#union_concils').html('<option value="">Select Constituency First</option>');
$('#school_level').html('<option value="">Select Union Concil First</option>');
$('#school_cate').html('<option value="">Select School Level First</option>');
}
});
	
$('#union_concils').on('change', function(){
var ucID = $(this).val();
if(ucID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'uc_id='+ucID,
success:function(html){
$('#school_level').html(html);
}
}); 
}else{
$('#union_concils').html('<option value="">Select Constituency First</option>');
$('#school_level').html('<option value="">Select Union Concil First</option>');
$('#school_cate').html('<option value="">Select School Level First</option>');
}
});
	
$('#school_level').on('change', function(){
var levelID = $(this).val();
if(levelID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'level_id='+levelID,
success:function(html){
$('#school_cate').html(html);
}
}); 
}else{
$('#union_concils').html('<option value="">Select Constituency First</option>');
$('#school_level').html('<option value="">Select Union Concil First</option>');
$('#school_cate').html('<option value="">Select School Level First</option>');
}
});
	
});
</script>
        <?php
        // Include the database config file 
        include_once 'connect.php';
	  	// Check connection
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            }
        // Fetch all the district data 
        $query = "SELECT * FROM districts WHERE status = 1 ORDER BY district_name ASC";
        $result = $conn->query( $query );
	  // Close the database connection
        $conn->close();
        ?>
	  
      <!--	  <div class="column">-->  
	  <div class="filter-wrapper">
      <div class="row" style="justify-content: center"> 
		  
		  <!-- district dropdown -->
        <div class="col-md-2 pr-0">
          <select name="districts_dropdown" id="district" required="required" class="districts form-control" size="auto" onchange="loadData()">
            <option value="" selected>All Districts</option>
            <?php
            if ( $result->num_rows > 0 ) {
              while ( $row = $result->fetch_assoc() ) {
                echo '<option value="' . $row[ 'district_id' ] . '">' . $row[ 'district_name' ] . '</option>';
              }
            } else {
              echo '<option value="">District Not Available</option>';
            }
            ?>
          </select>
        </div>
        
        <!-- tehsil dropdown -->
        <div class="col-md-2 pr-0">
          <select class="tehsils form-control" id="tehsil" required="required" name="tehsil_dropdown" size="auto" onchange="loadData()">
            <option value="">Select District First</option>
          </select>
        </div>
        
        <!-- Constituency dropdown -->
        <div class="col-md-2 pr-0">
          <select class="constituency form-control" id="constituency" name="constituency_dropdown" size="auto" onchange="loadData()">
            <option value="">Select Tehsil First</option>
          </select>
        </div>
		  
		  <!-- Union_Concil dropdown --> 
		<div class="col-md-2 pr-0">
          <select class="union_concils form-control" id="union_concils" name="union_concils_dropdown" size="auto" onchange="loadData()">
            <option value="">Select Constituency First</option>
          </select>
        </div>
		 
		<!-- School_Level dropdown -->  
        <div class="col-md-2 pr-0">
          <select class="school_level form-control" id="school_level" name="school_level" size="auto" onchange="loadData()">
            <option value="">All School's Level</option>
          </select>
        </div>  
		  
	    <!-- School_Type dropdown -->  
        <div class="col-md-2 pr-0">
          <select class="school_cate form-control" id="school_cate" name="school_cate" size="auto" onchange="loadData()">
            <option value="">All School's Category</option>
          </select>
        </div>
		  </div>
<!--	  &nbsp;&nbsp;&nbsp;&nbsp;-->
		
		  <br>
		  
      <div align="center" class="align-content-md-around">
        <!-- Add an error message element -->
<div id="error-message" class="alert alert-danger" style="display: none;">
  Please select items from all dropdown lists.
</div>

<!-- Add an onclick event to the search button to trigger the validation -->

<!--<button type="button" id="searchButton" onclick="searchData()">Search</button>-->
<button type="button" onclick="validateSearch()" class="btn btn-success block_ui">Search</button>

<script>
function validateSearch() {
  var district = document.getElementById('district').value;
  var tehsil = document.getElementById('tehsil').value;
  var constituency = document.getElementById('constituency').value;
  var union_concils = document.getElementById('union_concils').value;
  var school_level = document.getElementById('school_level').value;
  var school_cate = document.getElementById('school_cate').value;
  
  if (district === '' || tehsil === '' || constituency === '' || union_concils === '' || school_level === '' || school_cate === '') {
    // Show the error message
    document.getElementById('error-message').style.display = 'block';
  } else {
    // Hide the error message and proceed with search
    document.getElementById('error-message').style.display = 'none';
    // Call your searchData() function here
    searchData();
  }
}
</script>
	    