@extends('aulavirtual.layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/aulavirtual/envivo.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/aulavirtual/grabado.css') }}" />
@endsection

@section('content')
    @php
        $totalClases = optional($publicacion->sesiones)->sum(fn($s) => $s->detalles->count());
        $completadas = (int) ($publicacion->clasescompletadas ?? 0);
        $porcentaje = $totalClases > 0 ? round(($completadas / $totalClases) * 100) : 0;

    @endphp

    <main class="page-main">
        <div class="seccion-envivo">

            <div uk-grid class="layout">
                <!-- SIDEBAR (izquierda) -->
                <aside class="uk-width-1-4@m parte-izq">
                    <a href="{{ url('detallecurso/' . $publicacion->titulo_rewrite) }}" class="btn-back">
                        <span uk-icon="icon: chevron-left"></span> Regresar al curso
                    </a>

                    <h2 class="curso-titulo">{{ $publicacion->titulo }}</h2>

                    <div class="progreso-box">
                        <div class="progreso-bar">
                            <div class="progreso-fill" id="progreso-fill" style="width:{{ $porcentaje }}%"
                                aria-valuenow="{{ $porcentaje }}" aria-valuemin="0" aria-valuemax="100"
                                role="progressbar"></div>
                        </div>
                        <div class="progreso-texto" id="progreso-texto">{{ $porcentaje }}% completado</div>
                    </div>

                    <hr class="sep">

                    {{-- Ver mi horario (solo si hay imagen filtrada por especialidad) --}}



                    <ul class="lista sesiones grupo-panel sin-modulos">
                        @php
                            $presentacionVideo = $publicacion->link_video ?? '';
                            $presentacionImg = !empty($publicacion->imagen)
                                ? env('URL_ARCHIVOS') . '/images/capa/' . $publicacion->imagen
                                : asset('assets/img/aulavirtual/horario.png'); // fallback
                        @endphp
                        <li class="item item-sesion is-active" data-type="bienvenida" data-video="{{ $presentacionVideo }}"
                            data-img="{{ $presentacionImg }}">
                            <button type="button" class="img-text js-detalle" data-type="bienvenida">
                                <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                                <span class="item-texto">Bienvenida al curso</span>
                            </button>
                        </li>

                        <li class="item item-sesion" data-type="estructura">
                            <button type="button" class="img-text js-detalle" data-type="estructura">
                                <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                                <span class="item-texto">Estructura Académica</span>
                            </button>
                        </li>
                        @if (!empty($horario?->imagen))
                            @php
                                $horarioImg = 'https://asistencia.educaauge.com/images_horarios/' . $horario->imagen;
                            @endphp
                            <li class="item item-sesion" data-type="horario" data-img="{{ $horarioImg }}">
                                <button type="button" class="img-text js-detalle" data-type="horario">
                                    <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt=""
                                        class="img-ico">
                                    <span class="item-texto">Ver mi horario</span>
                                </button>
                            </li>
                        @endif
                    </ul>




                    {{-- Sesiones del curso principal --}}
                    @if (optional($publicacion->sesiones)->count())
                        <ul class="lista sesiones grupo-panel sin-modulos" id="lista-principal">
                            @foreach ($publicacion->sesiones as $sIndex => $sesion)
                                @foreach ($sesion->detalles as $dIndex => $detalle)
                                    @php
                                        $detalleUrl = route('grabadas.detalle', [
                                            $publicacion->titulo_rewrite,
                                            $detalle->id_detalle,
                                        ]);
                                    @endphp
                                    <li class="item item-sesion {{ $isActive ? 'is-active' : '' }}"
                                        data-url="{{ $detalleUrl }}">
                                        <button type="button" class="img-text js-detalle" data-url="{{ $detalleUrl }}">
                                            <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt=""
                                                class="img-ico">
                                            <span class="item-texto">
                                                {{ 'Sesión N°' . str_pad($dIndex + 1, 2, '0', STR_PAD_LEFT) . ': ' . ($detalle->titulo ?? 'Clase') }}
                                            </span>
                                        </button>
                                        <span class="estado {{ $isActive ? 'estado-alerta' : 'estado-vacio' }}"
                                            role="img"
                                            aria-label="{{ $isActive ? 'en progreso / pendiente' : 'sin completar' }}"></span>
                                    </li>
                                @endforeach
                            @endforeach
                        </ul>
                    @endif

                    {{-- PACK: Cursos dependientes --}}
                    {{-- PACK: Cursos dependientes --}}
                    @if (isset($publicacion->dependientes) && $publicacion->dependientes->count())
                        <div class="modprin">
                            @foreach ($publicacion->dependientes as $depIndex => $cursoDep)
                                <h3 class="modulo-title">
                                    {{ $cursoDep->titulo_web ?? ($cursoDep->titulo ?? 'Curso incluido') }}
                                    @unless ($cursoDep->ha_pagado)
                                        <small class="uk-text-muted"> · no matriculado</small>
                                    @endunless
                                </h3>

                                @if (optional($cursoDep->sesiones)->count())
                                    @foreach ($cursoDep->sesiones as $mIndex => $modulo)
                                        <details class="grupo" data-collapsible {{ $mIndex === 0 ? 'open' : '' }}>
                                            <summary class="grupo-toggle">
                                                <span class="grupo-texto">
                                                    {{ $modulo->titulo ?? 'Módulo ' . ($mIndex + 1) }}

                                                </span>
                                            </summary>

                                            <ul class="lista sesiones grupo-panel">
                                                @forelse ($modulo->detalles as $d)
                                                    @php
                                                        $detUrl = route('grabadas.detalle', [
                                                            $cursoDep->titulo_rewrite,
                                                            $d->id_detalle,
                                                        ]);
                                                        $payUrl = url('detallecurso/' . $cursoDep->titulo_rewrite); // o tu URL de pago/checkout
                                                    @endphp
                                                    <li class="item item-sesion {{ $cursoDep->ha_pagado ? '' : 'is-locked' }}"
                                                        data-url="{{ $detUrl }}"
                                                        data-paid="{{ $cursoDep->ha_pagado ? 1 : 0 }}"
                                                        data-payurl="{{ $payUrl }}"
                                                        data-coursetitle="{{ $cursoDep->titulo }}">
                                                        <button type="button" class="img-text js-detalle"
                                                            data-url="{{ $detUrl }}">
                                                            <img src="{{ asset('assets/img/aulavirtual/group.png') }}"
                                                                alt="" class="img-ico">
                                                            <span class="item-texto">{{ $d->titulo ?? 'Clase' }}</span>
                                                        </button>
                                                        <span class="estado estado-vacio" role="img"
                                                            aria-label="sin completar"></span>
                                                    </li>
                                                @empty
                                                    <li class="item uk-text-muted uk-text-small">Este módulo aún no tiene
                                                        sesiones.</li>
                                                @endforelse
                                            </ul>
                                        </details>
                                    @endforeach
                                @else
                                    <div class="uk-text-muted uk-text-small">Este curso aún no tiene módulos.</div>
                                @endif

                                {{-- ESPECIALIDADES del dependiente, agrupadas por módulo --}}
                                {{-- ESPECIALIDADES del dependiente --}}
                                @if (isset($cursoDep->cursoespecialidades) && $cursoDep->cursoespecialidades->count())
                                    @foreach ($cursoDep->cursoespecialidades as $esp)
                                        @php
                                            $sesionesCount = optional($esp->sesiones)->count() ?? 0;
                                        @endphp

                                        @if ($sesionesCount === 1)
                                            {{-- ✅ SOLO 1 MÓDULO: NO mostrar el módulo, listar sesiones directamente --}}
                                            @php $modEsp = $esp->sesiones->first(); @endphp

                                            <details class="grupo" data-collapsible>
                                                <summary class="grupo-toggle">
                                                    <span class="grupo-texto">
                                                        ESPECIALIDAD: {{ $esp->especialidad->titulo ?? $esp->titulo }}
                                                    </span>
                                                </summary>

                                                <ul class="lista sesiones grupo-panel">
                                                    @forelse ($modEsp->detalles as $d)
                                                        @php
                                                            $detUrl = route('grabadas.detalle', [
                                                                $esp->titulo_rewrite,
                                                                $d->id_detalle,
                                                            ]);
                                                        @endphp
                                                        <li class="item item-sesion" data-url="{{ $detUrl }}">
                                                            <button type="button" class="img-text js-detalle"
                                                                data-url="{{ $detUrl }}">
                                                                <img src="{{ asset('assets/img/aulavirtual/group.png') }}"
                                                                    alt="" class="img-ico">
                                                                <span
                                                                    class="item-texto">{{ $d->titulo ?? 'Clase' }}</span>
                                                            </button>
                                                            <span class="estado estado-vacio" role="img"
                                                                aria-label="sin completar"></span>
                                                        </li>
                                                    @empty
                                                        <li class="item uk-text-muted uk-text-small">Esta especialidad no
                                                            tiene sesiones.</li>
                                                    @endforelse
                                                </ul>
                                            </details>
                                        @elseif ($sesionesCount > 1)
                                            {{-- ✅ VARIOS MÓDULOS: mostrar cada módulo como un details --}}
                                            <h4 class="modulo-title">
                                                ESPECIALIDAD: {{ $esp->especialidad->nombre ?? $esp->titulo }}
                                            </h4>

                                            @foreach ($esp->sesiones as $mIndex => $modEsp)
                                                @php $cant = optional($modEsp->detalles)->count() ?? 0; @endphp
                                                <details class="grupo" data-collapsible>
                                                    <summary class="grupo-toggle">
                                                        <span class="grupo-texto">
                                                            {{ $modEsp->titulo ?? 'Módulo ' . ($mIndex + 1) }}
                                                            @if ($cant)
                                                                <small>({{ $cant }}
                                                                    sesión{{ $cant > 1 ? 'es' : '' }})</small>
                                                            @endif
                                                        </span>
                                                    </summary>

                                                    <ul class="lista sesiones grupo-panel">
                                                        @forelse ($modEsp->detalles as $d)
                                                            @php
                                                                $detUrl = route('grabadas.detalle', [
                                                                    $esp->titulo_rewrite,
                                                                    $d->id_detalle,
                                                                ]);
                                                            @endphp
                                                            <li class="item item-sesion" data-url="{{ $detUrl }}">
                                                                <button type="button" class="img-text js-detalle"
                                                                    data-url="{{ $detUrl }}">
                                                                    <img src="{{ asset('assets/img/aulavirtual/group.png') }}"
                                                                        alt="" class="img-ico">
                                                                    <span
                                                                        class="item-texto">{{ $d->titulo ?? 'Clase' }}</span>
                                                                </button>
                                                                <span class="estado estado-vacio" role="img"
                                                                    aria-label="sin completar"></span>
                                                            </li>
                                                        @empty
                                                            <li class="item uk-text-muted uk-text-small">Este módulo aún no
                                                                tiene sesiones.</li>
                                                        @endforelse
                                                    </ul>
                                                </details>
                                            @endforeach
                                        @else
                                            {{-- 0 módulos --}}
                                            <div class="uk-text-muted uk-text-small">
                                                La especialidad "{{ $esp->especialidad->nombre ?? $esp->titulo }}" aún no
                                                tiene módulos.
                                            </div>
                                        @endif
                                    @endforeach
                                @endif
                            @endforeach
                        </div>
                    @endif


                    {{-- Especialidades directas del curso principal --}}
                    @if (isset($publicacion->cursoespecialidades) && $publicacion->cursoespecialidades->count())
                        <div class="modprin">
                            <h3 class="modulo-title">Especialidades</h3>
                            @foreach ($publicacion->cursoespecialidades as $espIndex => $esp)
                                <details class="grupo" data-collapsible {{ $espIndex === 0 ? 'open' : '' }}>
                                    <summary class="grupo-toggle">
                                        <span class="grupo-texto">ESPECIALIDAD:
                                            {{ $esp->especialidad->nombre ?? $esp->titulo }}</span>
                                    </summary>
                                    <ul class="lista sesiones grupo-panel">
                                        @foreach ($esp->sesiones as $s)
                                            @foreach ($s->detalles as $d)
                                                @php
                                                    $detUrl = route('grabadas.detalle', [
                                                        $esp->titulo_rewrite,
                                                        $d->id_detalle,
                                                    ]);
                                                @endphp
                                                <li class="item item-sesion" data-url="{{ $detUrl }}">
                                                    <button type="button" class="img-text js-detalle"
                                                        data-url="{{ $detUrl }}">
                                                        <img src="{{ asset('assets/img/aulavirtual/group.png') }}"
                                                            alt="" class="img-ico">
                                                        <span class="item-texto">{{ $d->titulo ?? 'Clase' }}</span>
                                                    </button>
                                                    <span class="estado estado-vacio" role="img"
                                                        aria-label="sin completar"></span>
                                                </li>
                                            @endforeach
                                        @endforeach
                                    </ul>
                                </details>
                            @endforeach
                        </div>
                    @endif

                    <br><br><br><br><br>
                </aside>

                <!-- CONTENIDO (derecha) -->
                <section class="uk-width-3-4@m parte-der">
                    <div class="title-center">
                        <h2 class="title" id="titulo-clase">
                            Bienvenida al curso
                        </h2>
                    </div>

                    <h2 class="title-estructura">
                        Bienvenida al curso
                    </h2>

                    <div class="bienvenida-card cuerpo" id="bienvenida-card">
                        @if (!empty($publicacion?->link_video))
                            <video class="media-box" controls playsinline preload="metadata" controlsList="nodownload"
                                oncontextmenu="return false;">
                                <source src="{{ $publicacion->link_video }}" type="video/mp4">
                                Tu navegador no soporta video HTML5.
                            </video>
                        @else
                            <img src="{{ asset('assets/img/aulavirtual/horario.png') }}" alt="Horarios">
                        @endif

                        <p class="descripcion">¡Bienvenido a tu formación en Grupo AUGE!
                            Este espacio ha sido creado para acompañarte en tu crecimiento como docente, con herramientas
                            prácticas y estrategias que podrás aplicar desde la primera clase.</p>

                    </div>

                    <div class="estructura-card cuerpo" id="estructura-card">
                        <h2 class="title-estructura">
                            Estructura Académica
                        </h2>
                        <p>
                            Este programa está diseñado en módulos prácticos que combinan clases grabadas, sesiones en vivo
                            y material descargable.
                            Así podrás avanzar a tu ritmo, reforzar lo aprendido y estar siempre preparado para tu examen,
                            ascenso o mejora docente.
                        </p>

                        <h3>Domina la Inteligencia Artificial para hacer más en menos tiempo.</h3>

                        <p>3 clases prácticas donde aprenderás cómo usar la IA a tu favor.</p>
                        <p>Seguimos con la introducción a la herramienta principal: <strong>ChatGPT</strong>.</p>

                        <h3>Terminamos con 8 SEMANAS de sesiones en vivo sobre inteligencia artificial.</h3>

                        <ul class="cronograma">
                            <li>
                                <strong>14 de agosto — Clase 0: Introducción y Preparación al Camino de la IA
                                    Generativa.</strong>
                                <ul>
                                    <li>Comprenderás qué es la IA generativa y su impacto en diferentes industrias.</li>
                                    <li>Identificarás oportunidades estratégicas para aplicar IA en tu negocio o carrera.
                                    </li>
                                    <li>Tendrás claridad sobre los objetivos y la estructura del programa.</li>
                                </ul>
                            </li>

                            <li>
                                <strong>21 de agosto — Clase 1: Modelos, Prompts y GPTs.</strong>
                                <ul>
                                    <li>Dominarás la creación de prompts que producen resultados precisos y relevantes.</li>
                                    <li>Aprenderás a generar contenido estratégico que se adapte a tus necesidades
                                        profesionales.</li>
                                    <li>Identificarás oportunidades para implementar GPTs en tus proyectos y procesos.</li>
                                </ul>
                            </li>

                            <li>
                                <strong>28 de agosto — Clase 2: Clónate y Diseña Modelos de Negocio con IA.</strong>
                                <ul>
                                    <li>Crearás una versión automatizada de ti mismo con IA para optimizar tareas
                                        repetitivas.</li>
                                    <li>Diseñarás modelos de negocio basados en estrategias impulsadas por datos y
                                        tecnología.</li>
                                    <li>Descubrirás cómo liderar equipos y proyectos en esta nueva era tecnológica.</li>
                                </ul>
                            </li>

                            <li>
                                <strong>04 de septiembre — Clase 3: Operaciones, Productividad y Optimización.</strong>
                                <ul>
                                    <li>Implementarás flujos de trabajo optimizados que aumenten tu eficiencia diaria.</li>
                                    <li>Aprenderás a mapear procesos empresariales utilizando herramientas de IA.</li>
                                    <li>Reducirás costos y tiempos en tareas operativas, aumentando tu rentabilidad.</li>
                                </ul>
                            </li>

                            <li>
                                <strong>11 de septiembre — Clase 4: Generación de Imágenes, Videos y Audios.</strong>
                                <ul>
                                    <li>Aprenderás a crear contenido multimedia profesional con herramientas de IA.</li>
                                    <li>Automatizarás procesos de creación de imágenes, videos y audios en tu negocio.</li>
                                    <li>Gestionarás asistentes virtuales y tecnologías para mejorar la experiencia del
                                        cliente.</li>
                                </ul>
                            </li>

                            <li>
                                <strong>18 de septiembre — Clase 5: IA para Marketing y Atención al Cliente.</strong>
                                <ul>
                                    <li>Diseñarás campañas de marketing y ventas impulsadas por IA que generen mejores
                                        resultados.</li>
                                    <li>Automatizarás procesos de atención al cliente, mejorando su satisfacción y
                                        fidelidad.</li>
                                    <li>Implementarás estrategias de marketing de crecimiento (Growth Marketing) con
                                        tecnología avanzada.</li>
                                </ul>
                            </li>
                        </ul>

                    </div>

                    <div class="horario-card cuerpo" id="horario-card">
                        <h2 class="title-estructura">
                            Estructura Académica
                        </h2>
                        <img src="{{ asset('assets/img/aulavirtual/horario.png') }}" alt="Horarios">

                    </div>

                    <div class="material" style="display: none">
                        <h2 class="title">Material de la Clase</h2>
                        <div id="material-list">
                        </div>
                    </div>

                    <div class="pdf-preview uk-margin-top" id="pdf-wrap" style="display:none">
                        <iframe id="pdf-frame" src="" width="100%" height="800px"
                            style="border: none;"></iframe>
                    </div>
                </section>
            </div>

        </div>


        <div id="modal-nopago" uk-modal>
            <div class="uk-modal-dialog uk-modal-body">
                <button class="uk-modal-close-default" type="button" uk-close></button>
                <h3 class="uk-modal-title" id="nopago-title">Contenido bloqueado</h3>
                <p id="nopago-text">
                    Para acceder a este curso, necesitas estar matriculado.
                </p>
                <div class="uk-flex uk-flex-right uk-margin-top">
                    <a id="nopago-link" class="uk-button uk-button-primary" href="#" target="_blank"
                        rel="noopener">
                        Ver opciones / Matricularme
                    </a>
                </div>
            </div>
        </div>

    </main>

    {{-- ========== TU JS EXISTENTE (SIN CAMBIOS) ========== --}}
    <script>
        function setTopHeight() {
            var topEl = document.querySelector('.parte-der');
            if (!topEl) return;
            var h = topEl.getBoundingClientRect().height;
            document.documentElement.style.setProperty('--topH', h + 'px');
        }
        window.addEventListener('load', setTopHeight);
        window.addEventListener('resize', setTopHeight);
        document.querySelectorAll('.parte-der img').forEach(function(img) {
            img.addEventListener('load', setTopHeight, {
                once: true
            });
        });
        setTimeout(setTopHeight, 200);
    </script>

    {{-- ========== JS ADICIONAL (SIN CAMBIAR LA URL) ========== --}}
    <script>
        (function() {
            const triggerSelector = '.js-detalle';
            const itemSelector = '.item.item-sesion';

            const $titulo = document.getElementById('titulo-clase');
            const $banner = document.getElementById('banner-horario');
            const $matBlock = document.querySelector('.material');
            const $matList = document.getElementById('material-list');
            const $pdfWrap = document.getElementById('pdf-wrap');
            const $pdfFrame = document.getElementById('pdf-frame');
            const $progFill = document.getElementById('progreso-fill');
            const $progText = document.getElementById('progreso-texto');

            function setActiveItem(li) {
                document.querySelectorAll(itemSelector).forEach(n => n.classList.remove('is-active'));
                if (li) li.classList.add('is-active');
            }

            function buildMaterialButtons(archivos) {
                if (!archivos || !archivos.length) {
                    return '<div class="uk-text-muted uk-text-small">Aún no hay material disponible para esta clase.</div>';
                }
                return archivos.map(a => {
                    const safeName = a.nombre ? a.nombre.replace(/</g, '&lt;').replace(/>/g, '&gt;') :
                        'Archivo';
                    const safeUrl = a.url || '#';
                    return `
                        <a href="${safeUrl}" target="_blank" class="btn-material">
                        Descargar ${safeName}
                        <img src="{{ asset('assets/img/aulavirtual/image42.png') }}" alt="">
                        </a>
                    `;
                }).join('');
            }

            async function cargarDetalle(url, li) {
                try {
                    setActiveItem(li);
                    document.querySelector('.parte-der')?.classList.add('is-loading');

                    const res = await fetch(url, {
                        headers: {
                            'Accept': 'application/json'
                        }
                    });
                    if (!res.ok) throw new Error('Error al cargar la clase');
                    const data = await res.json();
                    if (!data.ok) throw new Error('Respuesta inválida');

                    $titulo.textContent = 'Sesión: ' + (data.detalle?.titulo || 'Clase');
                    $matList.innerHTML = buildMaterialButtons(data.archivos || []);

                    if ($matBlock) $matBlock.style.display = '';

                    if (data.pdf_url) {
                        $pdfWrap.style.display = '';
                        $pdfFrame.src = data.pdf_url;
                    } else {
                        $pdfWrap.style.display = 'none';
                        $pdfFrame.src = '';
                    }

                    if (data.progreso) {
                        const p = Math.max(0, Math.min(100, parseInt(data.progreso.porcentaje || 0, 10)));
                        if ($progFill) $progFill.style.width = p + '%';
                        if ($progText) $progText.textContent = p + '% completado';
                    }
                } catch (e) {
                    console.error(e);
                    alert('No se pudo cargar la clase. Inténtalo de nuevo.');
                } finally {
                    document.querySelector('.parte-der')?.classList.remove('is-loading');
                    if (typeof setTopHeight === 'function') setTopHeight();
                }
            }

            // Modal helpers (UIkit)
            function openNoPagoModal(courseTitle, payUrl) {
                try {
                    document.getElementById('nopago-title').textContent = 'Contenido bloqueado';
                    document.getElementById('nopago-text').textContent =
                        'Para acceder a "' + (courseTitle || 'este curso') + '", necesitas estar matriculado.';
                    const link = document.getElementById('nopago-link');
                    link.href = payUrl || '#';
                    if (window.UIkit && UIkit.modal) {
                        UIkit.modal('#modal-nopago').show();
                    } else {
                        // fallback simple
                        alert('Necesitas matricularte para ver este contenido.');
                        if (payUrl) window.open(payUrl, '_blank');
                    }
                } catch (e) {
                    console.error(e);
                }
            }

            // Delegación de clics
            document.addEventListener('click', function(ev) {
                const btn = ev.target.closest(triggerSelector);
                if (!btn) return;

                ev.preventDefault();
                const li = btn.closest(itemSelector);
                const type = btn.dataset.type || li?.dataset?.type || '';
                const url = btn.dataset.url || li?.dataset?.url;

                // 🟢 Caso especial: PRESENTACIÓN (bienvenida)
                if (type === 'bienvenida') {
                    setActiveItem(li);

                    if ($titulo) $titulo.textContent = 'Bienvenida al curso';

                    // Datos desde el <li>
                    const videoUrl = li?.dataset?.video || '';
                    const imgUrl = li?.dataset?.img || '';

                    // Render en #banner-horario:
                    if ($banner) {
                        if (videoUrl) {
                            // Muestra VIDEO
                            $banner.innerHTML = `
                                <video class="media-box" controls playsinline preload="metadata" controlsList="nodownload" oncontextmenu="return false;">
                                <source src="${videoUrl}" type="video/mp4">
                                Tu navegador no soporta video HTML5.
                                </video>
                            `;
                        } else if (imgUrl) {
                            // Fallback: IMAGEN
                            $banner.innerHTML = `<img src="${imgUrl}" alt="Presentación del curso">`;
                        }
                    }

                    // Ocultar Material y PDF
                    if ($matBlock) {
                        $matList.innerHTML = '';
                        $matBlock.style.display = 'none';
                    }
                    if ($pdfWrap) {
                        $pdfWrap.style.display = 'none';
                        if ($pdfFrame) $pdfFrame.src = '';
                    }

                    if (typeof setTopHeight === 'function') setTopHeight();
                    return; // terminar flujo aquí
                }

                // 🗓️ Caso especial: HORARIO
                if (type === 'horario') {
                    setActiveItem(li);

                    // Actualizar título
                    if ($titulo) $titulo.textContent = 'Horario de clases';

                    // Mostrar imagen de horario en el banner
                    const imgUrl = li?.dataset?.img || '';
                    if ($banner && imgUrl) {
                        // Reemplazar el <img> del banner
                        const img = $banner.querySelector('img');
                        if (img) {
                            img.src = imgUrl;
                            img.alt = 'Horarios';
                        } else {
                            $banner.innerHTML = `<img src="${imgUrl}" alt="Horarios">`;
                        }
                    }

                    // Ocultar Material y PDF
                    if ($matBlock) {
                        $matList.innerHTML = '';
                        $matBlock.style.display = 'none';
                    }
                    if ($pdfWrap) {
                        $pdfWrap.style.display = 'none';
                        if ($pdfFrame) $pdfFrame.src = '';
                    }

                    if (typeof setTopHeight === 'function') setTopHeight();
                    return; // No seguimos con flujo de detalle
                }

                // ⛔ bloqueo si no ha pagado
                const paid = (li?.dataset?.paid || '0') === '1';
                if (!paid) {
                    const title = li?.dataset?.coursetitle || '';
                    const payUrl = li?.dataset?.payurl || '#';
                    openNoPagoModal(title, payUrl);
                    return;
                }

                if (!url) return;
                cargarDetalle(url, li);
            });
        })();
    </script>


    <style>
        /* Botón que se ve como row/enlace */
        .img-text.js-detalle {
            background: transparent;
            border: 0;
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: left;
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            cursor: pointer;
            font: inherit;
            color: inherit;
        }

        /* Overlay de carga */
        .parte-der.is-loading,
        .parte-der.is-loading * {
            pointer-events: none !important;
        }

        .parte-der.is-loading {
            position: relative;
        }

        .parte-der.is-loading::after {
            content: 'Cargando…';
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .7);
            font-weight: 600;
        }

        /* Asegurar el circulito 14x14 */
        .estado {
            width: 14px;
            height: 14px;
            box-sizing: border-box;
            border-radius: 50%;
            border: 2px solid #999;
            flex: 0 0 14px;
            align-self: center;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            font-size: 0;
            /* no texto */
        }
    </style>
@endsection