@csrf
<div class="space-y-6">
    <div>
        <x-input-label for="congreso_id" value="Congreso" />
        <select id="congreso_id" name="congreso_id" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500" required>
            <option value="">Selecciona un congreso</option>
            @foreach($congresos as $congreso)
                <option value="{{ $congreso->id }}" @selected(old('congreso_id', $plantilla->congreso_id ?? '') == $congreso->id)>
                    {{ $congreso->nombre }}
                </option>
            @endforeach
        </select>
        <x-input-error class="mt-2" :messages="$errors->get('congreso_id')" />
    </div>

    <input type="hidden" name="tipo" value="{{ $tipo }}">

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <x-input-label for="nombre_plantilla" value="Nombre de la plantilla" />
            <x-text-input id="nombre_plantilla" name="nombre_plantilla" type="text" class="mt-1 block w-full" :value="old('nombre_plantilla', $plantilla->nombre_plantilla ?? '')" required />
            <x-input-error class="mt-2" :messages="$errors->get('nombre_plantilla')" />
        </div>
        <div>
            <x-input-label for="asunto_email" value="Asunto del correo" />
            <x-text-input id="asunto_email" name="asunto_email" type="text" class="mt-1 block w-full" :value="old('asunto_email', $plantilla->asunto_email ?? '')" required />
            <x-input-error class="mt-2" :messages="$errors->get('asunto_email')" />
        </div>
    </div>

     <div>

        <div class="flex items-center justify-between mb-1">

            <x-input-label for="contenido_html" value="Contenido del correo (HTML opcional)" />

            <span class="inline-flex rounded-lg border border-gray-300 overflow-hidden text-xs font-semibold">

                <button type="button" id="btn-visual-contenido_html" class="px-3 py-1 bg-indigo-600 text-white">Visual</button>

                <button type="button" id="btn-raw-contenido_html" class="px-3 py-1 bg-white text-gray-600">&lt;/&gt; HTML</button>

            </span>

        </div>

       

        <div id="cont-visual-contenido_html">

            <textarea id="contenido_html" name="contenido_html" rows="12" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" required>{{ old('contenido_html', $plantilla->contenido_html ?? getDefaultRecordatorioContent($tipo)) }}</textarea>

        </div>

       

        <div id="cont-raw-contenido_html" style="display:none">

            <textarea id="raw_contenido_html" rows="12" class="block w-full border border-gray-300 rounded-md shadow-sm font-mono text-sm p-3">{{ old('contenido_html', $plantilla->contenido_html ?? getDefaultRecordatorioContent($tipo)) }}</textarea>

        </div>

       

        <p class="mt-2 text-sm text-gray-500">

            <strong>Variables disponibles:</strong>

            <code>[NOMBRE_PARTICIPANTE]</code>,

            <code>[CONGRESO]</code>,

            <code>[EMAIL]</code>

            @if($tipo === 'confirmacion')

                , <code>[URL_CONFIRMACION]</code>

            @else

                , <code>[URL_REGISTRO]</code>

            @endif

        </p>

        <x-input-error class="mt-2" :messages="$errors->get('contenido_html')" />

    </div>



    <div class="flex gap-3">

        <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">

            {{ isset($plantilla->id) ? 'Actualizar' : 'Crear' }} Plantilla

        </button>

        <a href="{{ route('admin.plantillas-recordatorio.index', ['tipo' => $tipo]) }}" class="inline-flex items-center px-4 py-2 bg-gray-300 border border-transparent rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-400">

            Cancelar

        </a>

    </div>

</div>

@php

    function getDefaultRecordatorioContent($tipo) {

        if ($tipo === 'confirmacion') {

            return '<p>Hola [NOMBRE_PARTICIPANTE],</p><p>Te recordamos que aún no has confirmado tu asistencia al <strong>[CONGRESO]</strong>.</p><p>Para asegurar tu lugar, por favor haz clic <a href="[URL_CONFIRMACION]">aquí</a> para confirmar tu asistencia.</p><p>¡Te esperamos!</p>';

        } else {

            return '<p>Hola [NOMBRE_PARTICIPANTE],</p><p>Te recordamos que fuiste invitado al <strong>[CONGRESO]</strong>, pero aún no completas tu registro en la plataforma.</p><p>Para participar, es indispensable que completes tu registro. Solo te tomará un minuto: <a href="[URL_REGISTRO]">Registrarme ahora</a></p><p>¡Te esperamos!</p>';

        }

    }

@endphp

</div>
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
(function () {
    var campo = 'contenido_html'; // 🔥 AQUÍ estaba el error
    var btnVisual = document.getElementById('btn-visual-' + campo);
    var btnRaw = document.getElementById('btn-raw-' + campo);
    var contVisual = document.getElementById('cont-visual-' + campo);
    var contRaw = document.getElementById('cont-raw-' + campo);
    var rawTA = document.getElementById('raw_' + campo);
    var form = document.querySelector('form');
    var modo = 'visual';

    tinymce.init({
        selector: '#' + campo,
        height: 320,
        menubar: false,
        branding: false,
        promotion: false,
        plugins: ['advlist','autolink','lists','link','charmap','searchreplace','visualblocks','code','table','wordcount'],
        toolbar: 'undo redo | blocks | bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | link table | removeformat code',
        content_style: 'body{font-family:system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.7;padding:8px}',
        valid_elements: '*[*]',
        setup: function (editor) {
            editor.on('change input', function () { editor.save(); });
        }
    });

    btnVisual?.addEventListener('click', function () {
        var editor = tinymce.get(campo);
        if (editor && rawTA) editor.setContent(rawTA.value);
        contVisual.style.display = '';
        contRaw.style.display = 'none';
        btnVisual.style.cssText = 'padding:4px 12px;background:#4f46e5;color:#fff;';
        btnRaw.style.cssText = 'padding:4px 12px;background:#fff;color:#4b5563;';
        modo = 'visual';
    });

    btnRaw?.addEventListener('click', function () {
        var editor = tinymce.get(campo);
        if (editor && rawTA) rawTA.value = editor.getContent();
        contVisual.style.display = 'none';
        contRaw.style.display = '';
        btnRaw.style.cssText = 'padding:4px 12px;background:#4f46e5;color:#fff;';
        btnVisual.style.cssText = 'padding:4px 12px;background:#fff;color:#4b5563;';
        modo = 'raw';
    });

    form?.addEventListener('submit', function () {
        var editor = tinymce.get(campo);
        if (modo === 'raw' && rawTA) {
            if (editor) {
                editor.setContent(rawTA.value);
                editor.save();
            } else {
                document.getElementById(campo).value = rawTA.value;
            }
            return;
        }

        if (editor) editor.save();
    });
})();
</script>