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

                    {{-- Informativos --}}
                    <ul class="lista sesiones grupo-panel sin-modulos">
                        <li class="item item-sesion is-active" data-type="bienvenida">
                            <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))
                            <li class="item item-sesion" data-type="horario">
                                <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())
                        <div class="modprin">
                            <h3 class="modulo-title">
                                Sesiones del curso
                            </h3>
                            <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" data-url="{{ $detalleUrl }}"
                                            data-publicacion-id="{{ $publicacion->id_curso }}"
                                            data-modulo-id="{{ $sesion->id_sesion }}"
                                            data-sesion-id="{{ $detalle->id_detalle }}">
                                            <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">
                                                    {{ $detalle->titulo ?? 'Clase' }}
                                                </span>
                                            </button>
                                            <span class="estado estado-vacio" role="img"
                                                aria-label="sin completar"></span>
                                        </li>
                                    @endforeach
                                @endforeach
                            </ul>
                        </div>

                    @endif

                    {{-- 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);
                                                    @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 }}"
                                                        data-publicacion-id="{{ $cursoDep->id_curso }}"
                                                        data-modulo-id="{{ $modulo->id_sesion }}"
                                                        data-sesion-id="{{ $d->id_detalle }}">
                                                        <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 --}}
                                @if (isset($cursoDep->cursoespecialidades) && $cursoDep->cursoespecialidades->count())
                                    @foreach ($cursoDep->cursoespecialidades as $esp)
                                        @php $sesionesCount = optional($esp->sesiones)->count() ?? 0; @endphp

                                        @if ($sesionesCount === 1)
                                            @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,
                                                            ]);
                                                            $payUrl = url('detallecurso/' . $cursoDep->titulo_rewrite);
                                                        @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 }}"
                                                            data-publicacion-id="{{ $cursoDep->id_curso }}"
                                                            data-modulo-id="{{ $modEsp->id_sesion }}"
                                                            data-sesion-id="{{ $d->id_detalle }}">
                                                            <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)
                                            <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,
                                                                ]);
                                                                $payUrl = url(
                                                                    'detallecurso/' . $cursoDep->titulo_rewrite,
                                                                );
                                                            @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 }}"
                                                                data-publicacion-id="{{ $cursoDep->id_curso }}"
                                                                data-modulo-id="{{ $modEsp->id_sesion }}"
                                                                data-sesion-id="{{ $d->id_detalle }}">
                                                                <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">
                                                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 }}"
                                                    data-paid="1" data-publicacion-id="{{ $publicacion->id_curso }}"
                                                    data-modulo-id="{{ $s->id_sesion }}"
                                                    data-sesion-id="{{ $d->id_detalle }}">
                                                    <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">

                    {{-- ========= ÁREA INFORMATIVA (no clases) ========= --}}
                    <div id="info-wrap">
                        {{-- Bienvenida (coloca aquí tu video/imagen/texto) --}}
                        <div class="cuerpo-card cuerpo is-visible" id="bienvenida-card" data-type="bienvenida">


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

                            {{-- <h4>¡Bienvenido a tu formación en Grupo AUGE! </h4> --}}
                            <p>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>
                            @php
                                use Illuminate\Support\Str;

                                $link = trim((string) data_get($publicacion, 'link_video'));
                                $isYouTube = $link && Str::contains($link, ['youtube.com', 'youtu.be']);
                                $embedUrl = null;

                                if ($isYouTube) {
                                    // youtu.be/VIDEOID
                                    if (preg_match('~youtu\.be/([^?&/]+)~i', $link, $m)) {
                                        $vid = $m[1];
                                    }
                                    // youtube.com/watch?v=VIDEOID
                                    elseif (
                                        preg_match('~[?&]v=([^?&/]+)~i', parse_url($link, PHP_URL_QUERY) ?? '', $m)
                                    ) {
                                        $vid = $m[1];
                                    }
                                    // youtube.com/embed/VIDEOID
                                    elseif (preg_match('~youtube\.com/embed/([^?&/]+)~i', $link, $m)) {
                                        $vid = $m[1];
                                    } else {
                                        $vid = null;
                                    }

                                    if (!empty($vid)) {
                                        $embedUrl = 'https://www.youtube.com/embed/' . $vid . '?rel=0&modestbranding=1';
                                    }
                                }
                            @endphp

                            <style>
                                .media-box--iframe {
                                    position: relative;
                                    width: 100%;
                                    padding-top: 56.25%;
                                    /* 16:9 */
                                }

                                .media-box--iframe iframe {
                                    position: absolute;
                                    inset: 0;
                                    width: 100%;
                                    height: 100%;
                                    border: 0;
                                    display: block;
                                    border-radius: 12px;
                                }
                            </style>

                            @if ($embedUrl)
                                {{-- YouTube embebido --}}
                                <div class="media-box media-box--iframe">
                                    <iframe src="{{ $embedUrl }}" title="YouTube video player"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                </div>
                            @elseif (!empty($link))
                                {{-- Archivo propio (storage/CDN) --}}
                                <video class="media-box" controls playsinline preload="metadata"
                                    controlsList="nodownload" oncontextmenu="return false;">
                                    <source src="{{ $link }}" type="video/mp4">
                                    Tu navegador no soporta video HTML5.
                                </video>
                            @else
                                <img src="{{ asset('assets/img/aulavirtual/horario.png') }}" alt="Horarios">
                            @endif



                        </div>

                        {{-- Estructura (coloca aquí tu contenido) --}}
                        <div class="cuerpo-card cuerpo card-scroll-mobile" id="estructura-card" data-type="estructura">
                            <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>

                        {{-- Horario (coloca aquí tu imagen/iframe de horario) --}}
                        <div class="cuerpo-card cuerpo" id="horario-card" data-type="horario">

                            <h2 class="title-estructura">Mi horario</h2>

                            @php
                                $origen = $publicacion->live_course ?? ['titulo' => $publicacion->titulo];
                            @endphp

                            <div class="uk-text-center uk-text-muted uk-margin-small" style="display: none">
                                <small>Programación tomada de: <strong>{{ $origen['titulo'] }}</strong></small>
                            </div>

                            <p>Aquí podrás encontrar las fechas de tus sesiones en vivo, simulacros y actividades
                                importantes.
                                Agrega los recordatorios a tu calendario para no perderte ninguna clase.</p>

                            @php
                                // Alias para no confundirnos
                                $curso = $publicacion;
                                $live = $curso->live ?? [];
                            @endphp

                            {{-- Botón EN VIVO (si está transmitiendo ahora) --}}
                            @if (!empty($curso->link_vivo) && data_get($live, 'en_vivo_ahora'))
                                <div class="uk-margin-small live-cta" aria-live="polite">
                                    <a class="uk-button uk-button-success uk-width-1-1 live-cta__btn"
                                        href="{{ $curso->link_vivo }}" target="_blank" rel="noopener">
                                        <span class="live-cta__dot" aria-hidden="true"></span>
                                        <span class="tag-live">Clases en Vivo</span>
                                        <img src="{{ asset('assets/img/aulavirtual/image41.png') }}" alt=""
                                            class="live-icon" aria-hidden="true">
                                    </a>
                                </div>
                            @endif

                            {{-- Mensajería de programación (SOLO si NO está en vivo ahora) --}}
                            @if (!empty($live) && !data_get($live, 'en_vivo_ahora'))
                                @if (data_get($live, 'proximo_hoy'))
                                    <div class="uk-margin-small uk-text-center notice notice--today" role="status"
                                        aria-live="polite">
                                        <small class="notice__text">
                                            <i class="fas fa-clock"></i>
                                            Próxima sesión: <strong>{{ data_get($live, 'proximo_hoy') }}</strong>
                                            <span class="notice__meta">({{ data_get($live, 'hoy_nombre') }})</span>
                                        </small>
                                    </div>
                                @elseif (data_get($live, 'siguiente_dia') && data_get($live, 'siguiente_hora'))
                                    <div class="uk-margin-small uk-text-center notice notice--next" role="status"
                                        aria-live="polite">
                                        <small class="notice__text">
                                            <span class="notice__badge">No hay clases en vivo hoy</span>
                                            Siguiente clase:
                                            <strong>{{ data_get($live, 'siguiente_dia') }}
                                                {{ data_get($live, 'siguiente_hora') }}</strong>
                                        </small>
                                    </div>
                                @else
                                    <div class="uk-margin-small uk-text-center notice notice--muted">
                                        <small class="notice__text">No hay clases en vivo programadas.</small>
                                    </div>
                                @endif
                            @endif



                            <img src="{{ !empty($horario?->imagen) ? 'https://asistencia.educaauge.com/images_horarios/' . $horario->imagen : asset('assets/img/aulavirtual/horario.png') }}"
                                alt="Horarios" loading="lazy">
                            {{-- tu contenido de horario --}}


                        </div>
                    </div>

                    {{-- ========= ÁREA DE CLASES (separado y oculto por defecto) ========= --}}
                    <div id="clase-area" style="display:none">
                        <div class="title-center">
                            <h2 class="title" id="titulo-clase"></h2>
                        </div>

                        <div id="clase-media"></div>

                        <div class="material" id="material-block" style="display:none">

                            <div id="completed-list"></div>
                            <div id="material-list"></div>

                        </div>

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

        {{-- Modal bloqueo --}}
        <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>

    {{-- ========== JS EXISTENTE (alto dinámico) ========== --}}
    <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, .parte-der video, .parte-der iframe').forEach(function(el) {
            el.addEventListener('load', setTopHeight, {
                once: true
            });
        });
        setTimeout(setTopHeight, 200);
    </script>

    {{-- ========== JS: solo ocultar/mostrar contenedores ========== --}}
    <script>
        (function() {
            const triggerSelector = '.js-detalle';
            const itemSelector = '.item.item-sesion';

            const $infoWrap = document.getElementById('info-wrap');
            const $claseArea = document.getElementById('clase-area');

            const $tituloClase = document.getElementById('titulo-clase');
            const $matBlock = document.getElementById('material-block');
            const $matList = document.getElementById('material-list');
            const $comList = document.getElementById('completed-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 showInfoCard(type) {
                // Mostrar área informativa y ocultar clases
                if ($infoWrap) $infoWrap.style.display = '';
                if ($claseArea) $claseArea.style.display = 'none';

                // Mostrar solo el card cuyo data-type coincide
                document.querySelectorAll('#info-wrap .cuerpo-card').forEach(card => {
                    card.classList.toggle('is-visible', card.dataset.type === type);
                });

                // Limpiar materiales/pdf
                if ($matBlock) {
                    $matList.innerHTML = '';
                    $matBlock.style.display = 'none';
                }
                if ($pdfWrap) {
                    $pdfWrap.style.display = 'none';
                    $pdfFrame.src = '';
                }

                if (typeof setTopHeight === 'function') setTopHeight();
            }

            function showClaseArea() {
                if ($infoWrap) $infoWrap.style.display = 'none';
                if ($claseArea) $claseArea.style.display = '';
                if (typeof setTopHeight === 'function') setTopHeight();
            }

            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');

                    // Mostrar área de clases y setear título (manteniendo tu estructura)
                    showClaseArea();
                    if ($tituloClase) $tituloClase.textContent = (data.detalle?.titulo || 'Clase');

                    // 🆕 Pintar el video o imagen de la sesión
                    const mediaContainer = document.getElementById('clase-media');
                    if (mediaContainer) {
                        if (data.detalle?.link) {
                            mediaContainer.innerHTML = `
                                <video class="media-box" controls playsinline preload="metadata" controlsList="nodownload" oncontextmenu="return false;">
                                    <source src="${data.detalle.link}" type="video/mp4">
                                    Tu navegador no soporta video HTML5.
                                </video>
                            `;
                        } else {
                            mediaContainer.innerHTML = `<img src="{{ asset('assets/img/aulavirtual/horario.png') }}" alt="Imagen por defecto">
                            `;
                        }
                    }

                    const esPdf = data.archivo_url && data.archivo_url.toLowerCase().endsWith('.pdf');
                    const $matTitle = document.getElementById('material-title');


                    // Material / archivo único
                    if (data.archivo_url) {
                        // Siempre muestro el bloque si hay archivo
                        if ($matBlock) $matBlock.style.display = '';

                        // Título: solo si es PDF (previsualizable)
                        if ($matTitle) $matTitle.style.display = esPdf ? '' : 'none';



                        $comList.innerHTML = `
                            <button id="btn-completar" class="btn-complete" 
                                    data-detalle="${data.detalle?.id || ''}">
                            Marcar completado
                            </button>
                        `;

                        // Botón de descarga
                        $matList.innerHTML = `
                            <a href="${data.archivo_url}" target="_blank" class="btn-material">
                                Descargar archivo
                                <img src="{{ asset('assets/img/aulavirtual/image42.png') }}" alt="">
                            </a>
                        `;
                    } else {
                        // Sin material: oculto TODO el bloque
                        if ($matBlock) $matBlock.style.display = 'none';
                    }

                    // PDF preview (solo si es PDF)
                    if (esPdf) {
                        $pdfWrap.style.display = '';
                        $pdfFrame.src = data.archivo_url;
                    } else {
                        $pdfWrap.style.display = 'none';
                        $pdfFrame.src = '';
                    }

                    // Progreso (si llega)
                    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 {
                        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;

                // Informativos (solo toggle de contenedores)
                if (type === 'bienvenida' || type === 'estructura' || type === 'horario') {
                    setActiveItem(li);
                    showInfoCard(type);
                    return;
                }

                // Clases (bloqueo si no pagó en dependientes)
                const paid = (li?.dataset?.paid || '1') === '1';
                if (!paid) {
                    const title = li?.dataset?.coursetitle || '';
                    const payUrl = li?.dataset?.payurl || '#';
                    openNoPagoModal(title, payUrl);
                    return;
                }

                if (!url) return;
                cargarDetalle(url, li);
            });

            // Estado inicial: Bienvenida
            showInfoCard('bienvenida');
        })();
    </script>

@endsection