@extends('layouts.admin')
@section('content')  
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        @if ($message = Session::get('success'))
          <div class="alert alert-success">
            <p>{{ $message }}</p>
          </div>
        @endif

        <div class="col-md-12 grid-margin stretch-card">
          <div class="card">
            <div class="card-body">
              <h6 class="card-title">@lang('admin_gallery.multiple')</h6>
              <div class="gallery gallery-widget" data-toggle="lightbox-gallery">
                <div class="row">
                  <div class="dropzone dz-clickable">
                    <div class="dz-default dz-message">
                      <i data-feather="image"></i>
                      <br>
                      <span>Resimleri buraya bırakın</span>
                      <br>
                      <b>ya da dosya seçin</b>
                    </div>
                  </div>

                  <form action="{{ route('admin.media.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row mb-3">
                      <div class="col-sm-12">
                        <input type="file" name="images[]" id="images_" accept=".jpg, .jpeg, .png, .svg" class="form-control" multiple="multiple" style="display: none;">
                      </div>
                    </div>
                  </form>

                </div>
                <div class="row image_area"></div>
                <div class="row">
                  @foreach($media as $item)
                    <div class="col-2 col-sm-3">
                      <a href="{{ $item->image_url() }}" data-fancybox="gallery">
                        <img class="img-lg" src="{{ $item->image_url() }}" />
                      </a>
                      <br>
                      <div class="btn-group btn-group-xs">
                        <a class="btn btn-xs btn-info gallery-link" data-fancybox="btngallery" href="{{ $item->image_url() }}">
                          <i data-feather="search" class="feather-14"></i>
                        </a>
                        <a class="btn btn-xs btn-warning copy_media_url" data-href="media_item_{{$item->id}}">
                          <i data-feather="copy" class="feather-14"></i>
                        </a>
                        <a class="btn btn-xs btn-success use_button">
                          <i data-feather="mouse-pointer" class="feather-14"></i>
                        </a>
                        <input id="media_item_{{$item->id}}" name="medya{{$item->id}}" style="opacity: 0" type="text" value="{{ $item->image_url() }}">
                      </div>
                    </div>
                  @endforeach
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
@endsection

@push('style')
  <style>
    .loader {
      position: absolute;
      background: #00000070;
      padding: 2px;
      color: white;
      border-radius: 3px;
      width: 100px;
      text-align: center;
    }
  </style>
@endpush

@push('custom-scripts')
<script>
  function checkFile(ftype) {
    var ext = ftype.split('/').pop().toLowerCase();
    if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg', 'svg', 'JPG', 'JPEG', 'PNG', 'GIF', 'SVG']) > 0)
      return true
    return false
  }

  function readURL(input, image_item) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $($('.image_item')[image_item]).find('img').attr('src', e.target.result);
    }

    reader.readAsDataURL(input);
  }

  function copy_element(element) {
    var copyText = document.getElementById(element);
    copyText.select();
    copyText.setSelectionRange(0, 99999); /*For mobile devices*/
    document.execCommand("copy");
    return copyText.value;
  }
  
  function upload(file, item){
    var fd = new FormData();
    fd.append("_token", "{{ csrf_token() }}");
    fd.append("image", file);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', "{{ route('admin.media.store') }}")
    xhr.upload.onprogress = function (e) {
      if (e.lengthComputable) {
        var elem = $($('.image_area')[item]).find('.loader');
        var percentComplete = (e.loaded / e.total) * 100;
        elem.html('%' + Math.round(percentComplete));
        if (percentComplete == 100)
          elem.html("Lütfen Bekleyin..")
      }
    }

    xhr.onload = function () {
      var resp = JSON.parse(this.response);
      if (this.status == 200) {
        $("#product_images_attributes_"+item+"_id").val(resp['media']['id']);
        $($('.image_item')[item]).find('.loader').html("Tamamlandı.")
        var html = '<br>'+
                    '<div class="btn-group btn-group-xs">'+
                      '<a class="btn btn-xs btn-info gallery-link" data-fancybox="btngallery" href="'+resp['media']['url']+'">'+
                        '<i data-feather="search" class="feather-14"></i>'+
                      '</a>'+
                      '<a class="btn btn-xs btn-warning copy_media_url" data-href="media_item_'+resp['media']['id']+'">'+
                        '<i class="fa fa-copy"></i>'+
                      '</a>'+
                      '<a class="btn btn-xs btn-success use_button"><i class="fa fa-hand-pointer"></i></a>'+
                      '<input id="media_item_'+ resp['media']['id'] +'" name="medya'+resp['media']['id']+'" style="opacity: 0" type="text" value="'+resp['media']['url']+'">'+
                    '</div>';
        $($('.image_item')[item]).append(html);
      }else{
        $($('.image_item')[item]).remove();
        alert("Hata Oluştu");
      }
    }

    xhr.send(fd);
  }
  $('.dz-clickable').click(function () {
    $('#images_').trigger('click')
  });

  $(document).ready(function () {
    @if(!$layout)
      $(".sidebar").hide();
      $('.navbar').hide();
      $('.page-wrapper').css('margin-left', '0').css('width', '100%')
    @endif

    $("body").on('click', '.copy_media_url', function(){
      copy_element($(this).data('href'));
      swal({
        position: 'top-end',
        icon: 'success',
        title: 'Link Kopyalandı',
        showConfirmButton: false,
        timer: 1500
      })
    });

    var fileInput = document.getElementById('images_');
    fileInput.addEventListener('change', function (event) {
      var input = event.target;
      var len = $(".image_item").length
      for (var z = 0; z < input.files.length; z++) {
        if (checkFile(input.files[z]['type'])) {
          var newlen = len + z;
          $(".image_area").append('<div class="col-xs-3 col-sm-2 image_item"><div class="loader"></div><img width="100" height="100" src="/images/fallback/thumb_default.png" /></div>')
          readURL(input.files[z], newlen);
          upload(input.files[z], newlen)
        }
      }
    });

    $('.dropzone').on('drag dragstart dragend dragover dragenter dragleave drop', function (event) {
      event.preventDefault();
      event.stopPropagation();
    })
      .on('dragover dragenter', function () {
        $(this).addClass('dz-drag-hover');
      })
      .on('dragleave dragend drop', function () {
        $(this).removeClass('dz-drag-hover');
      })
      .on('drop', function (event) {
        $('#images_').prop('files', event.originalEvent.dataTransfer.files);
        //$('#images_').trigger('change');
        document.getElementById('images_').dispatchEvent(new Event('change'))
      });
  });
</script>
@endpush