@props([
    'name',
    'label' => 'Cuerpo del Texto',
    'required' => false,
    'placeholder' => 'Escriba el contenido aquí...',
    'height' => 300
])

{{-- CSS Summernote (Soportado nativamente por AdminLTE Bootstrap 4) --}}
@pushonce('css')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <style>
        .note-editor.note-frame .note-editing-area .note-editable {
            background-color: #fff;
        }
    </style>
@endpushonce

<div class="form-group">
    @if($label)
        <label for="{{ $name }}" class="font-weight-bold text-dark small text-uppercase" style="letter-spacing: 0.5px;">
            {{ $label }}
            @if($required) <span class="text-danger" title="Campo obligatorio">*</span> @endif
        </label>
    @endif

    <div class="shadow-sm">
        <textarea 
            id="{{ $name }}" 
            name="{{ $name }}" 
            class="summernote-editor @error($name) is-invalid @enderror" 
            {{ $required ? 'required' : '' }}
            {{ $attributes }}
        >{{ old($name, $slot) }}</textarea>
    </div>

    @error($name)
        <span class="text-danger d-block mt-1 font-weight-bold small" role="alert">
            <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
        </span>
    @enderror
</div>

{{-- JS Summernote --}}
@pushonce('js')
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/lang/summernote-es-ES.min.js"></script>
@endpushonce

@push('js')
<script>
    $(document).ready(function() {
        $('#{{ $name }}').summernote({
            lang: 'es-ES',
            placeholder: '{{ $placeholder }}',
            height: {{ $height }},
            tabsize: 2,
            toolbar: [
                ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            // Forzar que Laravel detecte si el editor quedó vacío a nivel HTML repitiendo campos
            callbacks: {
                onChange: function(contents, $editable) {
                    // Si el editor está realmente vacío (incluso de saltos de línea fantasma <p><br></p>)
                    if ($('#{{ $name }}').summernote('isEmpty')) {
                        $('#{{ $name }}').val('');
                    } else {
                        $('#{{ $name }}').val(contents);
                    }
                }
            }
        });
    });
</script>
@endpush