@csrf
<style>
    .ck-editor__editable_inline {
        min-height: 250px;
    }
</style>
<script src="/assets/js/word.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: 'textarea', // change this value according to your HTML
        toolbar: 'fontsize',
        font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px'
    });
    tinymce.init({
        selector: 'textarea#file-picker',
        plugins: 'image code',
        toolbar: 'undo redo |  image | code',
        /* enable title field in the Image dialog*/
        image_title: true,
        /* enable automatic uploads of images represented by blob or data URIs*/
        automatic_uploads: true,
        /*
          URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
          images_upload_url: 'postAcceptor.php',
          here we add custom filepicker only to Image dialog
        */
        file_picker_types: 'image',
        /* and here's our custom image picker*/
        file_picker_callback: function(cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            /*
              Note: In modern browsers input[type="file"] is functional without
              even adding it to the DOM, but that might not be the case in some older
              or quirky browsers like IE, so you might want to add it to the DOM
              just in case, and visually hide it. And do not forget do remove it
              once you do not need it anymore.
            */

            input.onchange = function() {
                var file = this.files[0];

                var reader = new FileReader();
                reader.onload = function() {
                    /*
                      Note: Now we need to register the blob in TinyMCEs image blob
                      registry. In the next release this part hopefully won't be
                      necessary, as we are looking to handle it internally.
                    */
                    var id = 'blobid' + (new Date()).getTime();
                    var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                    var base64 = reader.result.split(',')[1];
                    var blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);

                    /* call the callback and populate the Title field with the file name */
                    cb(blobInfo.blobUri(), {
                        title: file.name
                    });
                };
                reader.readAsDataURL(file);
            };

            input.click();
        },
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    });
    tinymce.init({
        selector: 'textarea', // change this value according to your HTML
        file_picker_types: 'file image media'
    });
    tinymce.init({
        selector: 'textarea', // change this value according to your HTML
        plugins: 'image',
        menubar: 'insert',
        toolbar: 'image',
        image_caption: true
    });
    tinymce.init({
        selector: 'textarea', // change this value according to your HTML
        plugins: 'image',
        menubar: 'insert',
        toolbar: 'image',
        image_advtab: true
    });
    tinymce.init({
        selector: 'textarea', // change this value according to your HTML
        images_upload_url: 'postAcceptor.php'
    });
</script>

<h1>العربية</h1>
<div class="form-group">
    <label class="form-control-label" for="head_ar">{{ __('Title Arabic') }}</label>
    <textarea id="file-picker" type="text" name="head_ar" id="head_ar" class="form-control">
@if (isset($Abouts))
{!! html_entity_decode($Abouts->head_ar) !!}
@endif
</textarea>
</div>
<div class="form-group">
    <label class="form-control-label" for="desc_ar">{{ __('Description Arabic') }}</label>
    <textarea id="file-picker" type="text" name="desc_ar" id="desc_ar" class="form-control">
@if (isset($Abouts))
{!! html_entity_decode($Abouts->desc_ar) !!}
@endif
</textarea>
</div>


<h1>English</h1>


<div class="form-group">
    <label class="form-control-label" for="head_en">{{ __('Description English') }}</label>
    <textarea id="file-picker" type="text" name="head_en" id="head_en" class="form-control form-control-alternative">
@if (isset($Abouts))
{!! html_entity_decode($Abouts->head_en) !!}
@endif
</textarea>
</div>

<div class="form-group">
    <label class="form-control-label" for="desc_en">{{ __('Description English') }}</label>
    <textarea id="file-picker" type="text" name="desc_en" id="desc_en" class="form-control form-control-alternative">
@if (isset($Abouts))
{!! html_entity_decode($Abouts->desc_en) !!}
@endif
</textarea>
</div>

<div class="form-group">
    <label class="form-control-label" for="image">{{ __('Primary Image') }}</label>
    <input class="form-control" type="file" name="image" id="image">
</div>
@php
if (isset($Abouts)) {
    $url = asset($Abouts->image);
    echo "<img width='200px' height='200px' src='$url'>";
}
@endphp


@php
if (isset($Abouts)) {
    $images = explode(',', $Abouts->images);
    foreach ($images as $image) {
        if (!$image) {
            continue;
        }
        $url = asset($image);
        echo "<img width='200px' height='200px' src='$url'>";
    }
}
@endphp

<script>
    ClassicEditor
        .create(document.querySelector('#editor3'))
        .catch(error => {
            console.error(error);
        });
    ClassicEditor
        .create(document.querySelector('#editor4'))
        .catch(error => {
            console.error(error);
        });
    ClassicEditor
        .create(document.querySelector('#editor1'))
        .catch(error => {
            console.error(error);
        });
    ClassicEditor
        .create(document.querySelector('#editor2'))
        .catch(error => {
            console.error(error);
        });
</script>