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

    <br>
  

    <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 Modul&nbsp;&nbsp;</h3>
                

                <button type="button" class="tambah 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 p-0">
                <table class="table table-striped">
                  <thead>                  
                    <tr>
                      <th width="5%">No</th>
                      <th width="40%">Judul Unit</th>
                      
                      <!--
                      <th width="5%">Materi</th>
                      <th width="5%">Artikel</th>
                      <th width="5%">Video</th>
                      <th width="9%">Uji Konsep</th>
                      -->
                      
                      <th width="15%" style="text-align:right;">Pilihan</th>
                    </tr>
                  </thead>
                  <tbody>
                  <?php
                  $bilangan=1;
                  $q=mysqli_query($connect,"select * from tb_unit order by id_unit asc")or die(mysqli_error($connect));
                  while($r=mysqli_fetch_array($q)){

                  ?>
                    
                    <tr>
                      
                      <td align="center"><?php echo $bilangan++;?></td>
                      <td>
                        <?php echo $r['judul_unit'];?>
                        &nbsp;&nbsp;
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-info">Sunting Modul</button>
                            <button type="button" class="btn btn-sm btn-info dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
                            <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu" role="menu">
                                <a class="dropdown-item" href="index.php?prefix=materi&unit=<?php echo $r['id_unit'];?>">Edit Materi</a>
                                <a class="dropdown-item" href="index.php?prefix=artikel&unit=<?php echo $r['id_unit'];?>">Edit Artikel</a>
                                <a class="dropdown-item" href="index.php?prefix=video&unit=<?php echo $r['id_unit'];?>">Edit Video</a>
                                <a class="dropdown-item" href="index.php?prefix=pretest&unit=<?php echo $r['id_unit'];?>">Edit Soal Pre Test</a>
                                <a class="dropdown-item" href="index.php?prefix=ujikonsep&unit=<?php echo $r['id_unit'];?>">Edit Soal Post Test</a>
                            </div>
                        </div>  
                      </td>


                      <!--
                      <td>
                        <a href="index.php?prefix=materi&unit=<?php echo $r['id_unit'];?>" class='btn-info btn-sm' style="color:white;">
                            <i class="fas fa-search"></i>
                        </a>
                      </td>

                      
                      <td>
                        <a href="index.php?prefix=artikel&unit=<?php echo $r['id_unit'];?>" class='btn-info btn-sm' style="color:white;">
                            <i class="fas fa-search"></i>
                        </a>
                      </td>

                    
                      <td>
                        <a href="index.php?prefix=video&unit=<?php echo $r['id_unit'];?>" class='btn-info btn-sm' style="color:white;">
                            <i class="fas fa-search"></i>
                        </a>
                      </td>
                      -->

                     
                      
                      <td align="right">
                          
                          
                        
                          
                          


                        <button data-id="<?php echo $r['id_unit'];?>" class='edit btn btn-info btn-sm'>
                            <i class="fas fa-edit"></i>
                        </button>


                        <button data-id="<?php echo $r['id_unit'];?>" class='editbanner btn btn-success btn-sm'>
                            <i class="fas fa-image"></i>
                        </button>


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



                      </td>

                    </tr>

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


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







        <div class="modal fade" id="tambah" role="dialog">
          <div class="modal-dialog">
           <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Tambah Unit</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="edit" role="dialog">
          <div class="modal-dialog">
           <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Edit Unit</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="editbanner" role="dialog">
          <div class="modal-dialog modal-xs">
           <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Edit Banner</h5>
              <button type="button" class="close" onclick="tutup()" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" id="modal-body-edit-banner">
       
            </div>
           </div>
          </div>
         </div>


         <div class="modal fade" id="hapus" role="dialog">
          <div class="modal-dialog">
           <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Hapus Unit ?</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
                      $('.tambah').click(function(){

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

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

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


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

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

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



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

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

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



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

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

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






                  });
          </script>



