@extends('layouts.app', ['activePage' => 'addStory', 'titlePage' => 'اضافة حالة جديدة'])


@section('content')

<div class="content">
 
    @if (count($errors) > 0)
    @if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{$errors->first()}}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
          </div>
 
@endif
@endif
</br>


    <div class="container-fluid">
        <div class="card">
        <div class="card-header card-header-text card-header-success text-right">
        <div class="card-text ">
              <h4 class="card-title">اضافة حالة جديد</h4>
            </div>
            </div>
            <div class="card-body">

            <div class="col-md-12">
                <form method="post" action="{{route('stories.addNewStories')}}" autocomplete="off"  enctype="multipart/form-data" class="needs-validation" novalidate>
                    @csrf
                    <div class="pl-lg-4">
 
                        <div class="form-group{{ $errors->has('stories_title') ? ' has-danger' : '' }}">
                            <input type="text" name="stories_title" id="stories_title"
                                class="form-control form-control-alternative{{ $errors->has('stories_title') ? ' is-invalid' : '' }}"
                                placeholder="العنوان " required >
 <div class="invalid-feedback">
  يرجي إضافة العنوان
        </div>
                        </div>
                                                <div class="form-group{{ $errors->has('stories_title') ? ' has-danger' : '' }}">

                          <select class="form-control select2" style="width: 100%" id="news_id" name="news_id" >
                                <option value="">اختر خبر</option>
 
                                @foreach ($listNews as $key=>$b)
                                <option
                                 
                                value="{{$b->news_id}}">{{$b->news_title}}</option>
                                @endforeach
                            </select>
                                                    </div>

    <div class="dropzone" id="dropzone"></div>
 
            <div class="text-center">
        <button type="button"  id="submit-all" class="btn btn-success mt-4">حفظ</button>
        <a href="{{ route('stories.listingStories') }}" class="btn btn-danger mt-4">الرجوع</a>
        </div>
    
                    </div>
                </form>
                               
                  
        
            </div>
            </div>
        </div>
    </div>
    </br>
</div>

@endsection
@push('js')
<script>
// let editor;
//   ClassicEditor.create( document.querySelector( '#editor1' )  ,{language: 'ar'})
//                                 .then(  newEditor => {
//                                     editor = newEditor;
//                                         } )
//                                 .catch( error => {
//                                  } );
 
  
         Dropzone.options.dropzone =
         {
            url :"{{route('stories.addNewStories')}}",
            method:"post",
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
              return time ;
            },
            dictDefaultMessage:"ارفع الصور",
            uploadMultiple:true,
            maxFilesize:1,
            addRemoveLinks:true,
            autoProcessQueue:false,
            dictRemoveFile: 'حذف',
         headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
            dictRemoveFileConfirmation:'هل انت متأكد من الحذف؟',
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            removedfile : function(file, response) {
             myDropzone = this;
            file.previewElement.remove();
 
            },
            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.
        });
  this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("stories_title", $("#stories_title").val());
                        formData.append("news_id", $("#news_id").val());

 
         });
      let a =  [] ;
 
 
        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',
//                  data:{ data:JSON.stringify({imgQ})}
//             }) 
//      }, 
//                 });
            
 
 
</script>
 
    @endpush