@extends('layouts.dashboard-skelton')

@section('main')
<div class="row justify-content-center">
  <div class="col-md-8">
    <div class="smtpa-nv-bar d-flex justify-content-between align-items-center mb-4">
      <span>Gérer la galerie</span>
      <a href="#" id="galleryOpenModal" class="btn btn-sm btn-info text-white">
        <i class="bi bi-plus-circle"></i>
        Ajouter
      </a>
    </div>
  </div>
  <div class="col-md-8">
    <div class="mf-glry">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 d-flex justify-content-center">
            <ul class="mf-glry__fltrs" id="mf-glry__fltrs">
              <li data-filter="*" class="is-active">All</li>
              <li data-filter=".filter-images">images</li>
              <li data-filter=".filter-videos">videos</li>
            </ul>
          </div>
        </div>
        <div class="row mf-glry__container">
          @foreach ($galleries as $gallery)
          <div class="col-lg-4 col-md-6 mf-glry__item @php echo ($gallery->type == 'video') ? 'filter-videos' : 'filter-images' @endphp">
            <div class="mf-glry__wrap">
              <img src="@php echo ($gallery->type == 'video') ? 'https://via.placeholder.com/300.png/1d1d1f/fff' : asset($gallery->media->url()) @endphp" class="img-fluid" alt="">
              <div class="mf-glry__info">
                <form action="{{ route('galleries.destroy',['id' => $gallery->id]) }}"  method="POST" enctype="multipart/form-data">
                  @method('DELETE')
                  @csrf
                  <input type="submit" value="Supprimer" class="btn btn-delete">
                </form>
                <p>Web</p>
                <div class="mf-glry__links">
                  <a href="{{asset($gallery->media->url())}}" class="glry-lightbox" title="Web 3">
                    <i class="bi bi-bookmark-plus"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
  <div id="galleryUploadImage" class="smtpa-modal">
    <div class="modal-content-box">
      <span class="close"><i class="bi bi-x"></i></span>
      <div class="fupldp">
        <form action="#" id="uploadImageForm">
          @csrf
          <input type="file" name="file" hidden class="fupldp__input-file">
        </form>
        <div class="fupldp__form" id="uploadArea">
          <i class="bi bi-cloud-arrow-up-fill"></i>
          <p>Parcourir le fichier à télécharger</p>
        </div>
        <ul class="fupldp__progress">
        </ul>
        <ul class="fupldp__uplded">
        </ul>
      </div>
    </div>
  </div>
  <div id="galleryUploadThumbnail" class="smtpa-modal">
    <div class="modal-content-box">
      <span class="close"><i class="bi bi-x"></i></span>
      <div class="fupldp">
        <form action="#" id="uploadThumbForm">
          @csrf
          <input type="file" name="file" hidden class="fupldp__input-file">
        </form>
        <div class="fupldp__form" id="uploadThumbArea">
          <i class="bi bi-cloud-arrow-up-fill"></i>
          <p>Parcourir le fichier à télécharger</p>
        </div>
        <ul class="fupldp__progress">
        </ul>
        <ul class="fupldp__uplded">
        </ul>
      </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script src="{{ asset('js/glightbox.min.js') }}"></script>
