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

    <div>
        <x-input-label for="nombre_plantilla" value="Nombre de la Plantilla (Uso interno)" />
        <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 class="flex items-center justify-between mb-1">
            <x-input-label for="contenido_html" value="Cuerpo del Correo y/o Texto del PDF (HTML)" />
            <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="15" class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full">{{ old('contenido_html', $plantilla->contenido_html ?? '') }}</textarea>
        </div>
        <div id="cont-raw-contenido_html" style="display:none">
            <textarea id="raw_contenido_html" rows="15" class="block w-full border border-gray-300 rounded-md shadow-sm font-mono text-sm p-3">{{ old('contenido_html', $plantilla->contenido_html ?? '') }}</textarea>
        </div>
        <p class="mt-2 text-sm text-gray-500">
            Usa el placeholder: 
            <code class="text-blue-600">[NOMBRE_INVITADO]</code>
            y
            <code class="text-blue-600">[CARGO_INVITADO]</code>
        </p>
        <x-input-error class="mt-2" :messages="$errors->get('contenido_html')" />
    </div>

    <div class="space-y-4 rounded-lg border border-gray-200 p-4 bg-gray-50">
        <div class="text-sm font-medium text-gray-900">Elementos de registro en el correo</div>

        <label class="flex items-center gap-3 cursor-pointer">
            <input type="checkbox" name="mostrar_boton_registro" value="1"
                class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
                @checked(old('mostrar_boton_registro', $plantilla->mostrar_boton_registro ?? true))>
            <span class="text-sm text-gray-700">Mostrar botón de registro</span>
        </label>

        <label class="flex items-center gap-3 cursor-pointer">
            <input type="checkbox" name="mostrar_qr_registro" value="1"
                class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
                @checked(old('mostrar_qr_registro', $plantilla->mostrar_qr_registro ?? false))>
            <span class="text-sm text-gray-700">Mostrar código QR de registro</span>
        </label>

        <p class="text-xs text-gray-500">
            Estos elementos se agregan automáticamente al correo enviado con esta plantilla.
        </p>
    </div>

    <hr>
    <h3 class="text-lg font-medium text-gray-900">Archivos Adjuntos</h3>

   <div>
        <x-input-label for="fondo_path" value="Imagen de Fondo (JPG/PNG Media Carta)" />
        <input id="fondo_path" name="fondo_path" type="file" class="mt-1 block w-full" accept="image/jpeg,image/png"> {{-- <-- ¡CAMBIO A IMAGEN! --}}
        <x-input-error class="mt-2" :messages="$errors->get('fondo_path')" />
        @if (isset($plantilla) && $plantilla->fondo_path)
            <div class="mt-2 text-sm text-gray-500">
                Fondo actual: <a href="{{ asset('storage/' . $plantilla->fondo_path) }}" target="_blank" class="underline">Ver Imagen</a>
            </div>
        @endif
    </div>

    <div>
        <x-input-label for="adjunto_path_1" value="Documento Adjunto 1 (Opcional)" />
        <input id="adjunto_path_1" name="adjunto_path_1" type="file" class="mt-1 block w-full">
        <x-input-error class="mt-2" :messages="$errors->get('adjunto_path_1')" />
        @if (isset($plantilla) && $plantilla->adjunto_path_1)
            <div class="mt-2 text-sm text-gray-500">
                Archivo actual: <a href="{{ asset('storage/' . $plantilla->adjunto_path_1) }}" target="_blank" class="underline">Ver adjunto</a>
            </div>
        @endif
    </div>

    <div>
        <x-input-label for="adjunto_path_2" value="Documento Adjunto 2 (Opcional)" />
        <input id="adjunto_path_2" name="adjunto_path_2" type="file" class="mt-1 block w-full">
        <x-input-error class="mt-2" :messages="$errors->get('adjunto_path_2')" />
        @if (isset($plantilla) && $plantilla->adjunto_path_2)
            <div class="mt-2 text-sm text-gray-500">
                Archivo actual: <a href="{{ asset('storage/' . $plantilla->adjunto_path_2) }}" target="_blank" class="underline">Ver adjunto</a>
            </div>
        @endif
    </div>

    <div class="mt-6 pt-6 border-t border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Ajustes de Posición (PDF Media Carta)</h3>
        <p class="mt-1 text-sm text-gray-600">Define las coordenadas en puntos (pt). Media carta es 396pt (ancho) x 612pt (alto).</p>

        <div class="mt-4 border p-4 rounded-md">
            <label class="font-medium text-gray-700">Nombre del Invitado</label>
            <div class="grid grid-cols-3 gap-4 mt-2">
                <div>
                    <x-input-label for="nombre_top" value="Distancia Arriba (top)" />
                    <x-text-input id="nombre_top" name="nombre_top" type="number" class="mt-1 block w-full" :value="old('nombre_top', $plantilla->nombre_top ?? 150)" />
                </div>
                <div>
                    <x-input-label for="nombre_left" value="Distancia Izquierda (left)" />
                    <x-text-input id="nombre_left" name="nombre_left" type="number" class="mt-1 block w-full" :value="old('nombre_left', $plantilla->nombre_left ?? 50)" />
                </div>
                <div>
                    <x-input-label for="nombre_width" value="Ancho (width)" />
                    <x-text-input id="nombre_width" name="nombre_width" type="number" class="mt-1 block w-full" :value="old('nombre_width', $plantilla->nombre_width ?? 296)" />
                </div>
            </div>
            <div class="grid grid-cols-3 gap-4 mt-4">
                <div>
                    <x-input-label for="nombre_font_family" value="Fuente" />
                    <x-font-select name="nombre_font_family" :value="$plantilla->nombre_font_family ?? null" default="Times New Roman, serif" />
                </div>
                <div>
                    <x-input-label for="nombre_font_size" value="Tamaño (pt)" />
                    <x-text-input id="nombre_font_size" name="nombre_font_size" type="number" class="mt-1 block w-full" :value="old('nombre_font_size', $plantilla->nombre_font_size ?? 24)" />
                </div>
                <div>
                    <x-input-label for="nombre_color" value="Color" />
                    <input id="nombre_color" name="nombre_color" type="color" class="mt-1 block w-full h-10 border border-gray-300 rounded-md" value="{{ old('nombre_color', $plantilla->nombre_color ?? '#000000') }}" />
                </div>
            </div>
        </div>

        <div class="mt-4 border p-4 rounded-md">
            <label class="font-medium text-gray-700">Cuerpo del Texto (HTML)</label>
            <div class="grid grid-cols-3 gap-4 mt-2">
                <div>
                    <x-input-label for="contenido_top" value="Distancia Arriba (top)" />
                    <x-text-input id="contenido_top" name="contenido_top" type="number" class="mt-1 block w-full" :value="old('contenido_top', $plantilla->contenido_top ?? 250)" />
                </div>
                <div>
                    <x-input-label for="contenido_left" value="Distancia Izquierda (left)" />
                    <x-text-input id="contenido_left" name="contenido_left" type="number" class="mt-1 block w-full" :value="old('contenido_left', $plantilla->contenido_left ?? 50)" />
                </div>
                <div>
                    <x-input-label for="contenido_width" value="Ancho (width)" />
                    <x-text-input id="contenido_width" name="contenido_width" type="number" class="mt-1 block w-full" :value="old('contenido_width', $plantilla->contenido_width ?? 296)" />
                </div>
            </div>
        </div>
    </div>
    <div class="flex items-center gap-4 mt-8 pt-6 border-t border-gray-200">
        <x-primary-button>{{ $buttonText }}</x-primary-button>
        <a href="{{ route('admin.plantillas-invitacion.index') }}" class="text-gray-600 hover:text-gray-900">Cancelar</a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
(function () {
    var campo = 'contenido_html';
    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: 360,
        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>