@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" 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>

    <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 ?? '<p>Hola [NOMBRE_PARTICIPANTE],</p><p>Gracias por registrarte al congreso: <strong>[CONGRESO]</strong>.</p><p>Tu registro está casi completo. Por favor, haz clic <a href="[URL_CONFIRMACION]">aquí</a> para confirmar tu asistencia.</p><p>¡Nos vemos en el evento!</p>') }}</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 ?? '<p>Hola [NOMBRE_PARTICIPANTE],</p><p>Gracias por registrarte al congreso: <strong>[CONGRESO]</strong>.</p><p>Tu registro está casi completo. Por favor, haz clic <a href="[URL_CONFIRMACION]">aquí</a> para confirmar tu asistencia.</p><p>¡Nos vemos en el evento!</p>') }}</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>,
            <code>[URL_CONFIRMACION]</code>
        </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-confirmacion.index') }}" 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>

<script>
    // Alternar entre vista visual y HTML
    const btnVisual = document.getElementById('btn-visual-contenido_html');
    const btnRaw = document.getElementById('btn-raw-contenido_html');
    const contVisual = document.getElementById('cont-visual-contenido_html');
    const contRaw = document.getElementById('cont-raw-contenido_html');
    const textareaVisual = document.getElementById('contenido_html');
    const textareaRaw = document.getElementById('raw_contenido_html');

    btnVisual.addEventListener('click', (e) => {
        e.preventDefault();
        textareaRaw.value = textareaVisual.value;
        contVisual.style.display = 'block';
        contRaw.style.display = 'none';
        btnVisual.classList.add('bg-indigo-600', 'text-white');
        btnVisual.classList.remove('bg-white', 'text-gray-600');
        btnRaw.classList.remove('bg-indigo-600', 'text-white');
        btnRaw.classList.add('bg-white', 'text-gray-600');
    });

    btnRaw.addEventListener('click', (e) => {
        e.preventDefault();
        textareaVisual.value = textareaRaw.value;
        contVisual.style.display = 'none';
        contRaw.style.display = 'block';
        btnRaw.classList.add('bg-indigo-600', 'text-white');
        btnRaw.classList.remove('bg-white', 'text-gray-600');
        btnVisual.classList.remove('bg-indigo-600', 'text-white');
        btnVisual.classList.add('bg-white', 'text-gray-600');
    });

    // Sincronizar ambos textareas
    textareaVisual.addEventListener('input', () => {
        textareaRaw.value = textareaVisual.value;
    });

    textareaRaw.addEventListener('input', () => {
        textareaVisual.value = textareaRaw.value;
    });
</script>