@extends('layouts.app', ['activePage' => 'NewsImages', 'titlePage' => 'الصور'])


@section('content')
</br>
</br>
</br>
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="shadow p-3 mb-5 bg-white rounded">
                        <div class="card-header">
                            <div class="row align-items-center">
                               
                                <div class="col-sm-8">
                                    <h3 class="mb-0">الأخبار</h3>

                                </div>


                                <div class="col-sm-4">
                                <div class="col-md-4 offset-md-4 clearfix">
                                    <!--<a href="{{ route('news.addNews') }}" class="btn btn-danger btn-lg " role="button">اضافة خبر</a>-->
                                    <button type="button" class="btn  btn-lg btn-danger" id="submit-all" >
            	حفظ </button>
                                </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12">
    
                  <input type="hidden" id="news_id" name="news_id" value="{{$result['data']}}" />

                  
     <form method="post" action="{{url('addNewNewsImage')}}" enctype="multipart/form-data" 
                     class="dropzone" id="dropzone">
        </form>   
                   
                </div>
            </div>
 
          </div>
          <!-- /.box-body --> 
        </div>
        <!-- /.box --> 
      </div>
      <!-- /.col --> 
    </div>
  
  @endsection
@push('js')
  <script type="text/javascript">
 
	var x=document.getElementById("news_id").value ;
        Dropzone.options.dropzone =
         {
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
               return time ;
            },
            dictDefaultMessage:"ارفع الصور",
            uploadMultiple:true,
              parallelUploads:20,
            addRemoveLinks:true,
            autoProcessQueue:false,
            dictRemoveFile: 'حذف',
         headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
            dictRemoveFileConfirmation:'هل انت متأكد من الحذف؟',
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            params: {'news_id':x},
            removedfile : function(file, response) {
             myDropzone = this;
            file.previewElement.remove();

            $.ajax({
                type: 'post',
                url: 'deleteNImage',
                    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
                // params:{id: file.name , news_id :{!!$result['data']!!}},
                data: {id: file.name , news_id :{!!$result['data']!!}},
                // dataType: 'html',
                 success: function(data){
                   console.log(data);
 
                 },
                 error:function(data){
                     console.log(data);  
                 }
            }) 
            },
            success: function(file, response) 
            {
                window.location.href=window.location.href
 
 
            },
            error: function(file, response)
            {
                return false;
            },
            init: function() {
            var submitButton = document.querySelector("#submit-all")
        myDropzone = this; // closure

        submitButton.addEventListener("click", function () {
            myDropzone.processQueue(); // Tell Dropzone to process all queued files.
        });
 
      let a =  {!! $result['newsImage'] !!}  ;
  
    $.each(a, function (key, value) {
        var file = { name: value.news_image_id, size: value.size };
        console.log(file)
         myDropzone.displayExistingFile(  file,  "http://kershi.creativeapps.me/" + value.news_image_path)
    $('.dz-remove').attr('class','btn btn-fill btn-block btn-danger')
    var d = document.createElement('a');
    d.setAttribute('href',"http://kershi.creativeapps.me/" +  value.news_image_path);
    d.setAttribute('download','')
    d.setAttribute('class','btn btn-fill btn-block btn-success')
    d.innerHTML = "تحميل";
    file.previewTemplate.appendChild(d);
   
      })
 
        this.on('completemultiple', function () {
       
        });
        this.on("complete", function(file) {
}); 
}
}
                 $("#dropzone").sortable({
                     items:'.dz-preview',
    cursor: 'grab',
    opacity: 0.5,
    containment: '#dropzone',
    distance: 20,
    tolerance: 'pointer',
                  stop: function () {
     var imgQ =[]
      $('#dropzone .dz-preview .dz-filename [data-dz-name]').each(function (count, el) {      
         
            var name = el.innerHTML;
                 
             imgQ.push({sort:count,id:name})
            
      });
       $.ajax({
                type: 'POST',
                url: 'sortImages',
                  headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
                 data:{ data:JSON.stringify({imgQ})}
            }) 
     }, 
                });
            

 

 
</script>
 
    @endpush