@section('konten')
 @extends('layout.main')
 @section('title', 'Daftar Kontent')
  <section class="content">
      <div class="container-fluid">
         <div class="card">
            <div class="row">
               <div class="col-12">
                  <div class="card-body">
                     <button class="btn btn-primary mb-3 rounded-pill" onclick="ModalShow(1)"><span style="font-weight: 700; font-size: 20px;">+</span> &nbsp;Add Data</button>
                     <table id="data" class="table table-hover table-bordered">
                        <thead>
                           <tr>
                              <th>No</th>
                              <th>Judul</th>
                              <th>Keterangan 1</th>
                              <th nowrap>Foto 1</th>
                              <th nowrap>Foto 2</th>
                              <th nowrap>Foto 3</th>
                              <th>Kategori</th>
                              <th width="10%">Action</th>
                           </tr>
                        </thead>
                        <tbody></tbody>
                        </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
   <div id="modalKontent" class="modal" tabindex="-1">
      <div class="modal-dialog modal-xl">
         <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title">Tambah Kontent</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
               <form id="formKontent">
                  <div class="row">
                     <div class="col-sm-6">
                        <div class="mb-2">
                       <label class="form-label">Judul</label>
                       <input type="text" class="form-control" id="judul" name="judul">
                   </div>
                   <div class="mb-2">
                          <label class="form-label">Keterangan 1</label>
                          <div class="form-floating">
                             <textarea class="form-control" id="ket1" name="keterangan1" style="height: 100px"></textarea>
                          </div>
                    </div>
                   <div class="mb-2">
                          <label class="form-label">Keterangan 2</label>
                          <div class="form-floating">
                             <textarea class="form-control" id="keterangan2" name="keterangan2" style="height: 100px"></textarea>
                          </div>
                    </div>
                    <div class="mb-2">
                          <label class="form-label">Keterangan 3</label>
                          <div class="form-floating">
                             <textarea class="form-control" id="keterangan3" name="keterangan3" style="height: 100px"></textarea>
                          </div>
                    </div>
                     </div>
                     <div class="col-sm-6">
                    <div class="mb-2">
                     <div class="form-group">
                     <label for="exampleInputFile">Foto 1</label>
                        <div class="input-group">
                        <div class="custom-file">
                        <input type="file" class="custom-file-input" id="file1" accept="image/jpeg">
                        <canvas id="kanvas1" style="display: none;"></canvas>
                        <textarea name="foto1" id="foto1" style="display: none;"></textarea>
                        <label class="custom-file-label" for="exampleInputFile">Cari Foto</label>
                        </div>
                     </div>
                     </div>
                     </div>
                     <div class="mb-2">
                       <div class="form-group">
                        <label for="exampleInputFile">Foto 2</label>
                           <div class="input-group">
                           <div class="custom-file">
                           <input type="file" class="custom-file-input" id="file2" accept="image/jpeg">
                           <canvas id="kanvas2" style="display: none;"></canvas>
                           <textarea name="foto2" id="foto2" style="display: none;"></textarea>
                           <label class="custom-file-label" for="exampleInputFile">Cari Foto</label>
                           </div>
                        </div>
                        </div>
                     </div>
                     <div class="mb-2">
                       <div class="form-group">
                        <label for="exampleInputFile">Foto 3</label>
                           <div class="input-group">
                           <div class="custom-file">
                           <input type="file" class="custom-file-input" id="file3" accept="image/jpeg">
                           <canvas id="kanvas3" style="display: none;"></canvas>
                           <textarea name="foto3" id="foto3" style="display: none;"></textarea>
                           <label class="custom-file-label" for="exampleInputFile">Cari Foto</label>
                           </div>
                        </div>
                        </div>
                     </div>
                     <div class="mb-2">
                       <div class="form-group">
                        <label class="form-label">Kategori Kontent</label>
                           <select class="form-control" id="kategori" name="kategori">
                              <option value="">--Pilih Kategori--</option>
                               <option value="1">Pengabdian</option>
                               <option value="2">UKM Mahasiswa</option>
                               <option value="3">Kegiatan Mahasiswa</option>
                              <option value="4">Lainnya</option>
                           </select>
                        </div>
                     </div>
                     </div>
                  </div>
               </form>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" onclick="valid(1)">Simpan Kontent</button>
            </div>
         </div>
      </div>
      </div>
   <div id="modalEdit" class="modal" tabindex="-1">
      <div class="modal-dialog modal-xl">
         <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title">Edith Kontent</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
               <form id="formEdit">
                  <div class="row">
                     <div class="col-sm-6">
                        <input type="text" id="id_" name="id" style="display: none;">
                  <div class="mb-2">
                       <label class="form-label">Judul</label>
                       <input type="text" class="form-control" id="judul2" name="judul">
                   </div>
                   <div class="mb-2">
                          <label class="form-label">Keterangan 1</label>
                          <div class="form-floating">
                             <textarea class="form-control" id="ket12" name="keterangan1" style="height: 100px"></textarea>
                          </div>
                    </div>
                   <div class="mb-2">
                          <label class="form-label">Keterangan 2</label>
                          <div class="form-floating">
                             <textarea class="form-control" id="keterangan22" name="keterangan2" style="height: 100px"></textarea>
                          </div>
                    </div>
                   <div class="mb-2">
                          <label class="form-label">Keterangan 3</label>
                          <div class="form-floating">
                             <textarea class="form-control" id="keterangan32" name="keterangan3" style="height: 100px"></textarea>
                          </div>
                    </div>
                     </div>
                     <div class="col-sm-6">
                                            <div class="mb-2">
                     <div class="form-group">
                     <label for="exampleInputFile">Foto 1</label>
                        <div class="input-group">
                        <div class="custom-file">
                        <input type="file" class="custom-file-input" id="file12" accept="image/jpeg">
                        <canvas id="kanvas1" style="display: none;"></canvas>
                        <textarea name="foto1" id="foto12" style="display: none;"></textarea>
                        <label class="custom-file-label" for="exampleInputFile">Cari Foto</label>
                        </div>
                     </div>
                     </div>
                     <div id="img1"></div>
                     </div>
                     <div class="mb-2">
                       <div class="form-group">
                        <label for="exampleInputFile">Foto 2</label>
                           <div class="input-group">
                           <div class="custom-file">
                           <input type="file" class="custom-file-input" id="file22" accept="image/jpeg">
                           <canvas id="kanvas2" style="display: none;"></canvas>
                           <textarea name="foto2" id="foto22" style="display: none;"></textarea>
                           <label class="custom-file-label" for="exampleInputFile">Cari Foto</label>
                           </div>
                        </div>
                        </div>
                        <div id="img2"></div>
                     </div>
                     <div class="mb-2">
                       <div class="form-group">
                        <label for="exampleInputFile">Foto 3</label>
                           <div class="input-group">
                           <div class="custom-file">
                           <input type="file" class="custom-file-input" id="file32" accept="image/jpeg">
                           <canvas id="kanvas3" style="display: none;"></canvas>
                           <textarea name="foto3" id="foto32" style="display: none;"></textarea>
                           <label class="custom-file-label" for="exampleInputFile">Cari Foto</label>
                           </div>
                        </div>
                        </div>
                        <div id="img3"></div>
                     </div>
                     <div class="mb-2">
                       <div class="form-group">
                        <label class="form-label">Kategori Kontent</label>
                           <select class="form-control" id="kategori" name="kategori">
                              <option value="">--Pilih Kategori--</option>
                               <option value="1">Pengabdian</option>
                               <option value="2">UKM Mahasiswa</option>
                               <option value="3">Kegiatan Mahasiswa</option>
                              <option value="4">Lainnya</option>
                           </select>
                        </div>
                     </div>
                     </div>
                  </div>
               </form>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" onclick="valid(2)">Ubah Kontent</button>
            </div>
         </div>
      </div>
      </div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script>
      const ModalShow=e=>{1==e&&$("#modalKontent").fadeIn("slow").modal("show")};$("#file1").change((function(e){(async e=>{const t=e.target.files[0],a=await(e=>new Promise(((t,a)=>{const o=new FileReader;o.readAsDataURL(e),o.onload=()=>{t(o.result)},o.onerror=e=>{a(e)}})))(t);$("#foto1").val(a)})(e)})),$("#file2").change((function(e){(async e=>{const t=e.target.files[0],a=await(e=>new Promise(((t,a)=>{const o=new FileReader;o.readAsDataURL(e),o.onload=()=>{t(o.result)},o.onerror=e=>{a(e)}})))(t);$("#foto2").val(a)})(e)})),$("#file3").change((function(e){(async e=>{const t=e.target.files[0],a=await(e=>new Promise(((t,a)=>{const o=new FileReader;o.readAsDataURL(e),o.onload=()=>{t(o.result)},o.onerror=e=>{a(e)}})))(t);$("#foto3").val(a)})(e)})),$("#file12").change((function(e){(async e=>{const t=e.target.files[0],a=await(e=>new Promise(((t,a)=>{const o=new FileReader;o.readAsDataURL(e),o.onload=()=>{t(o.result)},o.onerror=e=>{a(e)}})))(t);$("#foto12").val(a)})(e)})),$("#file22").change((function(e){(async e=>{const t=e.target.files[0],a=await(e=>new Promise(((t,a)=>{const o=new FileReader;o.readAsDataURL(e),o.onload=()=>{t(o.result)},o.onerror=e=>{a(e)}})))(t);$("#foto22").val(a)})(e)})),$("#file32").change((function(e){(async e=>{const t=e.target.files[0],a=await(e=>new Promise(((t,a)=>{const o=new FileReader;o.readAsDataURL(e),o.onload=()=>{t(o.result)},o.onerror=e=>{a(e)}})))(t);$("#foto32").val(a)})(e)}));const valid=e=>{1==e?""!=$("#judul").val()?""!=$("#ket1").val()?""!=$("#foto1").val()?""!=$("#kategori").val()?simpan(e):Swal.fire({icon:"info",title:"Kategori masih kosong.!",timer:3e3}):Swal.fire({icon:"info",title:"Foto 1 masih kosong.!",timer:3e3}):Swal.fire({icon:"info",title:"Keterangan 1 masih kosong.!",timer:3e3}):Swal.fire({icon:"info",title:"Judul kontent masih kosong.!",timer:3e3}):2==e&&(""!=$("#judul2").val()?simpan(e):Swal.fire({icon:"info",title:"Judul kontent masih kosong.!",timer:3e3}))},simpan=e=>{if($.ajaxSetup({headers:{"X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr("content")}}),1==e){var t=$("#formKontent").serialize();$.ajax({type:"POST",url:"addKontent",data:t,dataType:"json",beforeSend:function(){Swal.fire({title:"Please Wait !",allowOutsideClick:!1,showConfirmButton:!1,onBeforeOpen(){Swal.showLoading()}})},success:function(e){$("#formKontent").trigger("reset"),$("#modalKontent").fadeIn("slow").modal("hide"),Swal.fire({icon:"success",title:e.pesan}),tabel.ajax.reload()},error:function(e){}})}else if(2==e){t=$("#formEdit").serialize();$.ajax({type:"POST",url:"addKontent",data:t,dataType:"json",beforeSend:function(){Swal.fire({title:"Please Wait !",allowOutsideClick:!1,showConfirmButton:!1,onBeforeOpen(){Swal.showLoading()}})},success:function(e){$("#modalEdit").fadeIn("slow").modal("hide"),Swal.fire({icon:"success",title:e.pesan}),tabel.ajax.reload()},error:function(e){}})}},edit=e=>{$.ajaxSetup({headers:{"X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr("content")}}),$.ajax({type:"POST",url:"detailKontent",data:{id:e},dataType:"json",success:function(e){$("#modalEdit").fadeIn("slow").modal("show"),$("#id_").val(e.id),$("#judul2").val(e.judul),$("#ket12").val(e.ket1),$("#keterangan22").val(e.ket2),$("#keterangan32").val(e.ket3);var t=window.location.origin+'/public';if(null!=e.foto1){var a='<img src="'+t+"/foto_kontent/"+e.foto1+'" alt="" style="width: 200px; height: 150px;">';$("#img1").html(a)}if(null!=e.foto2){var o='<img src="'+t+"/foto_kontent/"+e.foto2+'" alt="" style="width: 200px; height: 150px;">';$("#img2").html(o)}if(null!=e.foto3){var n='<img src="'+t+"/foto_kontent/"+e.foto3+'" alt="" style="width: 200px; height: 150px;">';$("#img3").html(n)}},error:function(e){}})},hapus=e=>{Swal.fire({title:"Apakah anda ingin menghapus data ini.?",showCancelButton:!0,confirmButtonText:"Hapus"}).then((t=>{t.isConfirmed&&$.ajax({type:"POST",url:"hapusKontent",data:{id:e},dataType:"json",beforeSend:function(){Swal.fire({title:"Please Wait !",allowOutsideClick:!1,showConfirmButton:!1,onBeforeOpen(){Swal.showLoading()}})},success:function(e){Swal.fire({icon:"success",title:e.pesan}),tabel.ajax.reload()},error:function(e){}})}))};
      var tabel=null;$(document).ready((function(){tabel=$("#data").DataTable({autoWidth:!1,responsive:!0,ajax:{url:"daftarKont",type:"GET",dataSrc:""},aLengthMenu:[[10,50,100],[10,50,100]],columnDefs:[{defaultContent:"-",targets:"_all"}],columns:[{render:function(a,t,e,i){return i.row+i.settings._iDisplayStart+1}},{data:"judul"},{data:"ket1"},{render:function(a,t,e){if(null!=e.foto1)var i='<img style="width:30px" src="'+window.location.origin+'/public/foto_kontent/'+e.foto1+'" class="img-fluid" />';else i="no image";return i}},{render:function(a,t,e){if(null!=e.foto2)var i='<img style="width:30px" src="'+window.location.origin+'/public/foto_kontent/'+e.foto2+'" class="img-fluid" />';else i="no image";return i}},{render:function(a,t,e){if(null!=e.foto3)var i='<img style="width:30px" src="'+window.location.origin+'/public/foto_kontent/'+e.foto3+'" class="img-fluid" />';else i="no image";return i}},{render:function(a,t,e){if(null!=e.kategori)if(1==e.kategori)var i="Pengabdian";else i=2==e.kategori?"UKM Mahasiswa":3==e.kategori?"Kegiatan Mahasiswa":"Lainnya";return i}},{render:function(a,t,e){var i='<div class="text-center">';return i+='<div class="dropdown show">',i+='<a href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa-solid fa-gear"></i></a>',i+='<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">',i+='<a class="dropdown-item" href="javascript:;" onclick="edit('+e.id+')"><i class="fa-regular fa-pen-to-square"></i> Edit</a>',i+='<a class="dropdown-item" href="javascript:;" onclick="hapus('+e.id+')"><i class="fa-solid fa-trash-can"></i> Hapus</a>',i+="</div>",i+="</div>",i+="</div>"}}]})}));

   </script>
@endsection