{{--
  Quill 1.x (BSD-3-Clause) – free, client-side only, loaded from jsDelivr CDN.
  Expects: $initialHtml (string) – raw HTML for the editor
--}}
@php
    $initialHtml = $initialHtml ?? '';
@endphp

<textarea name="content" id="news-content-input" rows="1" class="sr-only" aria-hidden="true">{{ $initialHtml }}</textarea>
<div id="news-quill-editor" class="news-quill-editor rounded-lg border border-gray-300 dark:border-dark-600 bg-white dark:bg-dark-900 min-h-[300px] overflow-hidden"></div>

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet">
    <style>
        .news-quill-editor .ql-toolbar {
            border-color: rgb(209 213 219) !important;
            border-radius: 0.5rem 0.5rem 0 0;
            background: rgb(249 250 251);
        }
        .dark .news-quill-editor .ql-toolbar {
            border-color: rgb(71 85 105) !important;
            background: rgb(30 41 59);
        }
        .dark .news-quill-editor .ql-toolbar .ql-stroke {
            stroke: rgb(203 213 225);
        }
        .dark .news-quill-editor .ql-toolbar .ql-fill {
            fill: rgb(203 213 225);
        }
        .dark .news-quill-editor .ql-toolbar .ql-picker-label {
            color: rgb(203 213 225);
        }
        .dark .news-quill-editor .ql-toolbar button:hover .ql-stroke,
        .dark .news-quill-editor .ql-toolbar button.ql-active .ql-stroke {
            stroke: rgb(96 165 250);
        }
        .dark .news-quill-editor .ql-toolbar button:hover .ql-fill,
        .dark .news-quill-editor .ql-toolbar button.ql-active .ql-fill {
            fill: rgb(96 165 250);
        }
        .news-quill-editor .ql-container {
            border-color: rgb(209 213 219) !important;
            border-radius: 0 0 0.5rem 0.5rem;
            font-size: 1rem;
            min-height: 240px;
        }
        .dark .news-quill-editor .ql-container {
            border-color: rgb(71 85 105) !important;
            background: rgb(15 23 42);
            color: rgb(241 245 249);
        }
        .dark .news-quill-editor .ql-editor.ql-blank::before {
            color: rgb(100 116 139);
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var textarea = document.getElementById('news-content-input');
            var mount = document.getElementById('news-quill-editor');
            if (!textarea || !mount || typeof Quill === 'undefined') return;

            var quill = new Quill('#news-quill-editor', {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ header: [1, 2, 3, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ list: 'ordered' }, { list: 'bullet' }],
                        ['blockquote', 'clean']
                    ]
                },
                placeholder: @json(__('Write your article…'))
            });

            var initial = textarea.value || '';
            if (initial.trim() !== '') {
                quill.root.innerHTML = initial;
            }

            var form = textarea.closest('form');
            if (form) {
                form.addEventListener('submit', function () {
                    textarea.value = quill.root.innerHTML;
                });
            }
        });
    </script>
@endpush
