@props([
    'name',
    'id' => null,
    'value' => '',
    'label' => null,
    'placeholder' => 'Write content here...',
    'height' => '220px',
    'toolbar' => 'standard',
    'required' => false,
])

@php
    $editorId = $id ?? 'rich-editor-'.preg_replace('/[^a-z0-9_-]/i', '-', $name);
    $inputId = $editorId.'-input';
    $content = old($name, $value);
@endphp

<div {{ $attributes->merge(['class' => 'rich-editor-field mb-3']) }}>
    @if ($label)
        <label for="{{ $editorId }}" class="form-label">
            {{ $label }}
            @if ($required)
                <span class="text-danger">*</span>
            @endif
        </label>
    @endif

    <div
        id="{{ $editorId }}"
        class="rich-editor @error($name) is-invalid @enderror"
        data-rich-editor
        data-input-id="{{ $inputId }}"
        data-placeholder="{{ $placeholder }}"
        data-toolbar="{{ $toolbar }}"
        style="min-height: {{ $height }};"
    >{!! $content !!}</div>

    <input
        type="hidden"
        name="{{ $name }}"
        id="{{ $inputId }}"
        value="{{ $content }}"
        @if($required) required @endif
    >

    @error($name)
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>