@extends('layouts.app', [
    'class' => '',
    'elementActive' => 'articles'
])

@section('content')
{{-- @dd($article) --}}
<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h2>Create an Article</h2>
        </div>
        <div class="card-body">
        @csrf
        <form action="{{ isset($article) ? route('admin.articles.update', $article) : route('admin.articles.store') }}" id="main-form" method="POST" enctype="multipart/form-data">
          @csrf
          @if (isset($article))
            <input type="hidden" name="_method" value="PUT">
          @endif
          <ul class="nav nav-tabs">
            <li class="nav-item">
              <a href="#" class="nav-link bg-aqua-active" id="en">EN</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link bg-aqua-active" id="my">MY</a>
            </li>
          </ul>

          <div class="card">
            <div class="card-body" id="english-form">
              <div class="form-group required">
                <label class="required" for="en_title">Title</label>
                <input class="form-control" type="text" name="en_title" id="en_title" value="{{ isset($article) ? $article->translate('en')->title : old('en_title') }}" required>
                {!! $errors->first('en_title', '<span class="help-block" style="color:red">:message</span>') !!}
              </div>

              <div class="form-group green-border-focus required">
                <label class="required" for="body">Body</label><br>
                <textarea class="form-control editor" id="en-editor" name="en_body">{{ isset($article) ? $article->translate('en')->body : old('en_body')}}</textarea>
                {{-- <textarea class="form-control" name="en_body" id="en_body" rows="3">{{ isset($article) ? $article->translate('en')->body : old('en_body')}}</textarea> --}}
                {!! $errors->first('en_body', '<span class="help-block" style="color:red">:message</span>') !!}
              </div>
              <hr>
            </div>

            <div class="card-body d-none" id="myanmar-form">
              <div class="form-group required">
                <label class="required" for="my_title">Burmese Title</label>
                <input class="form-control" type="text" name="my_title" id="my_title" value="{{ isset($article) ? $article->translate('my')->title : old('my_title') }}" required>
                {!! $errors->first('my_title', '<span class="help-block" style="color:red">:message</span>') !!}
              </div>
              <div class="form-group green-border-focus required">
                <label class="required" for="my_body">Burmese Body</label><br>
                <textarea class="form-control editor" id="my-editor" name="my_body">{{ isset($article) ? $article->translate('my')->body : old('my_body')}}</textarea>
                {{-- <textarea class="form-control" name="my_body" id="my_body" rows="3">{{ isset($article) ? $article->translate('my')->body : old('my_body')}}</textarea> --}}
                {!! $errors->first('my_body', '<span class="help-block" style="color:red">:message</span>') !!}
              </div>
              <hr>
            </div>

            <div class="card-body">      
              <div class="form-group required" style="min-height: 50px;">
                <label class="required" for="cover_image">Cover Image</label>
                <input type="file" name="cover_image" style="opacity: 1;" required />
                @if (isset($article->cover_image))
                  <a target="_blank" href="/images/news_images/{{ $article->cover_image}}"><img class="img-fluid" src="/images/news_images/{{ $article->cover_image }}" alt="image-{{ $article->id }}" /></a>
                  {{-- <a onclick="return confirm('Are you sure you want to delete?')" href="/">Remove</a> --}}
                @endif
                {!! $errors->first('cover_image', '<span class="help-block" style="color:red">:message</span>') !!}
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="float-right">                                                
              <a href="{{ route('admin.articles.index') }}" class="btn btn-white btn-sm">Cancel</a>
              <input type="submit" id="submit" class="btn btn-primary" value="{{ isset($article) ? 'Update' : 'Create' }}">
            </div>
          </div>
        </form>


        </div>
      </div>
    </div>
  </div>
</div>
@stop


@push('scripts')
{{-- <script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script> --}}
<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script>

  // var editor_config = {
  //     path_absolute : "/",
  //     selector: 'textarea.editor',
  //     relative_urls: false,
  //     plugins: [
  //       "advlist autolink lists link image charmap print preview hr anchor pagebreak",
  //       "searchreplace wordcount visualblocks visualchars code fullscreen",
  //       "insertdatetime media nonbreaking save table directionality",
  //       "emoticons template paste textpattern"
  //     ],
  //     toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
  //     file_picker_callback : function(callback, value, meta) {
  //       var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
  //       var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
  
  //       var cmsURL = editor_config.path_absolute + 'laravel-filemanager?editor=' + meta.fieldname;
  //       if (meta.filetype == 'image') {
  //         cmsURL = cmsURL + "&type=Images";
  //       } else {
  //         cmsURL = cmsURL + "&type=Files";
  //       }
  
  //       tinyMCE.activeEditor.windowManager.openUrl({
  //         url : cmsURL,
  //         title : 'Filemanager',
  //         width : x * 0.8,
  //         height : y * 0.8,
  //         resizable : "yes",
  //         // close_previous : "no",
  //         onMessage: (api, message) => {
  //           callback(message.content);
  //         }
  //       });
  //     }
  // };
  
  // tinymce.init(editor_config);
  var options = {
    filebrowserUploadUrl: "{{ route('admin.upload', ['_token' => csrf_token()]) }}",
    filebrowserUploadMethod: 'form'
  };

  CKEDITOR.replace('en-editor', options);
  CKEDITOR.replace('my-editor', options);

  let $englishForm = $('#english-form');
  let $englishLink = $('#en');
  let $myanForm = $('#myanmar-form');
  let $myanLink = $('#my');

  $englishLink.click(function() {
    $englishLink.addClass('bg-aqua-active');
    $englishForm.removeClass('d-none');
    $myanLink.removeClass('bg-aqua-active');
    $myanForm.addClass('d-none');
  });
  
  $myanLink.click(function() {
    $englishLink.removeClass('bg-aqua-active');
    $englishForm.addClass('d-none');
    $myanLink.addClass('bg-aqua-active');
    $myanForm.removeClass('d-none');
  });

  // Error checks
  function checkForm() {
    // let form = document.querySelector('#main-form');
    let submitBtn = document.querySelector('#submit');
    submitBtn.addEventListener("click", function(e) {
      // e.preventDefault();
      let enTitle = document.getElementById("en_title");
      let myTitle = document.getElementById("my_title");
      console.log(myTitle);
      if(myTitle.value.length == 0 && enTitle.value.length != 0) {
        console.log("empty");
        $englishLink.removeClass('bg-aqua-active');
        $englishForm.addClass('d-none');
        $myanLink.addClass('bg-aqua-active');
        $myanForm.removeClass('d-none');
      }
    })
  }
  window.addEventListener("load", checkForm());

</script>
@endpush