<script src="{{ asset('js/isotope.pkgd.min.js') }}"></script>
<script>
  $(document).ready(function() {
    function redirect(url) {
      var ua = navigator.userAgent.toLowerCase(),
        isIE = ua.indexOf('msie') !== -1,
        version = parseInt(ua.substr(4, 2), 10);
        if (isIE && version < 9) {
          var link = document.createElement('a');
          link.href = url;
          document.body.appendChild(link);
          link.click();
        }
        else {
          window.location.href = url;
        }
    }
    // START : HANDLE THE MASONRY LAYOUT, FILTER, AND LIGHTBOX
    const select = (el, all = false) => {
      el = el.trim()
      if (all) {
        return [...document.querySelectorAll(el)]
      } else {
        return document.querySelector(el)
      }
    }
    const on = (type, el, listener, all = false) => {
      let selectEl = select(el, all)
      if (selectEl) {
        if (all) {
          selectEl.forEach(e => e.addEventListener(type, listener))
        } else {
          selectEl.addEventListener(type, listener)
        }
      }
    }
    window.addEventListener('load', () => {
      let portfolioContainer = select('.mf-glry__container');
      if (portfolioContainer) {
        let glryIsotope = new Isotope(portfolioContainer, {
          itemSelector: '.mf-glry__item'
        });

        let glryFilters = select('#mf-glry__fltrs li', true);

        on('click', '#mf-glry__fltrs li', function(e) {
          e.preventDefault();
          glryFilters.forEach(function(el) {
            el.classList.remove('is-active');
          });
          this.classList.add('is-active');

          glryIsotope.arrange({
            filter: this.getAttribute('data-filter')
          });
        }, true);
      }
    });
    const glryLightbox = GLightbox({
      selector: '.glry-lightbox'
    });
    // END : HANDLE THE MASONRY LAYOUT, FILTER, AND LIGHTBOX
    var uploadModal = $("#galleryUploadImage");
    // ==================== START : HANDLE OPEN CLOSE GALLERY UPLOAD MODAL ====================
    $("#galleryOpenModal").on("click", function(e) {
      e.preventDefault();
      uploadModal.removeClass("d-none");
      uploadModal.addClass("d-block");
    })
    $("#galleryUploadImage .modal-content-box .close").on("click", function() {
      uploadModal.removeClass("d-block");
      uploadModal.addClass("d-none");
      // document.getElementById('gallery-form').reset();
      uploadModal.find(".gallery-form .gallery-image img").attr("src", "");
      uploadModal.find(".gallery-form .gallery-image img").addClass("d-none");
    })
    $("#galleryUploadThumbnail .modal-content-box .close").on("click", function() {
      $(this).closest("#galleryUploadThumbnail").removeClass("d-block");
      $(this).closest("#galleryUploadThumbnail").addClass("d-none");
      // document.getElementById('gallery-form').reset();
      $(this).closest("#galleryUploadThumbnail").find(".gallery-form .gallery-image img").attr("src", "");
      $(this).closest("#galleryUploadThumbnail").find(".gallery-form .gallery-image img").addClass("d-none");
    })
    // ==================== END : HANDLE OPEN CLOSE GALLERY UPLOAD MODAL ====================
    // START : HANDLE THE UPLOAD MODAL
    function handleFileUpload() {
      const form =   $("#galleryUploadImage form"),
        fileInput =  $("#galleryUploadImage form input"),
        uploadArea = $("#galleryUploadImage #uploadArea");
      uploadArea.on("click",function() {
        fileInput.click();
      })
      fileInput.on("change",({target}) => {
        let file = target.files[0];
        if(file) {
          let fileName = file.name;
          if(fileName.length >= 12){
            let splitName = fileName.split('.');
            fileName = splitName[0].substring(0,12) + "... ." + splitName[1];
          }
          if(file['type'].includes('image')) {
            uploadImage(fileName);
          }
          else {
            uploadVideo(fileName);
          }
        }
      })
      function uploadFile(xhr,filename,url) {
        xhr.open("POST",url );
        xhr.setRequestHeader("X-CSRF-Token", $("input[name=_token]").val());
        xhr.upload.addEventListener("progress", ({loaded,total}) => {
          let fileLoaded = Math.floor((loaded / total) * 100);
          let fileTotal = Math.floor(total / 1000);
          let fileSize = (fileTotal < 1024) ? fileTotal + "KB" : (loaded / (1024 * 1024)).toFixed(2) + "MB";   
          let progressHTML = `<li class="fupldp__file">
              <i class="bi bi-file-earmark-fill"></i>
              <div class="fupldp__content">
                <div class="fupldp__info">
                  <span class="fupldp__name">${filename} • en cours</span>
                  <span class="fupldp__percent">${fileLoaded}%</span>
                </div>
                <div class="fupldp__prgrss-bar">
                  <div class="fupldp__prgrss" style="width: ${fileLoaded}%"></div>
                </div>
              </div>
            </li>`;
            document.querySelector(".fupldp__progress").innerHTML = progressHTML;
            if(loaded == total) {
              document.querySelector(".fupldp__progress").innerHTML = "";
              let uploadedHTML = `<li class="fupldp__file">
                      <i class="bi bi-file-earmark-fill"></i>
                      <div class="fupldp__content">
                        <div class="fupldp__info">
                          <span class="fupldp__name">${filename} • téléchargé</span>
                          <span class="fupldp__size">${fileSize}</span>
                        </div>
                        <i class="bi bi-check"></i>
                      </div>
                    </li>`;
              document.querySelector(".fupldp__uplded").insertAdjacentHTML("afterbegin",uploadedHTML)
            }
        })
      }
      function uploadImage(name) {
        let xhr = new XMLHttpRequest();
        uploadFile(xhr,name,"{{ route('galleries.store') }}")
        xhr.onload = function () {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status === 200) {
                  setTimeout(() => {
                    redirect("{{ route('galleries.index') }}")
                  }, 4000);
                }
            }
        };
        let formData = new FormData(document.getElementById("uploadImageForm"));
        xhr.send(formData);
      }
      function uploadVideo(name) {
        let xhr = new XMLHttpRequest();
        uploadFile(xhr,name,"{{ route('galleries.storevideo') }}")
        xhr.onload = function () {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status === 200) {
                  videoId = xhr.response;
                  console.log(videoId);
                  $("#galleryUploadImage .modal-content-box .close").click();
                  $("#galleryUploadThumbnail").removeClass("d-none");
                  $("#galleryUploadThumbnail").addClass("d-block");
                }
            }
        };
        let formData = new FormData(document.getElementById("uploadImageForm"));
        xhr.send(formData);
      }
    }
    handleFileUpload()
    // END : HANDLE THE UPLOAD MODAL
  })
</script>
@endsection