@props(['disabled' => false, 'required' => true, 'title' => '', 'text' => '', 'value' => '', 'name' => ''])

<div class="flex w-full flex-col gap-1 mb-7 @error($name) has_error @enderror">
    @if(isset($title) && $title !== '')
        <label class="{{ $required ? 'required' : '' }} text-gray-600">{{ $title }}</label>
    @endif

    <textarea
        id="editor_{{ $name }}"
        name="{{ $name }}"
        data-editor-name="{{ $name }}"
        {{ $disabled ? 'disabled' : '' }}
        {!! $attributes->merge(['class' => 'input editor summernote-editor']) !!}
        cols="30"
        rows="10"
    >{{ old($name, isset($value) ? $value : null) }}</textarea>

    @error($name)
        <div class="kt-form-message JS_error has-error" style="display:block;color:var(--destructive);">{{ $message }}</div>
    @enderror
    <span class="JS_error has-error" style="display:block;color:var(--destructive);"></span>
</div>

@pushonce('css')
    <link rel="stylesheet" href="{{ asset('assets/vendors/summernote/summernote-lite.min.css') }}">
    <style>
        .note-editor.note-frame {
            border-color: var(--input, #d9dde4);
            border-radius: 10px;
            background: var(--background, #fff);
        }

        .note-editor .note-editing-area .note-editable {
            min-height: 300px;
            background: var(--background, #fff);
            color: var(--foreground, #111827);
        }

        .note-editor .note-editing-area .note-editable ul,
        .note-editor .note-editing-area .note-editable ol {
            margin: 0.5rem 0 !important;
            padding-inline-start: 1.5rem !important;
        }

        .note-editor .note-editing-area .note-editable ul {
            list-style: disc !important;
        }

        .note-editor .note-editing-area .note-editable ul ul {
            list-style: circle !important;
        }

        .note-editor .note-editing-area .note-editable ol {
            list-style: decimal !important;
        }

        .note-editor .note-editing-area .note-editable li {
            display: list-item !important;
        }

        .note-toolbar {
            border-bottom: 1px solid var(--input, #d9dde4);
            background: #f8fafc;
        }
    </style>
@endpushonce

@pushonce('scripts')
    <script src="{{ asset('assets/vendors/summernote/summernote-lite.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/summernote/lang/summernote-ar-AR.min.js') }}"></script>
@endpushonce

@push('scripts')
    <script>
        (function initSummernoteInstance() {
            const editorId = 'editor_{{ $name }}';
            const editorEl = document.getElementById(editorId);
            if (!editorEl || !window.jQuery || !window.jQuery.fn || !window.jQuery.fn.summernote) {
                setTimeout(initSummernoteInstance, 80);
                return;
            }

            const $editor = window.jQuery(editorEl);

            if ($editor.data('summernote')) {
                return;
            }

            const syncTargetSelector = editorEl.getAttribute('data-sync-target');
            const syncTarget = syncTargetSelector ? document.querySelector(syncTargetSelector) : null;

            const syncValue = (content) => {
                editorEl.value = content;
                editorEl.dispatchEvent(new Event('input', { bubbles: true }));
                editorEl.dispatchEvent(new Event('change', { bubbles: true }));

                if (syncTarget) {
                    syncTarget.value = content;
                    syncTarget.dispatchEvent(new Event('input', { bubbles: true }));
                    syncTarget.dispatchEvent(new Event('change', { bubbles: true }));
                }
            };

            $editor.summernote({
                lang: 'ar-AR',
                height: 320,
                placeholder: 'اكتب شيئًا...',
                dialogsInBody: true,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['link', 'table', 'hr']],
                    ['view', ['fullscreen', 'codeview', 'help']],
                ],
                callbacks: {
                    onInit: function () {
                        syncValue($editor.summernote('code'));
                    },
                    onChange: function (contents) {
                        syncValue(contents);
                    },
                },
            });

            @if($disabled)
            $editor.summernote('disable');
            @endif
        })();
    </script>
@endpush