@extends('layouts.admin')
@section('page_title')
@parent
ارسال پست جدید
@endsection
@section('head-js')
<style>
.select2-container{
  z-index: 10 !important;
}
.ck-editor__editable {
    min-height: 400px !important;
}
</style>
@stop
@section('main')

  <div class="header">
    <h2>ارسال پست جدید</h2>
    <div class="breadcrumb-wrapper">
      <ol class="breadcrumb">
        <li><a href="/admin/dashboard">پیشخوان</a></li>
        <li><a href="/admin/posts">همه پست ها</a></li>
        <li class="active">ارسال پست جدید</li>
      </ol>
    </div>
    @include('admin.error')
	</div>
    {!! Form::open(['url' => '/admin/posts/addhandle', 'method' => 'post' ,'enctype'=>'multipart/form-data']) !!}
        <div class="row">
            <div class="col-sm-8">
                <div class="panel">
                    <div class="panel-content">
                        <div class="col-sm-6" style="padding-right:0;">
                          <div class="form-group">
                            <label style="font-size:16px;" for="title">عنوان</label>
                            <input type="text" class="form-control input-sm" value="{{old('title')}}" name="title" required>
                          </div>
                        </div>
                        <div class="col-sm-6" style="padding-left:0;">
                          <div class="form-group">
                            <label style="font-size:16px;" for="slug">نامک</label>
                            <input type="text" class="form-control input-sm" value="{{old('slug')}}" name="slug" required>
                          </div>
                        </div>
                        <div class="form-group">
                          <label style="font-size:16px;" for="content">متن پست</label>
                          <div id="myeditor">
                              <textarea class="form-control" id="body" name="body" >{{old('body')}}</textarea>
                            </div>
                        </div>


                          <div class="form-group">
                            <label style="font-size:16px;">خلاصه پست</label>
                              <div id="descr">
                                <textarea class="form-control" name="descr">{{old('descr')}}</textarea>
                              </div>
                          </div>

                    </div>
                </div>
                <div class="panel">
                    <div class="panel-content">
                        <div class="col-sm-12" style="padding-left:0;padding-right: 0;">
                          <div class="form-group">
                            <label style="font-size:16px;">متا عنوان</label>
                            <input type="text" class="form-control" name="metatitle" value="{{old('metatitle')}}">
                          </div>
                        </div>
                        <div class="col-sm-12" style="padding-left:0;padding-right: 0;">
                          <div class="form-group">
                            <label style="font-size:16px;">متا توضیحات</label>
                            <input type="text" class="form-control" name="metadescr" value="{{old('metadescr')}}">
                          </div>
                        </div>

                        <button type="submit" class="btn btn-primary">انتشار پست</button>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">

                <div class="panel panel-default">
                  <div class="panel-heading bg-green" >وضعیت پست</div>
                  <div class="panel-body">
                        <div class="form-group">
                          <label for="status">وضعیت پست را انتخاب کنید</label>
                          <select class="form-control input-sm" id="status" name="status">
                            <option value="1">منتشر شده</option>
                            <option value="0">پیش نویس</option>
                          </select>
                        </div>
                        <div class="form-group">
                            <label> <input type="checkbox" name="feature1" value="1"> جایگاه ویژه</label>
                        </div>
                        <div class="form-group">
                            <label> <input type="checkbox" name="feature2" value="1"> جایگاه دوم</label>
                        </div>    
                          <div class="form-group">
                            <label>مدت زمان تقریبی مطالعه (دقیقه)</label>
                            <input type="text" class="form-control" name="duration" value="{{old('duration')}}">
                          </div>                        
                  </div>
                </div>

                <div class="panel panel-default">
                  <div class="panel-heading bg-green" >دسته بندی ها</div>
                  <div class="panel-body">
                    <section id="first" class="section sec-w">
                    @if(count($postcats)>0)
                        
                            <div class="form-group">
                                <select class="form-control" name="postcats[]" multiple>
                                    @foreach($postcats as $postcat)
                                    <option value="{{$postcat->id}}">{{$postcat->title}}</option>
                                    @endforeach
                                </select>
                            </div>
                    @else
                        <p style="color=#fff; padding:20px 0; text-align:center; font-size:14px; ">هیچ دسته موضوع تعریف نشده است <br> برای تعریف دسته بندی به <a href="/admin/posts/category" target="_blank">این لینک</a> مراجعه کنید</p>
                    @endif
                    </section>

                  </div>
                </div>
                <div class="panel panel-default">
                  <div class="panel-heading bg-green" >برچسب</div>
                  <div class="panel-body">
                    <section id="first" class="section sec-w">
                      <input type="text" id="addtagtext" class="form-control form-white input-sm" placeholder="برچسب جدید را وارد کنید">
                      <span class="btn btn-primary" onclick="addtag()" style="margin-top:5px;">افزودن برچسب</span>
                      <select name="tags[]" class="form-control" id="tag-select" multiple>
                        @foreach($posttags as $posttag)
                          <option value="{{$posttag->id}}">{{$posttag->title}}</option>
                        @endforeach
                      </select>

                    </section>

                  </div>
                </div>
                <div class="panel panel-default">
                  <div class="panel-heading bg-green" >انتخاب محصولات مرتبط</div>
                  <div class="panel-body">
                    <section id="first" class="section sec-w">

                    @if(count($cato)>0)
                      <select name="productcat_id" class="form-control">
                          <option value="">انتخاب کنید</option>
                        @foreach($cato as $cat)
                          <option value="{{$cat->id}}">{{$cat->title}}</option>
                          @if(count($cat->childs))
                            @include('admin.products.catagain',['childs' => $cat->childs])
                          @endif
                        @endforeach
                      </select>
                    @else
                        <p style="color=#fff; padding:20px 0; text-align:center; font-size:14px; ">هیچ دسته موضوع تعریف نشده است <br> برای تعریف دسته بندی به <a href="/admin/products/category" target="_blank">این لینک</a> مراجعه کنید</p>
                    @endif

                    </section>

                  </div>
                </div>                  
	            <div class="panel panel-default">
                  <div class="panel-header bg-green">
                    <h5>بارگذاری تصویر شاخص</h5>
                  </div>
	                <div class="panel-body">
	                    <div id="image-preview" style="	 width: 100%; height: auto; position: relative; overflow: hidden; background-color: inherit; color: inherit; margin: 0 auto;">
							<img src="/no-image-available.jpg" class="default-user-pic img-responsive" style=" width: 100%; height: auto;" id="blah" alt="your image" width="100" height="100" align="middle">
						</div>

					    <div class="input-group">
			                <label class="input-group-btn">
			                    <span class="btn btn-primary" style="border-radius:0; width:100%; display: table; text-align: center; font-family: yekan;">
			                        بارگذاری <input type="file" style="display: none;" multiple  onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])" name="upload">
			                    </span>
			                </label>
			            </div>
                  <p> ابعاد پیشنهادی 400 در 400 پیکسل و حداکثر حجم 1 مگابایت ، پسوند های مجاز jpg , jpeg</p>
	                </div>
	            </div>
              <div class="panel panel-default">
                  <div class="panel-header bg-green">
                    <h5>بارگذاری تصویر هدر</h5>
                  </div>
                  <div class="panel-body">
                    <div class="form-group">

                      <input type="file" name="imagesrc" class="form-control">
