@extends('_layout.layout')

@section('title') Edit article
@endsection

@section('header')
<h1> <a href="{{route('getCompanyDetails',$company->id)}}">{{$company->name}}</a> <small>Edit article</small></h1>
@endsection

@section('content')
@include('_layout.partials.formerror')

<div class="row">
  <div class="col-md-12">
    <div class="portlet box green">
      <div class="portlet-title">
        <div class="caption">
          <i class="list-ul"></i>
          <span class="caption-subject bold uppercase"> Article details </span>
        </div>
      </div>
      <div class="portlet-body form">
        {!! Form::open(['route' => ['postEditArticle',$article->id],'class' => 'form-horizontal']) !!}
          <div class="form-body">
            <div class="form-group">
              <div class="col-md-12">
                {!! Form::text('title', $article->title, ['class' => 'form-control','required' => 'required','placeholder' => 'Article title']) !!}
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-12">
                <textarea id="content" name="content">{!!$article->content!!}</textarea>
              </div>
            </div>
          </div>
          <div class="form-actions">
              <div class="row">
                  <div class="col-md-offset-2 col-md-10">
                      <a href=";" id="saveButton" class="btn green">Save</button>
                      <a href="{{url()->previous()}}" class="btn default">Cancel</a>
                  </div>
              </div>
          </div>
        {!! Form::close() !!}
      </div>
    </div>
  </div>
</div>
     
@endsection


@section('page-script')

<script src='{{asset('assets/tinymce/tinymce.min.js')}}'></script>
<script type="text/javascript">

tinymce.init({
  selector: 'textarea',
  relative_urls: false,
  remove_script_host : false,
  height: 500,
  menubar: false,
  plugins: [
    'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
    'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
    'save table contextmenu directionality emoticons template paste textcolor'
  ],
  toolbar:'undo redo | styleselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | preview ',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css'],
  images_upload_handler: function (blobInfo, success, failure) {
    var xhr, formData;
    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    
    xhr.open('POST', '{{route("uploadArticleImage")}}');
    xhr.setRequestHeader('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'));
    xhr.onload = function() {
      var json;

      if (xhr.status != 200) {
        failure('HTTP Error: ' + xhr.status);
        return;
      }
      json = JSON.parse(xhr.responseText);

      if (!json || typeof json.location != 'string') {
        failure('Invalid JSON: ' + xhr.responseText);
        return;
      }
      success(json.location);
    };
    formData = new FormData();
    formData.append('imageFile', blobInfo.blob(), blobInfo.filename());
    xhr.send(formData);
  }
});



$('#saveButton').on('click', function (e) {
    e.preventDefault();
    if (document.forms[0].checkValidity())
    {
        tinymce.activeEditor.uploadImages(function(success) {
           document.forms[0].submit();
        });
    }
    else
      document.forms[0].reportValidity();

    return false;
});


</script>

@endsection

@section('page-css')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection