@extends('layouts.master')
@section('title',trans('create article'))
@section('header')

@endsection

@section('main')
    <section id="dashboard-analytics">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <form action="{{route('admin.article.store')}}" method="post"
                      enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-content">
                            <div class="card-body p-0 p-md-1">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="title">{{trans('title')}}</label>
                                            <input name="title" type="text" class="form-control"
                                                   id="title" value="{{old('title')}}">
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="image">{{trans('image')}}</label>
                                            <input type="file" name="image">
                                            <p class="text-danger">{{trans('valid dimensions')}} 370px * 220px</p>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="meta_description">{{trans('seo description')}}</label>
                                            <textarea class="form-control" rows="6"
                                                      name="meta_description">{{old('meta_description')}}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="meta_tag">{{trans('seo tag')}}</label>
                                            <textarea name="meta_tag" rows="6"
                                                      class="form-control">{{old('meta_tag')}}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="form-group col-12">
                                        <label for="body">{{trans('description')}}</label>
                                        <textarea class="editor"
                                                  name="body">{{old('body')}}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <input type="submit" class="btn btn-outline-success" value="{{trans('save')}}">
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </section>

@endsection

@section('footer')
    <!-- vednor files -->
    <script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/ckeditor.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/translations/fa.js"></script>

    <script>
        var allEditors = document.querySelectorAll('.editor');
        for (var i = 0; i < allEditors.length; ++i) {
            ClassicEditor
                .create(allEditors[i], {
                    ckfinder: {
                        uploadUrl: `{{route('admin.ckeditor.upload',['_token'=>csrf_token()])}}`
                    }
                })
                .then(editor => {
                    editor.ui.view.editable.element.style.height = '150px';
                })
                .catch(error => {
                    console.error(error);
                });
        }
    </script>
@endsection