@extends('dashboard.dashboard')
@section('title',ucfirst('Galeria de Imagens'))
@section('main')
@section('page','article')
<div class="panel-header ">
    <div class="page-inner">
        <div class="page-header">
            @if(Breadcrumbs::exists())
            {!! Breadcrumbs::render() !!}
            @endif
        </div>
    </div>
</div>
@php
@endphp
<div class="row">
    <div class="wizard-container wizard-round col-md-9">
        <div class="wizard-header text-center">
            <h3 class="wizard-title"><b class="text-capitalize">Galeria de Imagens</b></h3>
            <small>Carregue as fotos, elas serão salvas automaticamente</small>
        </div>
        <div class="wizard-body">
            <div class="tab-content">
                <div class="tab-pane active" id="details">
                    <div class="row">

                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="dropzone">
                                    {{ __('Fotos') }}
                                </label>

                                <form action="{{route('admin.gallery.images.store',$gallery)}}" method="post"
                                    class="form-horizontal dropzone form-label-left" enctype="multipart/form-data">
                                    @method('put')
                                    @csrf
                                    <h4 class="dz-default dz-message">Arraste e solte as imagens aqui<div class="note">
                                            (Ou clique para abrir a caixa de seleção)</div>
                                    </h4>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
        <div class="col-md-12 ml-auto mr-auto text-center">

            <form action="{{route('admin.gallery.images.order',$gallery)}}" method="post" class="" id="form-images">
                @method('post')
                @csrf
                <input type="hidden" id="imgs" name="imgs" value="" />
                
            </form>
            <button class="btn btn-finish btn-success" id="save">Salvar</button>
            <div class="clearfix"></div>
        </div>
    </div>
  
</div>
@endsection
@push('styles')
<style>
    .dropzone .dz-preview .dz-image {
        width: 160px !important;
        height: 109px !important;
    }

    .dropzone .dz-preview .dz-image img {
        width: 100%;
        height: 100%;
    }
</style>
@endpush

@prepend('scripts')
<script src="{{ asset('admin/js/plugin/dropzone/dropzone.min.js')}}"> </script>

<script type="text/javascript">
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
{{-- 
// Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop files here to upload";
// Dropzone.prototype.defaultOptions.dictFallbackMessage = "Your browser does not support drag'n'drop file uploads.";
// Dropzone.prototype.defaultOptions.dictFallbackText = "Please use the fallback form below to upload your files like in the olden days.";
// Dropzone.prototype.defaultOptions.dictFileTooBig = "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.";
// Dropzone.prototype.defaultOptions.dictInvalidFileType = "You can't upload files of this type.";
// Dropzone.prototype.defaultOptions.dictResponseError = "Server responded with {{statusCode}} code.";
// Dropzone.prototype.defaultOptions.dictCancelUpload = "Cancel upload";
// Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation = "Are you sure you want to cancel this upload?";
// Dropzone.prototype.defaultOptions.dictRemoveFile = "Remove file";
// Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "You can not upload any more files."; --}}
Dropzone.prototype.defaultOptions.dictCancelUpload = "Cancelar upload";
Dropzone.prototype.defaultOptions.dictRemoveFile = "Remover Imagem";
Dropzone.autoDiscover = false;
    var uploadedDocumentMap = {};
    $(".dropzone").dropzone({
 addRemoveLinks: true,
        maxFilesize: 12,
        acceptedFiles: ".jpeg,.jpg,.png,.gif,.webp",
        timeout: 5000,
       
        init: function () {
            
      @if(sizeof($gallery->images()->get()) > 0)
        
        var files =
          {!! json_encode($gallery->images()->orderBy('order','asc')->get()) !!}
          if (files.length > 0) {
        for (var i=0; i < files.length; i++) {
          var file = files[i];
          var mockFile = { name: file.image, src:file.image, size: file.size };
          this.options.addedfile.call(this, mockFile )
          this.options.thumbnail.call(this, mockFile,file.thumbnail);
          mockFile.previewElement.classList.add('dz-complete');
          $('form').append('<input type="hidden" name="document[]" value="' + file.image + '">')
        }
    }
      @endif
    },
        removedfile: function(file) {
   var name = file.name; 
   file.previewElement.remove()
     
   $.ajax({
     type: 'DELETE',
     headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
     url: "{{route('admin.gallery.images.destroy',$gallery)}}",
     data: {name: name},
     success: function(data){
      $(this).find('input[name="document[]"][value="' + name + '"]').remove()
     }
   });
   
 },  dragover: function(file) {
        console.log('File-->'+file);
      },
});
Dropzone.options.myAwesomeDropzone = {
  thumbnailWidth: 250,
  thumbnailHeight: 250,
  
}

$(function() {
      $(".dropzone").sortable({
        items: '.dz-preview',
        cursor: 'move',
        opacity: 0.5,
        containment: '.dropzone',
        distance: 20,
        tolerance: 'pointer',
      });
});

$("#save").click(function(){

    var imgs = "";
    $(".dz-image img").each(function(){
        imgs += $(this).attr('alt') + "|";
    });
    $("#imgs").val(imgs);
    $("#form-images").submit();
   
})
</script>
@endprepend