<p>تصویر هدر را بارگذاری کنید(اندازه پیشنهادی 400 در 300 پیکسل و حداکثر حجم 1 مگابایت و پسوندهای مجاز jpeg,jpg)</p>
                    </div>
                  </div>
	            </div>
            </div>
        </div>
        {!! Form::close() !!}


@endsection
@section('js')
<script src="{{asset('/assets/plugins/ckeditor5/build/ckeditor.js')}}"></script>
<script src="/assets/plugins/select2/select2.full.min.js"></script>
<script>
      class MyUploadAdapter {
       constructor(loader) {
          // The file loader instance to use during the upload. It sounds scary but do not
          // worry — the loader will be passed into the adapter later on in this guide.
          this.loader = loader;

          // URL where to send files.
          this.url = '{{ route('ckeditor.upload') }}';

          //
       }
       // Starts the upload process.
       upload() {
          return this.loader.file.then(
             (file) =>
                new Promise((resolve, reject) => {
                   this._initRequest();
                   this._initListeners(resolve, reject, file);
                   this._sendRequest(file);
                })
          );
       }
       // Aborts the upload process.
       abort() {
          if (this.xhr) {
             this.xhr.abort();
          }
       }
       // Initializes the XMLHttpRequest object using the URL passed to the constructor.
       _initRequest() {
          const xhr = (this.xhr = new XMLHttpRequest());
          // Note that your request may look different. It is up to you and your editor
          // integration to choose the right communication channel. This example uses
          // a POST request with JSON as a data structure but your configuration
          // could be different.
          // xhr.open('POST', this.url, true);
          xhr.open("POST", this.url, true);
          xhr.setRequestHeader("x-csrf-token", "{{ csrf_token() }}");
          xhr.responseType = "json";
       }
       // Initializes XMLHttpRequest listeners.
       _initListeners(resolve, reject, file) {
          const xhr = this.xhr;
          const loader = this.loader;
          const genericErrorText = `Couldn't upload file: ${file.name}.`;
          xhr.addEventListener("error", () => reject(genericErrorText));
          xhr.addEventListener("abort", () => reject());
          xhr.addEventListener("load", () => {
             const response = xhr.response;
             // This example assumes the XHR server's "response" object will come with
             // an "error" which has its own "message" that can be passed to reject()
             // in the upload promise.
             //
             // Your integration may handle upload errors in a different way so make sure
             // it is done properly. The reject() function must be called when the upload fails.
             if (!response || response.error) {
                return reject(response && response.error ? response.error.message : genericErrorText);
             }
             // If the upload is successful, resolve the upload promise with an object containing
             // at least the "default" URL, pointing to the image on the server.
             // This URL will be used to display the image in the content. Learn more in the
             // UploadAdapter#upload documentation.
             resolve({
                default: response.url,
             });
          });
          // Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
          // properties which are used e.g. to display the upload progress bar in the editor
          // user interface.
          if (xhr.upload) {
             xhr.upload.addEventListener("progress", (evt) => {
                if (evt.lengthComputable) {
                   loader.uploadTotal = evt.total;
                   loader.uploaded = evt.loaded;
                }
             });
          }
       }
       // Prepares the data and sends the request.
       _sendRequest(file) {
          // Prepare the form data.
          const data = new FormData();
          data.append("upload", file);
          // Important note: This is the right place to implement security mechanisms
          // like authentication and CSRF protection. For instance, you can use
          // XMLHttpRequest.setRequestHeader() to set the request headers containing
          // the CSRF token generated earlier by your application.
          // Send the request.
          this.xhr.send(data);
       }
       // ...
    }

    function SimpleUploadAdapterPlugin(editor) {
       editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
          // Configure the URL to the upload script in your back-end here!
          return new MyUploadAdapter(loader);
       };
    }
</script>
<script>ClassicEditor
  .create( document.querySelector( '#body' ), {
    
    licenseKey: '',
    extraPlugins: [SimpleUploadAdapterPlugin],
  })
  .then( editor => {
    window.editor = editor;

    
    
    
  } )
  .catch( error => {
    console.error( 'Oops, something went wrong!' );
    console.error( error );
  } );
</script>
<script>
function addtag(){
  tag = $('#addtagtext').val();
  $.ajax({
    url : '/admin/ajax/addtag',
    method : 'GET',
    data : {tag:tag},
    dataType : 'json',
    success : function(data) {
      $('#tag-select').append('<option value="'+data.id +'">'+tag+'</option>');
      $('#addtagtext').val('');
    },
    error : function(data) {
      alert('خطایی رخ داده است مجددا تلاش نمائید');
    }
  });
}
</script>
@stop