<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames((['name', 'value' => '', 'id' => null, 'placeholder' => 'Write something awesome...']));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter((['name', 'value' => '', 'id' => null, 'placeholder' => 'Write something awesome...']), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

<?php
$id = $id ?? $name . '_' . uniqid();
?>

<div x-data="{
        content: <?php echo \Illuminate\Support\Js::from(old($name, $value))->toHtml() ?>,
        quill: null,
        init() {
            this.quill = new Quill($refs.quillEditor, {
                theme: 'snow',
                placeholder: '<?php echo e($placeholder); ?>',
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'color': [] }, { 'background': [] }],
                        ['link', 'clean']
                    ]
                }
            });

            // Set initial content
            if (this.content) {
                this.quill.root.innerHTML = this.content;
            }

            // Listen for text changes to update the hidden input
            this.quill.on('text-change', () => {
                this.content = this.quill.root.innerHTML === '<p><br></p>' ? '' : this.quill.root.innerHTML;
            });
        }
    }" 
    class="w-full relative <?php $__errorArgs = [$name];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
    wire:ignore>
    
    <!-- Hidden input to store the actual HTML value for form submission -->
    <input type="hidden" name="<?php echo e($name); ?>" id="<?php echo e($id); ?>" x-model="content">

    <!-- The actual Quill editor container -->
    <div x-ref="quillEditor" class="bg-white rounded-xl shadow-sm border border-slate-200" style="min-height: 200px;"></div>
    
    <?php $__errorArgs = [$name];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
        <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p>
    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
</div>

<style>
/* Custom overrides to make Quill match our Tailwind inputs */
.ql-toolbar.ql-snow {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    border-color: #e2e8f0;
    background-color: #f8fafc;
    padding: 0.75rem;
}
.ql-container.ql-snow {
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    border-color: #e2e8f0;
    font-family: inherit;
    font-size: 1rem;
}
.ql-editor {
    min-height: 200px;
    padding: 1rem;
}
.ql-editor.ql-blank::before {
    color: #94a3b8;
    font-style: normal;
}
</style>
<?php /**PATH C:\xampp\htdocs\ecs\resources\views/components/quill-editor.blade.php ENDPATH**/ ?>