@props([
    'name',
    'label',
    'value' => null,
    'required' => false,
    'help' => null,
    'placeholder' => null,
    'height' => 300
])

<div class="form-group input-with-label">
    <label for="{{ $name }}" class="form-label fw-semibold">
        {{ $label }}
        @if($required)
            <span class="text-danger ms-1">*</span>
        @endif
        @if($help)
            <i class="fas fa-info-circle ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $help }}"></i>
        @endif
    </label>

    <textarea
        id="{{ $name }}"
        name="{{ $name }}"
        class="form-control tinymce-editor @error($name) is-invalid @enderror"
        data-height="{{ $height }}"
        placeholder="{{ $placeholder }}"
        {{ $required ? 'required' : '' }}
    >{{ old($name, $value) }}</textarea>

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

    @if($help && !$errors->has($name))
        <div class="form-text text-muted">{{ $help }}</div>
    @endif
</div>

<style>

.tinymce-editor {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tinymce-editor:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.tinymce-editor.is-invalid {
    border-color: var(--bs-danger);
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-danger);
}

.form-text {
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-gray-600);
}

.tox .tox-editor-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.tox .tox-toolbar {
    background: var(--bs-gray-50);
}

.tox .tox-menubar + .tox-toolbar {
    border-top: 1px solid var(--bs-border-color);
}
</style>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof tinymce !== 'undefined') {
        tinymce.init({
            selector: '.tinymce-editor',
            height: 300,
            menubar: false,
            plugins: [
                'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                'insertdatetime', 'media', 'table', 'help', 'wordcount'
            ],
            toolbar: 'undo redo | blocks | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
            content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; }',
            branding: false,
            resize: true,
            setup: function (editor) {
                editor.on('change', function () {
                    editor.save();
                });
            }
        });
    }
});
</script>
@endpush