@php
    $uuid = 'editor_' . Str::random(10);
        if($params->translate ?? false)
            {
                # test[0][title] transform to test_en[0][title]
                $params->name = str_contains($params->name, '[') ?
                 preg_replace('/^(.*)\[/UA', '$1_'.form_locale().'[', $params->name)
                 : $params->name . '_' . form_locale();
            }
             # test[0][title] transform to test.0.title
            $transformedName = preg_replace('/\[(.*)\]/mU', '.$1', $params->name);

@endphp

@props([
    'label' =>  isset($params->label) && str_starts_with($params->label,'cms.') ? trans($params->label,locale: form_locale()) : $params->label ?? '',
    'name' =>  $params->name ?? '',
   'value' =>  $params->value ?? old($transformedName) ?? '',
    'required' =>  isset($params->required) ? 'required' : '',
    'placeholder' =>  isset($params->placeholder) && str_starts_with($params->placeholder,'cms.') ? trans($params->placeholder,locale: form_locale()) : $params->placeholder ?? '',
    'info' =>  isset($params->info) && str_starts_with($params->info,'cms.') ? trans($params->info,locale: form_locale()) : $params->info ?? false,
   'hasError' => isset($errors) && $errors->has($transformedName) ? 'is-invalid' : '',
    'type' => $params->type ?? 'text' ,
    'style' => $params->view,

    'toolbar' => isset($params->toolbar) &&  $params->toolbar ? $params->toolbar
                 : "['heading','|','fontColor','bold','italic','link','bulletedList','numberedList','blockQuote','insertTable','imageInsert','mediaEmbed','undo','redo']",
])




@if($style == 'horizontal')
    <div class="row fv-row mb-7" >
        <div class="col-md-2 text-md-end" >
            <!--begin::Label-->
            <label class="fs-6 fw-semibold form-label mt-3" >
                <span class="{{$required}}" >{{$label}}</span >
                @if($info)
                    <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="{{$info}}" ></i >
                @endif
            </label >
            <!--end::Label-->
        </div >
        <div class="col-md-10" >
            <!--begin::Input-->
            <textarea class="editor" name="{{$name}}" id="{{$uuid}}" placeholder="{{$placeholder}}">{{$value}}</textarea>
            <div class="fv-plugins-message-container invalid-feedback" >
                @if($hasError)
                    @foreach($errors->get($transformedName) as $message)
                        <div >{{$message}}</div >
                    @endforeach
                @endif
            </div >
            <!--end::Input-->
        </div >
    </div >
@else
    <div class="d-flex flex-column mb-8 fv-row" >
        <!--begin::Label-->
        <label class="d-flex align-items-center fs-6 fw-semibold mb-2" >
            <span class="{{$required}}" >{{$label}}</span >
            @if($info)
                <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="{{$info}}" ></i >
            @endif        </label >
        <!--end::Label-->
        <!--begin::Input-->
        <textarea class="editor" name="kt_docs_ckeditor_classic" id="{{$uuid}}"></textarea>

        <!--end::Input-->
    </div >
@endif








@if($loadScript)
    <script src="{{asset('cms/assets/plugins/custom/ckeditor/ckeditor.js')}}" defer></script>

@endif
<script>
    window.addEventListener('load',function () {
        ClassicEditor
            .create(document.querySelector('#{{$uuid}}'),
                {
                    simpleUpload: {
                        uploadUrl: '{{ route("api.editor-file-upload") }}',
                        name: 'file',
                        withCredentials: true,
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': "{{csrf_token()}}",
                        }
                    },
                    instanceName: '{{$uuid}}',
                    fontColor: {
                        colors: [
                            {
                                color: 'hsl(0, 0%, 0%)',
                                label: 'Black'
                            },
                            {
                                color: 'hsl(0, 0%, 30%)',
                                label: 'Dim grey'
                            },
                            {
                                color: 'hsl(0, 0%, 60%)',
                                label: 'Grey'
                            },
                            {
                                color: 'hsl(0, 0%, 90%)',
                                label: 'Light grey'
                            },
                            {
                                color: 'hsl(0, 0%, 100%)',
                                label: 'White',
                                hasBorder: true
                            },
                            // More colors.
                            // ...
                        ]
                    },
                    toolbar: {
                        items: {!! $toolbar !!}

                    },
                    language: 'az',
                    image: {
                        toolbar: [
                            'imageTextAlternative',
                            'imageStyle:full',
                            'imageStyle:side',
                            'imageStyle:alignLeft',
                            'imageStyle:alignRight',
                        ]
                    },
                    table: {
                        contentToolbar: [
                            'tableColumn',
                            'tableRow',
                            'mergeTableCells'
                        ]
                    },
                    licenseKey: '',
                })
            .then(editor => {
                editor.model.document.on('change:data', () => {
                    document.querySelector('#{{$uuid}}').value = editor.getData();
                });


            })
            .catch(error => {
            });







    })
</script>
{{--
0
:
"heading"
1
:
"|"
2
:
"alignment"
3
:
"bold"
4
:
"italic"
5
:
"link"
6
:
"alignment"
7
:
"bulletedList"
8
:
"numberedList"
9
:
"|"
10
:
"outdent"
11
:
"indent"
12
:
"|"
13
:
"image_upload"
14
:
"blockQuote"
15
:
"insertTable"
16
:
"mediaEmbed"
17
:
"undo"
18
:
"redo"
19
:
"sourceEditing"
20
:
"imageInsert"
21
:
"fontColor"
22
:
"fontSize"
23
:
"|"
24
:
"removeFormat"


--}}