@extends('layouts.app')
@section('title')
    {{ __('messages.membership_certificate_template.new_template') }}
@endsection
@section('header_toolbar')
    <div class="container-fluid">
        <div class="mb-5 d-md-flex align-items-center justify-content-between">
            <h1 class="mb-0">@yield('title')</h1>
            <div class="mt-4 text-end mt-md-0">
                <a class="btn btn-outline-primary float-end"
                   href="{{ url()->previous() }}">{{ __('messages.common.back') }}</a>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <div class="container-fluid">
        <div class="d-flex flex-column">
            <div class="row">
                <div class="col-12">
                    @include('layouts.errors')
                    <div class="alert alert-danger display-none hide" id="validationErrorsBox"></div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    {{ Form::open(['route' => 'membership-certificate.store', 'id' => 'templateForm', 'name' => 'templateForm', 'method' => 'post', 'files' => true, 'enctype' => 'multipart/form-data']) }}
                    @csrf
                    @method('POST')
                    <div class="mb-5 row gx-10">
                        <div class="col-lg-12">
                            <div class="mb-5">
                                {{ Form::label('name', __('messages.membership_certificate_template.name').':', ['class' => 'form-label mb-3']) }}
                                {{ Form::text('name',null,['class' => 'form-control form-control-solid', 'placeholder' => 'Name', 'required']) }}
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="mb-5">
                                {{ Form::label('content', __('messages.membership_certificate_template.content').':', ['class' => 'form-label mb-3']) }}
                                {{ Form::textarea('content', isset($content) ? $content : null, ['class' => 'form-control form-control-solid mb-3 ckeditor-class', 'placeholder' => 'Template', 'rows' => 4, 'style'=>'height: 100px;',  'id' => 'content']) }}

                                @isset($templateStrings)
                                    <p class="p-3">{{ $templateStrings }}</p>
                                @endisset
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="mb-5">
                                {{ Form::submit(__('messages.common.save'),['class' => 'btn btn-primary me-3']) }}
                            </div>
                        </div>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
{{-- <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script> --}}
<script src="{{ asset('assets/js/ckeditor/ckeditor.js') }}"></script>
<script type="text/javascript" data-turbo-eval="true" data-turbo-track="reload">
    window.editor_options = {
        // enterMode: CKEDITOR.ENTER_BR,
        // shiftEnterMode:CKEDITOR.ENTER_P,
        filebrowserUploadUrl: "{{route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",
        // filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
        // filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token=',
        // filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
        filebrowserUploadMethod: 'form',
        allowedContent: true,
        // htmlEncodeOutput: true,
        on: {
            instanceReady: function( evt ) {
                let editor = evt.editor;
                // editor.setData('');
            }
        }
    };
    /*
    $(window).on('load', function (){
        $( '#content' ).ckeditor();
    });
    */
    document.addEventListener("turbo:load", function() {
        // let content = CKEDITOR.instances.messageArea.getData();
        // CKEDITOR.disableAutoInline = true;
        // [load js]
        // CKEDITOR.scriptLoader.load(['{{ asset('js/app.js') }}'] );
        // [load css]
        CKEDITOR.config.contentsCss  = ['{{ asset('assets/css/third-party.css') }}', '{{ mix('assets/css/page.css') }}', '{{ asset('assets/css/style.css') }}', '{{ asset('assets/css/plugins.css') }}'];
        // CKEDITOR.config.extraPlugins = 'justify';
        // CKEDITOR.config.allowedContent = true;
        // CKEDITOR.editorConfig = function( config ) {
        //     console.log('CKEDITOR.editorConfig', config);
        // }
        for (key in CKEDITOR.instances) { console.log('key', key); CKEDITOR.instances[key].destroy(true); }
        CKEDITOR.replace('content', editor_options);
    });
</script>
@endsection