@extends('_layout.layout')

@section('title') Create new article
@endsection

@section('header')
<h1> <a href="{{route('getCompanyDetails',$company->id)}}">{{$company->name}}</a> <small>Create new 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' => ['postCreateArticle',$company->id],'class' => 'form-horizontal']) !!}
          <div class="form-body">
            <div class="form-group">
              <div class="col-md-12">
                <ul id="templates" class="cs-hidden">
                  <li class="template" data-item-id="1"><img width="200" src="/templates/article1/icon.png"></li>
                  <li class="template" data-item-id="2"><img width="200" src="/templates/article2/icon.png"></li>
                  <li class="template" data-item-id="3"><img width="200" src="/templates/article3/icon.png"></li>
                </ul>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12">
                {!! Form::text('title', null, ['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 src='{{asset('assets/js/lightslider.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;
      }
      console.log(xhr.responseText);
      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;
});


$('#templates').lightSlider({
  autoWidth:true,
  pager: false,
  slideMargin: 10,
  loop:false,
  enableDrag:false,
  onSliderLoad: function() {
      $('#templates').removeClass('cs-hidden');
  } 
});

$('.template').on('click', function (e) {
    e.preventDefault();
    $.ajax({url: '/templates/article'+e.currentTarget.dataset.itemId+'/template.html', success: function(result){

      result = result.replace(new RegExp('\/templates\/', 'g') ,window.location.origin+'/templates/');
      tinymce.activeEditor.setContent(result);
    }});
});


</script>

@endsection

@section('page-css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/lightslider.min.css')}}" /> 
<style type="text/css">
  .cs-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
  }

  .template {
    width: 200px;
    cursor: pointer;

  }
</style>
@endsection