@extends('layouts.admin.app')
@section('title', 'Article Management')
@section('content')
<div class="nk-content">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">{{ __('labels.article_management') }}</h3>
                            <div class="nk-block-des text-soft">
                                <!-- breadcrumb @s -->
                                <nav>
                                    <ul class="breadcrumb breadcrumb-arrow">
                                        <li class="breadcrumb-item"><a
                                                href="{{route('admin.dashboard')}}">{{ __('labels.dashboard') }}</a>
                                        </li>
                                        <li class="breadcrumb-item"><a
                                            href="{{route('article.index')}}">{{ __('labels.article_list') }}</a>
                                        </li>
                                        <li class="breadcrumb-item active">{{ (!empty($article))? __('labels.edit') :  __('labels.add') }}  {{ __('labels.article') }}
                                        </li>
                                    </ul>
                                </nav>
                                <!-- breadcrumb @e -->
                            </div>
                        </div><!-- .nk-block-head-content -->

                    </div><!-- .nk-block-between -->
                </div><!-- .nk-block-head -->
                <div class="nk-block">
                    <div class="card card-bordered">
                        <div class="card-inner">
                            
                            <form id="articleAddEditFrm" action="{{ !empty($article) ? route('article.update', $article->id ):  route('article.store') }}" method="post" enctype='multipart/form-data'>            
                                {{csrf_field()}}
                                    <input name="_method" type="hidden" value="{{!empty($article)?'PUT':'POST'}}">
                                    <input type="hidden" name="id" id="article_id" value="{{!empty($article)? $article->id : '' }}" />
                                    <div class="row gy-4">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label">{{ __('labels.category') }}</label>
                                                <div class="form-control-wrap">
                                                    <select name="category_id[]" aria-describedby="artCategory-error" multiple id="artCategory" class="filter form-select form-control" data-placeholder="{{ __('labels.select') }} {{ __('labels.category') }}">
                                                        @foreach($category as $categories)
                                                        <option {{ (!empty($article) && in_array($categories->id, $article->articleCategories->pluck('category_id')->toArray()) ? "selected" : '') }} value="{{ $categories->id }}">{{ $categories->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <span id="artCategory-error" class="help-block error-help-block"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label">{{ __('labels.title') }}</label>
                                                <div class="form-control-wrap">
                                                    <input name="title" type="text" value="{{!empty($article)? $article->title : null}}" class="form-control" placeholder="{{ __('labels.title') }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row gy-4">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label">{{ __('labels.keyword') }}</label>
                                                
                                                <div class="form-control-wrap">
                                                    <textarea name="keywords" id="tag-input" class="form-control" aria-describedby="keywords-error"></textarea>
                                                </div>
                                                <small>{{ __('labels.keyword_note') }}</small><br>
                                                <span id="keywords-error" class="help-block error-help-block"></span>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6">    
                                            <div class="form-group">
                                                <label class="form-label">{{ __('labels.article') }} {{ __('labels.image') }} <em class="text-danger">(Image size 800*450 can be uploaded)</em></label>
                                                <div class="uploadPhoto position-relative">
                                                    <div class="img-box overflow-hidden w-100 h-100 imgBox">
                                                        <img src="{{!empty($article)? getImageUrl($article->article_image, 'article_image'):'' }}" class="img-fluid" alt="user-img"
                                                            class="img-fluid border article_image" id="imagePreview" onerror="this.src='{{asset('assets/images/placeholder.jpg')}}';">
                                                    </div>
                                                    <label
                                                        class="mb-0 d-flex align-items-center justify-content-center position-absolute overflow-hidden imgBox"
                                                        for="uploadImage">
                                                        <input data-width-height="800x450" type="file" id="uploadImage" class="imgBox" onchange="setImage(this,$(this),'article_image');"  data-accept-file="{{ config('constants.article_image.acceptType') }}" data-preview-id="imagePreview" data-base64-id="uploadImageBase64" accept="{{ config('constants.article_image.acceptType') }}">
                                                        <input aria-describedby="uploadImageBase64-error" type="hidden" name="article_image" id="uploadImageBase64">
                                                        <em class="icon ni ni-camera-fill"></em> 
                                                    </label>
                                                </div>
                                                <span id="uploadImageBase64-error" class="help-block error-help-block"></span>
                                            </div>
                                        </div>
                                    </div>
                                 
                                    <div class="form-group">
                                        <label class="form-label">{{ __('labels.short') }} {{ __('labels.description') }}</label>
                                        <div class="form-control-wrap">
                                            <textarea rows="2" id="short_description" aria-describedby="short_description-error" style="min-height: auto;" cols="200" maxlength="180" name="short_description" class="short_description form-control">{{!empty($article)? $article->short_description : ''}}</textarea>
                                            <div class="shortDescription_count" id="msgCounter">0/180</div>
                                        </div>
                                        <small>{{ __('labels.short_desc_note') }}</small><br>
                                        <span id="short_description-error" class="help-block error-help-block"></span>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">{{ __('labels.description') }}</label>
                                        <div class="form-control-wrap">
                                            <textarea name="description" id="articleDescription" aria-describedby="articleDescription-error" class="article_description">{{!empty($article)? $article->description : ''}}</textarea>
                                        </div>
                                        <span id="articleDescription-error" class="help-block error-help-block"></span>
                                    </div>
                    
                                    <div class="form-group">
                                        <label class="form-label">{{ __('labels.table_of_content') }}</label>
                                        <div class="form-control-wrap">
                                            <textarea name="toc" aria-describedby="toc-error" id="articleToc" class="article_toc">{{!empty($article)? $article->toc : ''}}</textarea>
                                            <div class="articleToc-error"></div>
                                        </div>
                                        <span id="articleToc-error" class="help-block error-help-block"></span>
                                    </div>
                                    <div class="form-group text-right">
                                        <button id="articleBtn" class="btn btn-primary mr-1">{{ !empty($article)? __('labels.update') : __('labels.save') }}</button>
                                        <a href="{{ route('article.index') }}"class="btn btn-light">{{ __('labels.cancel') }}</a>
                                    </div>
                                </form>
                        </div><!-- .card-inner -->
                    </div>
                </div><!-- .nk-block -->
            </div>
        </div>
    </div>
</div>
<!-- Add Edit Article -->
@include('admin.image-cropper-modal')
@if (!empty($article))
{!! JsValidator::formRequest('App\Http\Requests\Admin\updateArticleRequest','#articleAddEditFrm')->ignore("[contenteditable='true']"); !!}
@else
{!! JsValidator::formRequest('App\Http\Requests\Admin\ArticleRequest','#articleAddEditFrm')->ignore("[contenteditable='true']"); !!}
@endif 
<script>
var keywordData = [];
</script>

@endsection
@push('scripts')
<script src="https://cdn.tiny.cloud/1/{{ config('services.tinymce.tinymce_key') }}/tinymce/6/tinymce.min.js"></script>
<script type="text/javascript" src="{{asset('assets/js/admin/article/article_keyword.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/admin/article/article.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/admin/cropper/image-cropper.js')}}"></script>
@endpush