@extends('layouts.admin')
@section('title', 'Galeri Kegiatan')
@section('style')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
<!-- <script src="https://cdn.jsdelivr.net/npm/web-animations-js@2.3.2/web-animations.min.js"></script> -->

<style type="text/css">
   img{
      width: 100%;
   }

   #imgPreview{
      border: 1px solid black;
      padding: 10px;
   }

   #imgPreview img{
      width: 200px;
      padding: 5px;
   }
   .item-img {
      position: relative;
      display: inline-block;
   }

   .btn-delete-img {
      display: none;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
   }
   .item-img:hover .btn-delete-img {
      display: block;
   }
</style>
@endsection
@section('content')
<section class="content">
   <div class="d-flex flex-wrap justify-content-between">
      <h4>Form Galeri Kegiatan</h4>
      <div class="tools">
         <a type="button" class="btn btn-outline-success btn-sm pull-right" href="{{route('gallery_form')}}"><i class="fas fa-plus"></i> Buat Baru</a>
         <button type="button" class="btn btn-outline-primary btn-sm pull-right" onclick="$('#formData').submit();"><i class="fas fa-upload"></i> Publish</button>
      </div>
   </div>
   @if ($message = Session::get('success'))
   <div class="alert alert-success">
      <p>{{ $message }}</p>
   </div>
   @endif
   @if ($message = Session::get('error'))
   <div class="alert alert-error">
      <p>{{ $message }}</p>
   </div>
   @endif
   <form id="formData" method="POST" action="javascript:void(0)" enctype="multipart/form-data" autocomplete="off">
      <div class="row g-2 my-2">
         <div class="col-md-12 g-2">
            <div class="card">
               <div class="card-body">
                  <div id="formInput">
                     <input type="hidden" name="galeri_id" id="galeri_id" value="{{ isset($gallery)?$gallery->galeri_id:'' }}">
                     @csrf
                     <div class="row g-2">
                        <div class="col-md-6">
                           <label for="judul" class="form-label">Judul <span style="color:red">*</span></label>
                           <input type="text" name="judul" id="judul" class="form-control" value="{{isset($gallery)?$gallery->galeri_judul:''}}">
                           @error('judul')
                           <span class="invalid-feedback" role="alert">
                              <strong>{{ $message }}</strong>
                           </span>
                           @enderror
                        </div>
                        <div class="col-md-6">
                           <label for="tags" class="form-label">Tags</label>
                           <input type="text" name="tags" id="tags" class="form-control" onkeyup="if (this.value[0] !== '#') this.value = '#' + this.value" value="{{isset($gallery)?$gallery->galeri_tags:''}}" style="text-transform: lowercase;">
                           @error('tags')
                           <span class="invalid-feedback" role="alert">
                              <strong>{{ $message }}</strong>
                           </span>
                           @enderror
                        </div>
                        <div class="col-md-12">
                           <label for="deskripsi" class="form-label">Deskripsi <span style="color:red">*</span></label>
                           <textarea type="text" name="deskripsi" id="deskripsi" class="form-control" style="width:100%">{{isset($gallery)?$gallery->galeri_deskripsi:''}}</textarea>
                           @error('deskripsi')
                           <span class="invalid-feedback" role="alert">
                              <strong>{{ $message }}</strong>
                           </span>
                           @enderror
                        </div>
                        <div class="col-6">
                           <div class="form-check form-switch">
                              <input class="form-check-input" type="checkbox" role="switch" name="publish" id="publish"  >
                              <label class="form-check-label" for="publish">Publish</label>
                           </div>
                        </div>
                        <div class="col-6 d-flex justify-content-end">
                           <button type="button" class="btn btn-outline-dark btn-sm pull-right" onclick="load_foto(getParameterByName('id'))"><i class="fas fa-sync"></i> Load Foto</button>
                        </div>
                     </div>
                  </div>
                  <div id="sortable" class="d-flex flex-wrap justify-content-between justify-content-lg-center"></div>
                  <div id="imageUpload" class="mt-4 dropzone"></div>
               </div>
            </div>
         </div>
      </div>
      <div class="sticky-bottom d-grid float-lg-end">
         <button type="submit" class="btn btn-primary btn-sm shadow"><i class="fas fa-upload"></i> Publish</button>
      </div>
   </form>
