  <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 Media&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 table-responsive p-0">
                <table class="table table-striped">
                  <thead>                  
                    <tr>
                      <th width="5%">No</th>
                      <th width="10%">Media</th>
                      <th width="40%">URL Media</th>
                      <th width="10%" style="text-align:right;">Pilihan</th>
                    </tr>
                  </thead>
                  <tbody>
                  <?php
                  $bilangan=1;
                  $q=mysqli_query($connect,"select * from tb_media order by id_media desc")or die(mysqli_error($connect));
                  while($r=mysqli_fetch_array($q)){

                  ?>
                    
                    <tr>
                      
                      <td align="center"><?php echo $bilangan++;?></td>
                      <td>
                        <img src="../assets/gambar/<?php echo $r['file'];?>" width="100%"><br>
                        <b><?php echo $r['caption'];?></b>
                      </td>
              
                      <td>
                        <!--<textarea class="form-control" style="width:100%;height:150px;"><p align="<?php echo $r['align'];?>"><img src="<?php echo $base_url;?>/assets/gambar/<?php echo $r['file'];?>" width="<?php echo $r['ukuran'];?>%"><br><b><?php echo $r['caption'];?></b></p></textarea>
                        -->
                        <input type="text" class="form-control" value="<?php echo $base_url;?>/assets/gambar/<?php echo $r['file'];?>">
                      </td>
                      
                      <td align="right">


                     
                        
                        <button data-id="<?php echo $r['id_media'];?>" 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 Media</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 Media</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="hapus" role="dialog">
          <div class="modal-dialog">
           <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Hapus Media ?</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/media/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/media/edit.php',
                              type: 'post',
                              data: {
                                  id: id
                              },
                              success: function(response){ 

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



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

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

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






                  });
          </script>



