  <div id="loader" class="loader" style="display:none;"></div>


    <br>
    <!--
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-12">
            <h5>Data Kategori Area</h5>
          </div>
        </div>
      </div>
    </div>
    -->
    

    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="card card-info">
              <div class="card-header" style="background:#eb5d99;color:white;">
                <h3 class="card-title">Data Kelas&nbsp;&nbsp;</h3>
                

                <button type="button" class="tambahkelas btn btn-default btn-sm" style="margin-top:-1px;float:right;">
                  <i class="fas fa-plus-square"></i> &nbsp; Tambah
                </button>

                </form>

                


              </div>
              <!-- /.card-header -->
              <div class="card-body table-responsive p-0">
                <table class="table table-striped">
                  <thead>                  
                    <tr>
                      <th width="5%">No</th>
                      <th width="40%">Kelas</th>
                      <th width="15%">Nilai</th>
                      <th width="30%" style="text-align:right;">Pilihan</th>
                    </tr>
                  </thead>
                  <tbody>
                  <?php
                  $bilangan=1;
                  $q=mysqli_query($connect,"select * from tb_kelas order by id_kelas asc")or die(mysqli_error($connect));
                  while($r=mysqli_fetch_array($q)){
                  
                  
                  $qs=mysqli_query($connect,"select * from tb_siswa where id_kelas='".$r['id_kelas']."'");
                  $jums=mysqli_num_rows($qs);
                  ?>
                    
                    <tr>
                      
                      <td align="center"><?php echo $bilangan++;?></td>
                      <td>
                        <a href="index.php?prefix=datasiswa&kelas=<?php echo $r['id_kelas'];?>" style="color:black;">
                            <u><?php echo $r['nama_kelas'];?> <i>(<?php echo $jums;?> Peserta)</i></u>
                        </a>
                      </td>

                   


                      <td>
                        <a href="index.php?prefix=pengayaan&kelas=<?php echo $r['id_kelas'];?>" class='btn btn-info btn-sm' style="color:white;">
                            <i class="fas fa-chart-bar"></i> Lihat
                        </an>
                      </td>
                      
                      
                      
                      <td align="right">


                        <button data-id="<?php echo $r['id_kelas'];?>" class='editkelas btn btn-info btn-sm'>
                            <i class="fas fa-edit"></i>
                            Edit
                        </button>
                        
                        
                        <a href="index.php?prefix=umpanbalik&kelas=<?php echo $r['id_kelas'];?>" class='btn btn-success btn-sm' style="color:white;">
                            <i class="fas fa-comment"></i> Umpan Balik
                        </a>


                        
                        <button data-id="<?php echo $r['id_kelas'];?>" class='hapuskelas btn btn-danger btn-sm'>
                            <i class="fas fa-trash"></i>
                            Hapus
                        </button>



                      </td>

                    </tr>

                    <?php }?>
                  </tbody>
                </table>


              </div>
            </div>
            <!-- /.card -->
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
      </div><!-- /.container-fluid -->
    </section>







        <div class="modal fade" id="tambahkelas" role="dialog">
          <div class="modal-dialog">
           <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Tambah Kelas</h5>
              <button type="button" class="close" onclick="tutup()" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" id="modal-body-tambah">
       
            </div>
           </div>
          </div>
         </div>


         <div class="modal fade" id="editkelas" role="dialog">
          <div class="modal-dialog">
           <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Edit Kelas</h5>
              <button type="button" class="close" onclick="tutup()" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" id="modal-body-edit">
       
            </div>
           </div>
          </div>
         </div>


         <div class="modal fade" id="hapuskelas" role="dialog">
          <div class="modal-dialog">
           <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Hapus Kelas ?</h5>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" id="modal-body-hapus">
       
            </div>
           </div>
          </div>
         </div>





          <style>
          .loader {
          position: fixed;
          left: 0px;
          top: 0px;
          width: 100%;
          height: 100%;
          z-index: 9999;
          background: url('assets/img/loading.gif') 50% 50%   no-repeat;    
          }
          </style>

          <script src="assets/js/jquery.min.js"></script>
          <script src="assets/plugins/select2/js/select2.full.min.js"></script>
          <script type='text/javascript'>
                  function tutup(){
                      location.reload();
                  }
                  
                  $(document).ready(function(){
                      
                   
                      

                      // MODAL TAMBAH TEMA
                      $('.tambahkelas').click(function(){

                          $(".loader").show();

                          // AJAX request
                          $.ajax({
                              url: 'ajax/admin/kelas/tambah_kelas.php',
                              success: function(response){ 

                                  $('#modal-body-tambah').html(response); 
                                  $('#tambahkelas').modal('show'); 
                                  $(".loader").hide();
                              }
                          });
                      });


                      // MODAL EDIT TEMA
                      $('.editkelas').click(function(){

                          $(".loader").show();
                          var id = $(this).data('id');
                          // AJAX request
                          $.ajax({
                              url: 'ajax/admin/kelas/edit_kelas.php',
                              type: 'post',
                              data: {
                                  id: id
                              },
                              success: function(response){ 

                                  $('#modal-body-edit').html(response); 
                                  $('#editkelas').modal('show'); 
                                  $(".loader").hide();
                              }
                          });
                      });



                      // MODAL HAPUS TEMA
                      $('.hapuskelas').click(function(){

                          $(".loader").show();
                          var id = $(this).data('id');
                          // AJAX request
                          $.ajax({
                              url: 'ajax/admin/kelas/hapus_kelas.php',
                              type: 'post',
                              data: {
                                  id: id
                              },
                              success: function(response){ 

                                  $('#modal-body-hapus').html(response); 
                                  $('#hapuskelas').modal('show'); 
                                  $(".loader").hide();
                              }
                          });
                      });






                  });
          </script>



