@props(['form' => null])

<div class="card border shadow-none mb-4">
    <div class="card-body">
        <div class="d-flex align-items-center gap-2 mb-1">
            <span class="badge bg-label-primary rounded-2 p-2 lh-1"><i class="ti tabler-world-www ti-sm"></i></span>
            <h6 class="mb-0 fw-bold text-uppercase text-primary">{{ __('Marketing & web content') }}</h6>
        </div>
        <p class="text-muted small mb-4 ms-1">
            {{ __('Refine the public description for marketing purposes. This content will be visible on the website.') }}
        </p>

        <label class="form-label">{{ __('Additional information (marketing/web)') }}</label>

        <div wire:ignore class="border rounded overflow-hidden"
            x-data="{
                init() {
                        if (typeof Quill === 'undefined') {
                            let script = document.createElement('script');
                            script.src = 'https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js';
                            script.onload = () => this.initQuill();
                            document.head.appendChild(script);
                        } else {
                            this.initQuill();
                        }
                    },
                    initQuill() {
                        const quill = new Quill($refs.quillEditor, {
                            theme: 'snow',
                            modules: {
                                toolbar: [
                                    [{ 'header': [1, 2, 3, false] }],
                                    ['bold', 'italic', 'underline'],
                                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                                    ['clean']
                                ]
                            }
                        });
                        quill.root.innerHTML = @js($form->additional_information ?? '');
                        quill.on('text-change', () => { @this.set('form.additional_information', quill.root.innerHTML); });
                    }
            }">
            <div x-ref="quillEditor" style="height: 250px;"></div>
        </div>
    </div>
</div>