@pushOnce('css')
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
@endPushOnce

@pushOnce('scripts')
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="https://unpkg.com/quill-html-edit-button@2.2.7/dist/quill.htmlEditButton.min.js"></script>
@endPushOnce

@props(['name', 'id', 'defaultValue'])
<div {{ $attributes->merge(['class' => '']) }}>
    <div id="{{ $id }}" class="h-[200px] prose"></div>
    <input type="hidden" name="{{ $name }}" id="quill-editor-area-{{ $name }}"
        value="{!! $defaultValue !!}" />

    @push('scripts')
        <script defer>
            document.addEventListener('DOMContentLoaded', () => {
                if (document.getElementById('{{ $id }}')) {

                    Quill.register("modules/htmlEditButton", htmlEditButton);

                    const toolbarOptions = [
                        [{
                            'header': [2, 3, false]
                        }],
                        ['bold', 'italic'],
                        ['link'],
                        [{
                            'list': 'ordered'
                        }, {
                            'list': 'bullet'
                        }],
                        [{
                            'script': 'super'
                        }]
                    ];

                    const editor = new Quill('#{{ $id }}', {
                        modules: {
                            toolbar: toolbarOptions,
                            clipboard: {
                                matchVisual: false
                            },
                            htmlEditButton: {}
                        },
                        theme: 'snow'
                    });
                    const quillEditor = document.getElementById('quill-editor-area-{{ $name }}');

                    // Set default value if it's not empty
                    const defaultValue = quillEditor.value.trim();
                    if (defaultValue) {
                        editor.clipboard.dangerouslyPasteHTML(defaultValue);
                    }

                    // Sync Quill with the hidden input
                    editor.on('text-change', function() {
                        quillEditor.value = editor.root.innerHTML;
                    });

                    quillEditor.addEventListener('input', function() {
                        editor.root.innerHTML = quillEditor.value;
                    });
                }
            });
        </script>
    @endpush
</div>