@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/club-gifts/addhandle', 'method' => 'post' ,'enctype'=>'multipart/form-data']) !!}
        <div class="row">
            <div class="col-sm-8">
                <div class="panel">
                    <div class="panel-content">
                          <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 class="form-group">
                          <label style="font-size:16px;" for="result">متن قابل نمایش بعد از خرید پاداش</label>
                          <div id="myeditor">
                              <textarea class="form-control" id="result" name="result" >{{old('result')}}</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>
                <button type="submit" class="btn btn-dark">ذخیره پاداش</button>
            </div>

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

                <div class="panel panel-default">
                  <div class="panel-heading bg-dark" >وضعیت پاداش</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>
                </div>

                <div class="panel panel-default">
                  <div class="panel-heading bg-dark" >دسته بندی ها</div>
                  <div class="panel-body">
                    <section id="first" class="section sec-w">
                    @if(count($cats)>0)
                        
                            <div class="form-group">
                                <select class="form-control" name="clubcat_id">
                                    @foreach($cats as $cat)
                                    <option value="{{$cat->id}}">{{$cat->title}}</option>
                                    @endforeach
                                </select>
                            </div>
                    @endif
                    </section>

                  </div>
                </div>

	            <div class="panel panel-default">
                  <div class="panel-header bg-dark">
                    <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-dark" 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>
        </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( '#result' ), {
    
    licenseKey: '',
    extraPlugins: [SimpleUploadAdapterPlugin],
  })
  .then( editor => {
    window.editor = editor;

    
    
    
  } )
  .catch( error => {
    console.error( 'Oops, something went wrong!' );
    console.error( error );
  } );
</script>
@stop