@php
    $sec     = $seccion ?? null;
    $editing = !is_null($sec);
    $tiposArr = $tipos ?? \App\Models\CongresoSeccion::tiposDisponibles();
@endphp

<div class="grid grid-cols-1 lg:grid-cols-5 gap-6">

    {{-- Columna principal (3/5) --}}
    <div class="lg:col-span-3 space-y-4">

        {{-- Tipo --}}
        <div>
            <x-input-label value="Tipo de sección *" />
            <select name="tipo" id="tipo-seccion"
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500" required>
                @foreach($tiposArr as $val => $meta)
                    <option value="{{ $val }}" {{ old('tipo', $sec->tipo ?? 'texto') == $val ? 'selected' : '' }}>
                        {{ $meta['label'] }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- Título --}}
        <div>
            <x-input-label value="Título" />
            <x-text-input name="titulo" type="text" class="mt-1 block w-full"
                value="{{ old('titulo', $sec->titulo ?? '') }}" placeholder="Título de la sección" />
        </div>

        {{-- Subtítulo --}}
        <div>
            <x-input-label value="Subtítulo" />
            <x-text-input name="subtitulo" type="text" class="mt-1 block w-full"
                value="{{ old('subtitulo', $sec->subtitulo ?? '') }}" />
        </div>

        {{-- Slug --}}
        <div>
            <x-input-label value="Ancla (slug)" />
            <div class="mt-1 flex rounded-md shadow-sm">
                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">#</span>
                <x-text-input name="slug" type="text" class="block w-full rounded-l-none"
                    value="{{ old('slug', $sec->slug ?? '') }}" placeholder="ej: programa" />
            </div>
            <p class="mt-1 text-xs text-gray-400">Para links internos: tudominio.com/congreso#programa</p>
        </div>

        {{-- CONTENIDO con toggle Visual/HTML --}}
        <div id="panel-texto" class="tipo-panel space-y-2">
            <div class="flex items-center justify-between">
                <x-input-label value="Contenido" />
                <span class="inline-flex rounded-lg border border-gray-300 overflow-hidden text-xs font-semibold">
                    <button type="button" id="btn-modo-visual"
                        class="px-3 py-1 bg-indigo-600 text-white transition hover:bg-indigo-700">✦ Visual</button>
                    <button type="button" id="btn-modo-raw"
                        class="px-3 py-1 bg-white text-gray-600 transition hover:bg-gray-50">&lt;/&gt; HTML</button>
                </span>
            </div>

            <div id="contenedor-visual">
                <textarea id="contenido" name="contenido">{{ old('contenido', $sec->contenido ?? '') }}</textarea>
            </div>

            <div id="contenedor-raw" style="display:none">
                <textarea id="editor-raw" rows="12"
                    class="block w-full border border-gray-300 rounded-md shadow-sm font-mono text-sm p-3 focus:border-indigo-500 focus:ring-indigo-500"
                    placeholder="<p>HTML aquí...</p>">{{ old('contenido', $sec->contenido ?? '') }}</textarea>
                <p class="text-xs text-gray-400 mt-1">HTML completo: &lt;p&gt;, &lt;strong&gt;, &lt;ul&gt;, &lt;img&gt;, &lt;table&gt;…</p>
            </div>
        </div>

        {{-- MAPA --}}
        <div id="panel-mapa" class="tipo-panel space-y-3" style="display:none">
            <p class="text-sm font-bold text-gray-700">Configuración del mapa</p>

            <div>
                <x-input-label value="URL de embed (Google Maps)" />
                <x-text-input name="mapa_embed_url" type="url" class="mt-1 block w-full"
                    value="{{ old('mapa_embed_url', $sec->mapa_embed_url ?? '') }}"
                    placeholder="https://maps.google.com/maps?...&output=embed" />
                <p class="text-xs text-gray-400 mt-1">Si pones URL embed se usa en lugar de lat/lng.</p>
            </div>

            <div class="grid grid-cols-3 gap-3">
                <div class="col-span-1">
                    <x-input-label value="Latitud" />
                    <x-text-input name="mapa_lat" type="number" step="any" class="mt-1 block w-full"
                        value="{{ old('mapa_lat', $sec->mapa_lat ?? '') }}" placeholder="22.7706" />
                </div>
                <div class="col-span-1">
                    <x-input-label value="Longitud" />
                    <x-text-input name="mapa_lng" type="number" step="any" class="mt-1 block w-full"
                        value="{{ old('mapa_lng', $sec->mapa_lng ?? '') }}" placeholder="-102.5834" />
                </div>
                <div>
                    <x-input-label value="Zoom" />
                    <x-text-input name="mapa_zoom" type="number" class="mt-1 block w-full"
                        value="{{ old('mapa_zoom', $sec->mapa_zoom ?? 15) }}" min="1" max="20" />
                </div>
            </div>

            <div>
                <x-input-label value="Dirección legible" />
                <x-text-input name="mapa_direccion" type="text" class="mt-1 block w-full"
                    value="{{ old('mapa_direccion', $sec->mapa_direccion ?? '') }}"
                    placeholder="Av. Ejemplo 123, Ciudad" />
            </div>

            <button type="button" id="btn-geocode"
                class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-xl text-xs font-bold text-gray-600 hover:bg-gray-50 transition shadow-sm">
                📍 Obtener coordenadas de la dirección
            </button>

            <div id="mapa-preview" class="rounded-xl overflow-hidden border border-gray-200" style="height:250px;display:none">
                <iframe id="mapa-iframe" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
        </div>

        {{-- VIDEO --}}
        <div id="panel-video" class="tipo-panel" style="display:none">
            <x-input-label value="URL del video" />
            <x-text-input name="video_url" type="url" class="mt-1 block w-full"
                value="{{ old('video_url', $sec->video_url ?? '') }}"
                placeholder="https://www.youtube.com/watch?v=..." />
            <p class="text-xs text-gray-400 mt-1">Compatible con YouTube y Vimeo.</p>
        </div>

        {{-- IMAGEN --}}
        <div id="panel-imagen" class="tipo-panel" style="display:none">
            <x-input-label value="Imagen" />
            @if($editing && $sec->imagen)
                <div class="mt-1 mb-2">
                    <img src="{{ asset('storage/' . $sec->imagen) }}" class="h-28 w-auto rounded-xl border border-gray-200">
                </div>
            @endif
            <input type="file" name="imagen" class="mt-1 block w-full text-sm text-gray-500
                file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold
                file:bg-indigo-50 file:text-indigo-600 hover:file:bg-indigo-100" accept="image/*">
        </div>

    </div>

    {{-- Columna lateral (2/5) --}}
    <div class="lg:col-span-2">
        <div class="bg-gray-50 rounded-2xl border border-gray-200 p-4 space-y-4">

            <p class="text-xs font-bold text-gray-500 uppercase tracking-wider">Apariencia</p>

            <div>
                <x-input-label value="Layout" />
                <select name="layout"
                    class="mt-1 block w-full border-gray-300 rounded-md shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
                    @foreach(['full'=>'Ancho completo','centrado'=>'Centrado','dos_columnas'=>'Dos columnas','tres_columnas'=>'Tres columnas'] as $val=>$lbl)
                        <option value="{{ $val }}" {{ old('layout', $sec->layout ?? 'full') == $val ? 'selected':'' }}>{{ $lbl }}</option>
                    @endforeach
                </select>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <x-input-label value="Color fondo" />
                    <input type="color" name="color_fondo"
                        class="mt-1 block w-full h-10 rounded-lg border border-gray-300 cursor-pointer"
                        value="{{ old('color_fondo', $sec->color_fondo ?? '#ffffff') }}">
                </div>
                <div>
                    <x-input-label value="Color texto" />
                    <input type="color" name="color_texto"
                        class="mt-1 block w-full h-10 rounded-lg border border-gray-300 cursor-pointer"
                        value="{{ old('color_texto', $sec->color_texto ?? '#000000') }}">
                </div>
            </div>

            <div>
                <x-input-label value="Imagen de fondo" />
                @if($editing && $sec->imagen_fondo)
                    <div class="mt-1 mb-1">
                        <img src="{{ asset('storage/' . $sec->imagen_fondo) }}" class="h-16 w-auto rounded-lg border border-gray-200">
                    </div>
                @endif
                <input type="file" name="imagen_fondo" accept="image/*"
                    class="mt-1 block w-full text-sm text-gray-500
                        file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-bold
                        file:bg-gray-100 file:text-gray-600 hover:file:bg-gray-200">
            </div>

            <div class="pt-3 border-t border-gray-200 space-y-2">
                <p class="text-xs font-bold text-gray-500 uppercase tracking-wider">Opciones</p>

                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="hidden" name="activo" value="0">
                    <input type="checkbox" name="activo" value="1" id="chk-activo"
                        class="rounded border-gray-300 text-indigo-600 shadow-sm"
                        {{ old('activo', $sec->activo ?? true) ? 'checked' : '' }}>
                    <span class="text-sm text-gray-700">Visible en el sitio</span>
                </label>

                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="hidden" name="mostrar_en_nav" value="0">
                    <input type="checkbox" name="mostrar_en_nav" value="1" id="chk-nav"
                        class="rounded border-gray-300 text-indigo-600 shadow-sm"
                        {{ old('mostrar_en_nav', $sec->mostrar_en_nav ?? false) ? 'checked' : '' }}>
                    <span class="text-sm text-gray-700">Mostrar en menú de navegación</span>
                </label>
            </div>

            <div>
                <x-input-label value="Ícono nav (Bootstrap Icons)" />
                <x-text-input name="icono_nav" type="text" class="mt-1 block w-full"
                    value="{{ old('icono_nav', $sec->icono_nav ?? '') }}" placeholder="bi-map" />
            </div>

            <div>
                <x-input-label value="Orden" />
                <x-text-input name="orden" type="number" class="mt-1 block w-full"
                    value="{{ old('orden', $sec->orden ?? 0) }}" min="0" />
            </div>

        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
(function(){
    // ── Toggle Visual ↔ Raw ───────────────────────────────────────────
    const btnVisual  = document.getElementById('btn-modo-visual');
    const btnRaw     = document.getElementById('btn-modo-raw');
    const contVisual = document.getElementById('contenedor-visual');
    const contRaw    = document.getElementById('contenedor-raw');
    const rawTA      = document.getElementById('editor-raw');
    let modoActual   = 'visual';

    function activarVisual() {
        const editor = tinymce.get('contenido');
        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;';
        modoActual = 'visual';
    }
    function activarRaw() {
        const editor = tinymce.get('contenido');
        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;';
        modoActual = 'raw';
    }

    btnVisual?.addEventListener('click', activarVisual);
    btnRaw?.addEventListener('click', activarRaw);

    document.querySelector('form')?.addEventListener('submit', () => {
        const editor = tinymce.get('contenido');
        if (modoActual === 'visual' && editor) editor.save();
        else if (rawTA) {
            const tinyTA = document.getElementById('editor-tinymce');
            if (tinyTA) tinyTA.value = rawTA.value;
        }
    });

    // ── TinyMCE ───────────────────────────────────────────────────────
    tinymce.init({
        selector: '#contenido', 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 | alignleft aligncenter alignright | bullist numlist | link table | removeformat code',
        content_style: 'body{font-family:system-ui,sans-serif;font-size:14px;line-height:1.7;padding:8px}',
        valid_elements: '*[*]',
        setup(editor){ editor.on('change input', () => editor.save()); }
    });

    // ── Tipo de sección → mostrar panel correcto ───────────────────────
    const tipoSel  = document.getElementById('tipo-seccion');
    const paneles  = document.querySelectorAll('.tipo-panel');
    const panelMap = { texto:'panel-texto', imagen:'panel-imagen', video:'panel-video', mapa:'panel-mapa' };

    function mostrarPanel(){
        paneles.forEach(p => p.style.display = 'none');
        const el = document.getElementById(panelMap[tipoSel?.value] || 'panel-texto');
        if(el) el.style.display = '';
    }
    tipoSel?.addEventListener('change', mostrarPanel);
    mostrarPanel();

    // ── Preview mapa ──────────────────────────────────────────────────
    const mapaIframe  = document.getElementById('mapa-iframe');
    const mapaPreview = document.getElementById('mapa-preview');

    function actualizarMapaPreview(){
        const url  = document.querySelector('[name=mapa_embed_url]')?.value;
        const lat  = document.querySelector('[name=mapa_lat]')?.value;
        const lng  = document.querySelector('[name=mapa_lng]')?.value;
        const zoom = document.querySelector('[name=mapa_zoom]')?.value || 15;
        const embedUrl = url || (lat && lng ? `https://maps.google.com/maps?q=${lat},${lng}&z=${zoom}&output=embed` : '');
        if(embedUrl){ mapaIframe.src = embedUrl; mapaPreview.style.display = ''; }
    }

    document.querySelector('[name=mapa_embed_url]')?.addEventListener('change', actualizarMapaPreview);
    document.querySelector('[name=mapa_lat]')?.addEventListener('change', actualizarMapaPreview);
    document.querySelector('[name=mapa_lng]')?.addEventListener('change', actualizarMapaPreview);

    document.getElementById('btn-geocode')?.addEventListener('click', () => {
        const dir = document.querySelector('[name=mapa_direccion]')?.value;
        if(!dir){ alert('Escribe una dirección primero'); return; }
        fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(dir)}&format=json&limit=1`)
            .then(r=>r.json()).then(data=>{
                if(data.length){
                    document.querySelector('[name=mapa_lat]').value = parseFloat(data[0].lat).toFixed(7);
                    document.querySelector('[name=mapa_lng]').value = parseFloat(data[0].lon).toFixed(7);
                    actualizarMapaPreview();
                } else { alert('No se encontró la dirección.'); }
            });
    });

    @if($editing && ($sec->mapa_embed_url || ($sec->mapa_lat && $sec->mapa_lng)))
    actualizarMapaPreview();
    @endif
})();
</script>