@extends('layouts.app')
@section('content')
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2> {{ isset($mode) ? $mode : 'Add' }} Article</h2>

                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <br />
                    <form class="form-horizontal form-label-left input_mask" method="post"
                        action="{{ isset($mode) && $mode == 'Edit' ? route('article.content-update') : route('article.content-add') }}"
                        enctype="multipart/form-data">
                        @csrf
                        @if (isset($mode) && $mode == 'Edit')
                            @method('PUT')
                        @endif
                        <div class="item form-group">
                            <textarea class='editor' id="articleEditor" name='module_content'>

                                    @if (isset($htmlContent))
{{ $htmlContent }}
@endif
                                </textarea>
                        </div>
                        <div class="ln_solid"></div>
                        <div class="form-group">
                            <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
                                <input type="hidden" name="article_id" value="{{ $content['iArticleId'] }}">
                                <a href="{{ route('article.index') }}" class="btn btn-primary" type="reset">Cancel</a>
                                <button type="submit" class="btn btn-success">
                                    {{ isset($mode) && $mode == 'Edit' ? 'Save Changes' : 'Create' }}</button>
                            </div>
                        </div>

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




        </div>


    </div>
@endsection
@push('scripts')
    <script src="{{ asset('assets/tinymce/tinymce.min.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            tinymce.init({
                selector: '.editor',
                plugins: 'paste importcss searchreplace autolink autosave directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap emoticons textcolor',
                imagetools_cors_hosts: ['picsum.photos'],
                toolbar: 'undo redo | bold italic underline strikethrough blockquote forecolor backcolor | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
                toolbar_sticky: true,
                toolbar_mode: 'wrap',
                height: 400,
                content_style: "@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Open+Sans&family=Noto+Serif+Devanagari&display=swap&'); body { font-family: 'Open Sans'; } h1,h2,h3,h4,h5,h6 { font-family: 'Open Sans' } blockquote {border: 0;position: relative; background-color: #FEEBDD;border-radius: 10px;padding: 5px 10px;} blockquote span{background-color: transparent !important;}",
                font_formats: "Open Sans=open sans;Noto Serif Devanagari=Noto Sarif Devagari;",
                paste_retain_style_properties: "text-align color text-decoration background-color",
                paste_webkit_styles: 'text-align color text-decoration background-color'
            });
        });
    </script>
@endpush