@push('scripts')
    <script src="{{ url('js/ckeditor5.js') }}"></script>
@endpush

@props([
    'name' => '',
    'label' => '',
    'required' => false,
    'value' => '',
])

@if ($label == '')
    @php
        $label = str_replace('_', ' ', $name);
        $label = preg_split('/(?=[A-Z])/', $label);
        $label = implode(' ', $label);
        $label = ucwords(strtolower($label));
    @endphp
@endif

<div wire:ignore class="mt-5">
    @if ($label !== 'none')
        <label for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">
            {{ $label }}
            @if ($required)
                <span aria-hidden="true" class="error">*</span>
            @endif
        </label>
    @endif

    <textarea
        x-data
        x-init="
            ClassicEditor
                .create($refs.editor, editorConfig = { toolbar: { items: ['undo', 'redo', '|', 'bold', 'italic', '|', 'link'] }})
                .then(editor => {
                    editor.setData(@this.get('{{ $name }}')); // Zet bestaande HTML in editor

                    editor.model.document.on('change:data', () => {
                        @this.set('{{ $name }}', editor.getData()); // Livewire ontvangt HTML
                    });
                })
                .catch(error => {
                    console.error(error);
                });
        "
        x-ref="editor"
        wire:ignore
        id="{{ $name }}"
        style="display: none;" {{-- editor maakt eigen UI --}}
    >
        {{ $value }}
    </textarea>
</div>

@error($name)
    <p class="error" aria-live="assertive">{{ $message }}</p>
@enderror