<style>
.user-dashboard{margin-top:20px !important; margin-bottom:20px !important; }  
.sch-no{width:40%;float:left;}
.mob-no{width:40%;float:left;}
#student_class{width:60%;float:left;}
.search-div{ width:50%;  float:left;padding:20px;box-shadow:0 0 1px #263571;margin-top:10px;}
.search_class{color:#fff;float:left;}
.search_by_sch_no :hover{color:#fff;}


/*.search{  border-radius:0px;color:#fff;}*/
/*input[type="number"]{border-top:1px solid;border-bottom:1px solid;height:35px;border-left:1px solid;}*/

@media only screen and (max-width:767px){

.search-div{ width:100%;}    
.sch-no{width:100%;float:left;}
.mob-no{width:100%;float:left;}



/*.search-div{ width:100%; height:35px; float:left;padding:20px;}    */

/*.sch-no{padding:5px;width:40%;border:none;}*/

/*.mob-no{padding:5px;width:40%;border:none;}*/

/*.search_class{width:15%; background:#468847;height:35px; border-radius:0px;color:#fff;margin:0px!important;}*/

/*.search{width:15%;height:35px; border-radius:0px;color:#fff;}*/
#mytable_length{background:#263571 !important;color:#fff !important;
/*height:40px !important;*/
text-align:left;}
}
#mytable_wrapper{border:1px solid;  }
#mytable_length{background-color:#263571;color:#fff;padding:13px;}
#mytable_paginate{
color:#fff !important;padding:10px;    
/*height:50px;*/
}

#mytable_paginate span .paginate_button{color:#fff;}

#mytable_filter{background-color:#263571;color:#fff;padding:10px;}
.profile-button{background:#86B20C; color:#fff;padding:10px;font-weight:600;border-radius:5px;cursor:pointer;text-decoration:none!important;}
.fee-button{background:#86B20C; color:#fff;padding:10px;font-weight:600;border-radius:5px;cursor:pointer;text-decoration:none!important; margin-left:10px !important;}
</style>
<div class="container user-dashboard">
<div class="row">
<div class="col-sm-12">
<div class="">
<!--<h2>Koyla Nagar Fee Collection</h2>-->
<ul class="breadcrumb">
  <li><a href="<?php echo base_url();?>StudentFee/dashboard">Home</a></li>
  <li><a href="<?php echo base_url();?>StudentFee/fee_structure">Fee Structure</a></li>
</ul>     



<p class="search-div">
<input type="number" placeholder="Scholar Number" class="form-control sch-no" id="sch_no">
<input type="number" placeholder="Mobile Number" class="form-control mob-no" id="mob_no">
<button class="search btn btn-primary">Search</button></p>
<p class="search-div">
<select id="student_class" class="form-control">
<option value="" >Select Class</option>
<?php $table="school_fee_structure";
$fetch_fee_structure = $this->FeeModel->fetch_fee_structure($table);
if($fetch_fee_structure){
$count = 1;
foreach($fetch_fee_structure as $records){?>
<option value="<?php echo $records['class'];?>">Class : <?php echo $records['class'];?></option>
<?php } }?>   	
</select><button class="search_class btn btn-primary">Search</button></p>

<div class="table-responsive search-result" style="width:100%;">

        
</div>
</div>    
</div>    
</div>    
</div>

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
<script>
$(document).ready(function(){
 
var sch_no="";
var mob_no="";
$(document).on("click",".search",function(){
var sch_no = $(".sch-no").val();
var mob_no = $(".mob-no").val();
// alert(sch_no);
// alert(mob_no);
var table ='student';

$.ajax({
url: '<?php echo base_url(); ?>StudentFee/get_student',
type: 'POST',
data: { sch_no:sch_no, mob_no:mob_no,table:table},
success: function(data){
// alert(data);
$('.search-result').html(data);
}
});

});


$(document).on("click",".search_class",function(){
var student_class = $("#student_class").val();
//  alert(student_class);
var table ='student';

$.ajax({
url: '<?php echo base_url(); ?>StudentFee/get_student_by_class',
type: 'POST',
data: { student_class:student_class,table:table},
success: function(data){
// alert(data);
$('.search-result').html(data);
}
});

});


});
</script>