@extends('layouts.masterBackend')

@section('title')
    {{  isset($page_article) ? ucfirst($page_article) : __('backend.add-articles') }}
@endsection

@section('content')

  <div class="container-fluid">
    		<div class="row">
  		<div class="col-xs-12">
				<section id="message-banner" class="panel panel-primary">
				<header class="panel-heading">
						<h2>
							{{  isset($page_article) ? ucfirst(__('backend.add').' '.$page_article) : __('backend.add-articles') }}
						</h2>
					</header>
				<div class="panel-body">
          <form action="{{ $route or route('articles.store') }}" method="POST" enctype="multipart/form-data" class="form-horizontal image-form" name="form_blog_create">
            <input type="hidden" name="image">

            {{ csrf_field() }}
            {{ $method or method_field('POST') }}

            <div class="row">
              <div class="col-xs-12">
                @include('backend.errors')
              </div>
            </div>

            {{-- Image upload --}}
            <div class="" style="width: 800px; margin: 0 auto 20px auto;">
              <div class="image-cropper" data-height="287.5" data-width="800" data-exportZoom="2" data-src="{{ isset($article) ? asset($storage_url.'img/article/'.$article->banner) : ''}}">
                <div class="cropit-preview">
                  <div class="caption">
                    <p>@lang('backend.minimum-resolution') 1600x575 px</p>
                  </div>
                </div>

                <div class="controls-wrapper">
                  <div class="rotation-btns">
                    <a class="rotate-ccw-btn"><i class="fa fa-undo"></i></a>
                    <a class="rotate-cw-btn"><i class="fa fa-repeat"></i></a>
                  </div>
                  <div class="slider-wrapper">
                    <i class="fa fa-picture-o" aria-hidden="true"></i>
                    <input type="range" class="cropit-image-zoom-input">
                    <i class="fa fa-picture-o fa-2x" aria-hidden="true"></i>
                  </div>
                </div>

                <label for="cropit-image-input" class="btn btn-primary btn-outlined">@lang('backend.upload')</label>
                <input type="file" class="cropit-image-input" style="display:none"/>

                <button title="@lang('backend.search-on-pixabay')" type="button" class="btn btn-primary btn-outlined js-pixabay-trigger">@lang('backend.search-on-pixabay')</button>

              </div>
            </div>
            {{-- /. Image upload --}}

            {{-- Tags --}}
            <ul class="tag-it m-t-20">
              @isset($article)
                @foreach($article->tags as $tag)
                  <li value="{{ $tag->id }}">{{ $tag->name }}</li>
                @endforeach
              @else
                @foreach(explode(',',old('tags')) as $tag)
                  <li value="">{{ $tag }}</li>
                @endforeach
              @endisset
            </ul>
            {{-- /. Tags --}}


            {{-- Language tab --}}
            <ul class="nav nav-tabs m-t-20">
              @foreach(config('translatable.locales') as $lang => $language)
                <li class="@if($loop->first) active @endif">
                  <a href="#{{ $lang }}" data-toggle="tab">{{ $language }}</a>
                </li>
              @endforeach
            </ul>
            {{-- Language tab --}}

            {{-- Tab content --}}
            <section class="tab-content">

              @foreach(config('translatable.locales') as $lang => $language)

              <div class="tab-pane @if($loop->first) active @endif" id="{{ $lang }}">
              <br>

                <div class="row">

                  {{-- title --}}
                  <div class="form-group">
                    <label for="title" class="col-lg-2 col-md-2 control-label">@lang('backend.title')</label>
                    <div class="col-lg-8 col-md-8 col-xs-12 no-gutter">
                      <input type="text" class="form-control" name="title[{{ $lang }}]"
                        placeholder="@lang('backend.title')" value="{{ isset($article) && $article->hasTranslation($lang) ? $article->translate($lang)->title : old('title.'.$lang) }}">
                    </div>
                  </div>
                  {{-- /. title --}}

                  <div class="form-group">
                    <label for="alt" class="col-lg-2 col-md-2 control-label">@lang('backend.seo')</label>
                    <div class="col-lg-8 col-md-8 col-xs-12 no-gutter">
                      <input type="text" class="form-control" name="alt[{{ $lang }}]"
                        placeholder="@lang('backend.seo')" value="{{ isset($article) && $article->hasTranslation($lang) ? $article->translate($lang)->alt : old('alt.'.$lang) }}">
                    </div>
                  </div>


                  <div class="form-group">
                    <label for="title" class="col-lg-2 col-md-2 control-label">@lang('backend.content')</label>
                    <div class="col-lg-8 col-md-8 col-xs-12 no-gutter">
                      <textarea name="content[{{ $lang }}]" row="10">{{ isset($article) && $article->hasTranslation($lang) ? $article->translate($lang)->content : old('content.'.$lang) }}</textarea>
                    </div>
                  </div>

                </div>


              </div>

              @endforeach

            </section>
            {{-- /. Tab content --}}

            <div class="form-group">
              <div class="col-md-12">
                <button type="submit" class="btn btn-primary btn-sm btn-image-submit">@lang('backend.save')</button>
                <a href="{!! URL::previous() !!}" class="btn btn-default btn-sm">@lang('backend.back')</a>
              </div>
            </div>

          </form>
        </div>
				</section>

			</div>
		</div>

	</div>
@endsection

@section('script')
	<script>
		$(document).ready(function() {
			$('textarea').height('500px')
			var avTags = $.get(route('api-tags'));
			avTags.done(function(data) {
			  $(".tag-it").tagit({
			    availableTags: data,
			    fieldName: "tags",
			    singleField: true,
			    placeholderText: "Tags",
			  })
			})
		})
	</script>
@endsection
