{{--
    ════════════════════════════════════════════════════════════════════════
    AGREGAR AL FINAL de resources/views/admin/congresos/_form.blade.php
    Pégalo justo antes del último @endif (el del bloque "Configuración avanzada")
    ════════════════════════════════════════════════════════════════════════
--}}

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
(function () {

    // Campos que tendrán editor dual Visual ↔ Raw
    const camposEditor = [
        { tinymceId: 'tinymce_descripcion_corta',   rawId: 'raw_descripcion_corta',   nombre: 'descripcion_corta' },
        { tinymceId: 'tinymce_hero_subtitulo',       rawId: 'raw_hero_subtitulo',       nombre: 'hero_subtitulo' },
        { tinymceId: 'tinymce_seccion1_contenido',   rawId: 'raw_seccion1_contenido',   nombre: 'seccion1_contenido' },
        { tinymceId: 'tinymce_seccion2_contenido',   rawId: 'raw_seccion2_contenido',   nombre: 'seccion2_contenido' },
    ];

    camposEditor.forEach(({ tinymceId, rawId, nombre }) => {
        const btnVisual  = document.getElementById(`btn-visual-${nombre}`);
        const btnRaw     = document.getElementById(`btn-raw-${nombre}`);
        const contVisual = document.getElementById(`cont-visual-${nombre}`);
        const contRaw    = document.getElementById(`cont-raw-${nombre}`);
        const rawTA      = document.getElementById(rawId);
        let modo = 'visual';

        if (!btnVisual) return;

        btnVisual.addEventListener('click', () => {
            const editor = tinymce.get(tinymceId);
            if (editor) editor.setContent(rawTA.value);
            contVisual.style.display = '';
            contRaw.style.display    = 'none';
            btnVisual.classList.add('bg-indigo-600', 'text-white');
            btnVisual.classList.remove('bg-white', 'text-gray-600');
            btnRaw.classList.add('bg-white', 'text-gray-600');
            btnRaw.classList.remove('bg-indigo-600', 'text-white');
            modo = 'visual';
        });

        btnRaw.addEventListener('click', () => {
            const editor = tinymce.get(tinymceId);
            if (editor) rawTA.value = editor.getContent();
            contVisual.style.display = 'none';
            contRaw.style.display    = '';
            btnRaw.classList.add('bg-indigo-600', 'text-white');
            btnRaw.classList.remove('bg-white', 'text-gray-600');
            btnVisual.classList.add('bg-white', 'text-gray-600');
            btnVisual.classList.remove('bg-indigo-600', 'text-white');
            modo = 'raw';
        });

        // Al guardar: sincronizar el valor al textarea original (name="campo")
        document.querySelector('form')?.addEventListener('submit', () => {
            const editor = tinymce.get(tinymceId);
            const original = document.getElementById(nombre);
            if (!original) return;
            if (modo === 'visual' && editor) {
                editor.save();
                original.value = editor.getContent();
            } else {
                original.value = rawTA.value;
            }
        }, { once: true });
    });

    // Inicializar TinyMCE en todos los campos
    tinymce.init({
        selector: '#tinymce_descripcion_corta, #tinymce_hero_subtitulo, #tinymce_seccion1_contenido, #tinymce_seccion2_contenido',
        height: 300,
        menubar: false,
        branding: false,
        promotion: false,
        plugins: ['advlist','autolink','lists','link','charmap','searchreplace','visualblocks','code','table','help','wordcount'],
        toolbar: 'undo redo | blocks | bold italic underline | forecolor | alignleft aligncenter alignright | bullist numlist | link table | removeformat code',
        content_style: 'body { font-family: system-ui, sans-serif; font-size:14px; line-height:1.6; }',
        valid_elements: '*[*]',
        setup(editor) { editor.on('change', () => editor.save()); }
    });

})();
</script>
@endpush