@extends('admin.layout.master')


@section('content')
<section class="content" id="app">
    <div class="box box-info">
        <div class="box-header with-border">
            <h3 class="box-title pull-right">ویرایش مطلب {{$post->title}}</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">

    <div class="row">
        <div class="col-md-9">
          <form method="post" action="/adminsaatlux090/posts/{{$post->id}}">
              @csrf
              <input type="hidden" name="_method" value="PATCH">

              <div class="form-group">
                  <label for="title">نام</label>
                  <input type="text" name="title" class="form-control" value="{{$post->title}}" placeholder="نام محصول را وارد کنید...">
              </div>
              <div class="form-group">
                  <label for="slug">نام مستعار</label>
                  <input type="text" name="slug" class="form-control" value="{{$post->slug}}"  placeholder="نام مستعار محصول را وارد کنید...">
              </div>

              <div class="form-group">
                 <label for="kholase">خلاصه</label>
                 <input type="text" name="kholase" class="form-control" placeholder="خلاصه" value="{{$post->kholase}}">
             </div>

              <div class="form-group">
                  <label>توضیحات</label>
                  <textarea id="textareaDescription" type="text" name="description" class="ckeditor form-control" placeholder="توضیحات محصول را وارد کنید...">{{$post->description}}</textarea>
              </div>
              <div class="form-group">
                  <label for="photo">گالری تصاویر</label>
                  <input type="hidden" name="photo_id[]" id="product-photo">
                  <div id="photo" class="dropzone"></div>
                  <div class="row">
                      @foreach($post->photos as $photo)
                          <div class="col-sm-3" id="updated_photo_{{$photo->id}}">
                              <img class="img-responsive" src="/images/post/{{$photo->path}}">
                              <button type="button" class="btn btn-danger" onclick="removeImages({{$photo->id}})">حذف</button>
                          </div>
                      @endforeach
                  </div>
              </div>
              <div class="form-group">
                  <label>عنوان سئو</label>
                  <input type="text" name="meta_title"  value="{{$post->meta_title}}" class="form-control" placeholder="عنوان سئو را وارد کنید...">
              </div>
              <div class="form-group">
                  <label>توضیحات سئو</label>
                  <input type="text" name="meta_description" class="form-control" value="{{$post->meta_description}}" placeholder="توضیحات سئو را وارد کنید...">
              </div>
              <div class="form-group">
                  <label>کلمات کلیدی سئو</label>
                  <input type="text" name="meta_keywords" value="{{$post->meta_keywords}}" class="form-control" placeholder="کلمات کلیدی سئو را وارد کنید...">
              </div>
              <button type="submit" onclick="productGallery()" class="btn btn-success pull-left">ذخیره</button>
          </form>
        </div>

      </div>
    </div>
    </div>
  </section>
@endsection
@section('scripts')
    <script type="text/javascript" src="{{asset('/admin/dist/js/dropzone.js')}}"></script>
    <script type="text/javascript" src="{{asset('/admin/plugins/ckeditor/ckeditor.js')}}"></script>
    <script>
      Dropzone.autoDiscover = false;
      var photosGallery = []
      var photos = [].concat({{$post->photos->pluck('id')}})
      var drop = new Dropzone('#photo', {
        addRemoveLinks: true,
        url: "{{ route('photos.upload') }}",
        sending: function(file, xhr, formData){
          formData.append("_token","{{csrf_token()}}")
        },
        success: function(file, response){
          photosGallery.push(response.photo_id)
        }
      });
      productGallery = function(){
        document.getElementById('post-photo').value = photosGallery.concat(photos)
      }

      CKEDITOR.replace('textareaDescription',{
        customConfig: 'config.js',
        toolbar: 'simple',
        language: 'fa',
        removePlugins: 'cloudservices, easyimage'
      })
      removeImages = function(id){
        var index = photos.indexOf(id)
        photos.splice(index, 1);
        document.getElementById('updated_photo_' + id).remove();
      }
    </script>

@endsection