</section>
@endsection
@section("javascript")
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<script>
/*Data belum disimpan, tetap reload halaman?*/
   var changed = false;
   var form = document.getElementById("formData");
   form.addEventListener("change", function () {
      changed = true;
   });
   window.onbeforeunload = function (event){
      if (changed) {
         return '';
      }
   };

   var save_method;
   var galeri_id = '{{ isset($gallery)?$gallery->galeri_id:'' }}';
   $(document).ready( function () {
      $.ajaxSetup({
         headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
         }
      });
      save_method = 'add';      $('#deskripsi').summernote({
         placeholder: 'Write here...',
         codeviewFilter: false,
         codeviewIframeFilter: true,
         height: 100,
         minHeight: null,
         maxHeight: null,
         focus: false,
         toolbar: [
            ['style', ['bold','italic','clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['fontsize', ['fontsize']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ],
         fontNames: [
          'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
          'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
          'Sacramento'
          ],
         lineHeights: ['0.5', '1.0', '1.5'],
         callbacks: {
            onChange: function(contents, $editable) {
               changed = true;
            }
         }
      });
      load_foto(getParameterByName('id'));
   });


   $("#tags").on('keydown',function(e) {
      if (e.code === "Space") {
         var hashTag = addHashtag($("#tags").val());
         $("#tags").val(hashTag);
      }
   });
   $("#tags").on('change',function(e) {
      var hashTag = addHashtag($("#tags").val());
      $("#tags").val(hashTag);
   });
   function addHashtag(str) {
      return str.split(' ').map(word => {
         if (word.startsWith('#')) {
            return word;
         } else {
            return '#' + word;
         }
      }).join(' ');
   }
   $("#foto").change(function() {
      showPreview('foto','previewFoto');
      /*if (this.files && this.files[0]) {
      var filePhoto = this.files[0];
      $("#previewFoto").attr("src", "");
      if(filePhoto.type=="image/jpeg"||filePhoto.type=="image/jpg"||filePhoto.type=="image/png"){
      if(filePhoto){
      var reader = new FileReader();
      reader.onload = function(){
      document.getElementById("previewFoto").style.display = '';
      $("#previewFoto").attr("src", reader.result);
      }
      reader.readAsDataURL(filePhoto);
      }
      }else{
      $("#previewFoto").attr("src", "");
      $("#foto").val('');
      alertSukses('Notifikasi','Hanya file foto','bg-danger');
      }
      } else {
      $("#previewFoto").attr("src", "");
      }*/
   });

   function load_foto(id){
      if (typeof id !== 'undefined' && id !== null) {
         $.ajax({
            type: "POST",
            url: "{{route('gallery_list_foto')}}",
            dataType: "html",
            data: {id:id},
            success: function(msg){
               $("#sortable").html(msg);
            }
         });
      }
   }
   $("#sortable").sortable({
      update: function(event, ui) {
         sort_image();
      }
   });
   function sort_image() {
      var item_order = new Array();
      $('#sortable .item-sort').each(function() {
         item_order.push($(this).attr("id"));
      });
      var order_string = item_order;
      $.ajax({
         type: "POST",
         url: "{{ route('reorder_item_gallery') }}",
         data: {order: order_string, galeri_id: getParameterByName('id')},
         cache: false,
         success: function(data) {}
      });
   }

   function deleteItemImg(id){
      $.confirm({
         title: "",
         content: "Hapus foto?",
         type: "red",
         backgroundDismiss: !1,
         backgroundDismissAnimation: "glow",
         buttons: {
            btnBatal: { text: "batal", btnClass: "btn-primary", keys: ["esc"], action: function () {} },
            btnHapus: {
               text: "ya, hapus !",
               btnClass: "btn-danger",
               keys: ["enter"],
               action: function () {
                  document.getElementById(id).remove();
                  $.ajax({
                     url: "{{ route('delete_item_gallery') }}",
                     type: "POST",
                     data: { id: id },
                     dataType: "json",
                     success: function (t) {
                        if(t.status) {
                           sort_image();
                           alertSukses("Notifikasi", "" + t.message, "bg-success");
                        }else{
                           alertSukses("Notifikasi", "" + t.message, "bg-danger");
                        }
                     },
                     error: function (t, e, n) {
                        $.alert({ title: "Warning!", content: "Error deleting data!" });
                     },
                  });
               },
            },
         },
      });
   }

   function getParameterByName(name) {
      var urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(name);
   }

   Dropzone.autoDiscover = false;
   var isUpload = false;
   myDropzone = new Dropzone('div#imageUpload', {
      addRemoveLinks: true,
      autoProcessQueue: false,
      uploadMultiple: true,
      parallelUploads: 100,
      maxFiles: 5,
      maxFilesize: 10,
      maxfilesexceeded: function(file) {
         this.removeAllFiles();
      },
      paramName: 'file',
      clickable: true,
      url: "{{ route('gallery_store') }}",
      init: function () {
         this.on("addedfile", function(file) { changed = true; isUpload = true; });
         this.on('sending', function (file, xhr, formData) {
            var data = $("#formData").serializeArray();
            $.each(data, function (key, el) {
               formData.append(el.name, el.value);
            });
         });
      },
      error: function (file, response){
         /*console.log(file, response);*/
         this.removeAllFiles();
         $('.img-uploader-box').removeClass('d-none');
         $('.img-reset-button').addClass('d-none');
         alertSukses('Notifikasi', response.message,'bg-danger');
      },
      successmultiple: function (file, response) {
         if(response.status){
            alertSukses('Notifikasi',''+response.message,'bg-success');
            $.alert({
               title: '',
               content: response.message,
               buttons: {
                  btnLanjut: {
                     text: 'Lanjut Edit',
                     btnClass: 'btn-light',
                     keys: ['esc'],
                     action: function(){
                        $("#galeri_id").val(response.id);
                        save_method = 'edit';
                        var url_edit = "{{ route('gallery_form') }}";
                        window.history.pushState('galeri', 'galeri', url_edit+'?id='+response.id);
                        load_foto(response.id);
                        myDropzone.removeAllFiles();
                     }
                  },
                  btnSelesai: {
                     text: 'Selesai',
                     btnClass: 'btn-primary',
                     keys: ['enter'],
                     action: function(){
                        location.href = "{{ route('admin_gallery') }}";
                     }
                  },
               }
            });
         }else{
            var dropzoneFilesCopy = file.slice(0);
            myDropzone.removeAllFiles();
            $.each(dropzoneFilesCopy, function(_, file) {
               if (file.status === Dropzone.ERROR) {
                  file.status = undefined;
                  file.accepted = undefined;
               }
               myDropzone.addFile(file);
            });
            alertSukses('Notifikasi',''+response.message,'bg-danger');
         }
      },
      completemultiple: function (file, response) {
         /*console.log(file, response, "completemultiple");*/
         var dropzoneFilesCopy = file.slice(0);
         myDropzone.removeAllFiles();
         $.each(dropzoneFilesCopy, function(_, file) {
            if (file.status === Dropzone.ERROR) {
               file.status = undefined;
               file.accepted = undefined;
            }
            myDropzone.addFile(file);
         });
      },
      removedfile: function(file) {
         file.previewElement.remove();
         isUpload = false;
         /*console.log("removedfile");*/
      }
   });
   $(".dropzone").sortable({
      items:'.dz-preview',
      cursor: 'grab',
      opacity: 0.5,
      containment: '.dropzone',
      distance: 20,
      tolerance: 'pointer',
      stop: function () {
         var queue = myDropzone.getAcceptedFiles();
         newQueue = [];
         $('#imageUpload .dz-preview .dz-filename [data-dz-name]').each(function (count, el) {
            var name = el.innerHTML;
            queue.forEach(function(file) {
               if (file.name === name) {
                  newQueue.push(file);
               }
            });
         });
         myDropzone.files = newQueue;
      }
   });

   $("#formData").on("submit", function(e){
      e.preventDefault();
      e.stopPropagation();
      console.clear();
      changed = false;
      $('.btnSave').html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`);
      $('.btnSave').attr('disabled', true);
      $(document).find("span.text-danger").remove();
      const elements = document.querySelectorAll('*');
      elements.forEach((element) => {
         element.classList.remove('is-invalid');
      });
      if (isUpload) {
         myDropzone.processQueue();
      }else{
         sending_data();
      }
   });

   function sending_data() {
      var formData = new FormData(document.getElementById('formData'));
      $.ajax({
         type:'POST',
         url: "{{ route('gallery_store') }}",
         data: formData, cache: false, contentType: false, processData: false,
         success: (data) => {
            $(".btnSave").html('<i class="fas fa-save"></i> Simpan');
            $(".btnSave").attr("disabled", false);
            if(data.status){
               alertSukses('Notifikasi',''+data.message,'bg-success');
               $.alert({
                  title: '', content: data.message,
                  buttons: {
                     btnLanjut: {
                        text: 'Lanjut Edit', btnClass: 'btn-light', keys: ['esc'],
                        action: function(){
                           $("#galeri_id").val(data.id);
                           save_method = 'edit';
                           var url_edit = "{{ route('gallery_form') }}";
                           window.history.pushState('galeri', 'galeri', url_edit+'?id='+data.id);
                           load_foto(data.id);
                        }
                     },
                     btnSelesai: {
                        text: 'Selesai', btnClass: 'btn-primary', keys: ['enter'],
                        action: function(){
                           location.href = "{{ route('admin_gallery') }}";
                        }
                     },
                  }
               });
            }else{
               alertSukses('Notifikasi',''+data.message,'bg-danger');
            }
         },
         error: function(data){
            $(".btnSave").html('<i class="fas fa-save"></i> Simpan');
            $(".btnSave").attr("disabled", false);
            $.each(data.responseJSON.errors,function(field_name,error){
               $(document).find('[name='+field_name+']').addClass('is-invalid');
               $(document).find('[name='+field_name+']').after('<span style="font-weight: light" class="text-danger">' +error+ '</span>');
            });
         }
      });
   }

   function showPreview(idInput, idPreview) {
      var input = document.getElementById(idInput);
      var preview = document.getElementById(idPreview);
      if (input.files && input.files[0]) {
         var filePhoto = input.files[0];
         preview.setAttribute("src", "");
         if(filePhoto){
            var reader = new FileReader();
            reader.onload = function(){
               preview.style.display = '';
               preview.setAttribute("src", reader.result);
            }
            reader.readAsDataURL(filePhoto);
         }
      } else {
         preview.setAttribute("src", "");
      }
   }

</script>
@endsection