@extends('layouts.admin.app')
@section('css')
@endsection
@section('content')
<!-- BEGIN: Content-->
<div class="app-content content">
  <div class="content-wrapper">
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-left mb-0">{{trans('admin.cms_update')}} </h2>
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('home')}}">{{ trans('common.home') }}</a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{route('cms.index')}}">{{ trans('admin.cms_index') }}</a>
                            </li>
                            <li class="breadcrumb-item active">{{trans('admin.cms_update')}}
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if ($errors->any())
      <div class="alert alert-danger">
        <b>{{trans('common.whoops')}}</b>
        <ul>
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif
     <!-- // Basic multiple Column Form section start -->
    <section id="multiple-column-form">
      <div class="row match-height">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">
              {{trans('admin.'.$cms->cms_data->slug)}}
              </h4>
              <a href="{{route('cms.index')}}" class="btn btn-success">
                  <i class="fa fa-arrow-left"></i>
                  {{ trans('common.back') }}
              </a>
            </div>
            <div class="card-content">
              <div class="card-body">    
                <form id="stateForm" method="POST" action="{{route('cms.update',$cms->id)}}" accept-charset="UTF-8" enctype="multipart/form-data">
                  <input name="_method" type="hidden" value="PUT">
                  @csrf
                   <div class="form-body">
                      <div class="row">
                       
                        <div class="col-md-12">
                          <div class="form-group @error('page_name') ? has-error : ''  @enderror">
                            <label for="page_name" class="content-label">{{trans('admin.page_name')}}<span class="text-danger custom_asterisk">*</span></label>
                            <input class="form-control" minlength="2" maxlength="100" placeholder="{{trans('admin.page_name')}}" name="page_name" type="text" value="{{old('page_name') ? old('page_name') : $cms->page_name}}" required>
                            @if ($errors->has('page_name')) 
                              <strong class="help-block alert-danger">{{ $errors->first('page_name') }}</strong>
                            @endif
                          </div>  
                        </div>
                      </div>
                    </div>
                  <div class="tab-content" style="margin-top: 10px;">
                    
                    <div class="form-group">
                      <label for="content" class="content-label">{{trans('admin.cms_content')}}<span class="text-danger custom_asterisk">*</span></label>
                      <textarea class="form-control" id="editor" placeholder="{{trans('admin.cms_content')}}" name="content" type="text" value="">
                       {{$cms->content}}
                      </textarea>
                      @error('content')
                        <div class="alert alert-danger">{{ $message }}</div>
                      @enderror
                    </div>
                    
                    
                  </div>
                  
                  <div class="modal-footer">
                      <button id="edit_btn" type="submit" class="btn btn-info btn-fill btn-wd">{{trans('common.submit')}}</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

@endsection

@section('js')
</script>
<script src="{{asset('js/ckeditor5/ckeditor.js')}}"></script>
<script src="{{asset('js/ckeditor5/ar.js')}}"></script>
@if($cms->locale == 'en')
<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ),{
    // The UI of the editor as well as its content will be in German.
    image: {
            
             toolbar: [
                'imageStyle:block',
                'imageStyle:side',
                'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
                '|',
                'toggleImageCaption',
                'imageTextAlternative',
               
            ],
          },
           toolbar: [ 'heading','bold', 'italic', 'underline', 'undo', 'redo', 'numberedList', 'bulletedList' ],
           simpleUpload: {
      // The URL that the images are uploaded to.
      uploadUrl: "{{route('upload_image')}}",
 
      // Headers sent along with the XMLHttpRequest to the upload server.
      headers: {
        "X-CSRF-TOKEN": "{{ csrf_token() }}"
        // Authorization: "Bearer <JSON Web Token>"
      }
    },
    language: 'en'
  } )
        .catch( error => {
            console.error( error );
        } );
</script>
@else
<script>

    ClassicEditor
        .create( document.querySelector( '#editor' ),{
          image: {
            
             toolbar: [
                'imageStyle:block',
                'imageStyle:side',
                'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
                '|',
                'toggleImageCaption',
                'imageTextAlternative',
                
            ],
          },
           toolbar: [ 'heading','bold', 'italic', 'underline', 'undo', 'redo', 'numberedList', 'bulletedList' ],
           simpleUpload: {
      // The URL that the images are uploaded to.
      uploadUrl: "{{route('upload_image')}}",
 
      // Headers sent along with the XMLHttpRequest to the upload server.
      headers: {
        "X-CSRF-TOKEN": "{{ csrf_token() }}"
        // Authorization: "Bearer <JSON Web Token>"
      }
    },
   language: 'ar'
       
       
  } )
        .then( editor => {
    // console.log( editor );
  } )
        .catch( error => {
            console.error( error );
        } );
</script>
@endif

@endsection