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

                        @if (!empty($publicacion->estructura_academica))
                            <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>
                        @endif

                        {{-- Horario --}}

                        @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,
                                            ]);
                                            $isVista = in_array($detalle->id_detalle, $vistasIds ?? []);
                                        @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 }}"
                                            @if ($isVista) data-completed="1" @endif>
                                            <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 {{ $isVista ? 'estado-alerta' : 'estado-vacio' }}"
                                                role="img"
                                                aria-label="{{ $isVista ? 'completado' : '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>
                                            <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);
                                                        $isVista = in_array($d->id_detalle, $vistasIds ?? []);
                                                    @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 }}"
                                                        @if ($isVista) data-completed="1" @endif>
                                                        <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 {{ $isVista ? 'estado-alerta' : 'estado-vacio' }}"
                                                            role="img"
                                                            aria-label="{{ $isVista ? 'completado' : '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);
                                                            $isVista = in_array($d->id_detalle, $vistasIds ?? []);
                                                        @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 }}"
                                                            @if ($isVista) data-completed="1" @endif>
                                                            <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 {{ $isVista ? 'estado-alerta' : 'estado-vacio' }}"
                                                                role="img"
                                                                aria-label="{{ $isVista ? 'completado' : '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,
                                                                );
                                                                $isVista = in_array($d->id_detalle, $vistasIds ?? []);
                                                            @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 }}"
                                                                @if ($isVista) data-completed="1" @endif>
                                                                <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 {{ $isVista ? 'estado-alerta' : 'estado-vacio' }}"
                                                                    role="img"
                                                                    aria-label="{{ $isVista ? 'completado' : '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,
                                                    ]);
                                                    $isVista = in_array($d->id_detalle, $vistasIds ?? []);
                                                @endphp
                                                <li class="item item-sesion" data-url="{{ $detUrl }}"
                                                    data-paid="1" data-publicacion-id="{{ $esp->id_curso }}"
                                                    data-modulo-id="{{ $s->id_sesion }}"
                                                    data-sesion-id="{{ $d->id_detalle }}"
                                                    @if ($isVista) data-completed="1" @endif>
                                                    <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 {{ $isVista ? 'estado-alerta' : 'estado-vacio' }}"
                                                        role="img"
                                                        aria-label="{{ $isVista ? 'completado' : '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>

                            {{-- CSS/JS del player protegido siempre disponible para carga dinámica --}}
                            @include('partials.video-player-protected', ['styleOnly' => true])

                            @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))
                                @php
                                    $esDominioEducauge = str_contains($link, 'bucket.educaauge.com') ||
                                                         str_contains($link, 'storage.googleapis.com/bucket-auge-oficial');
                                @endphp
                                @if ($esDominioEducauge)
                                    @php
                                        $secureGrabadaUrl = \App\Http\Controllers\VideoProxyController::generateSecureUrl($link);
                                    @endphp
                                    @include('partials.video-player-protected', [
                                        'videoSrc' => $secureGrabadaUrl,
                                        'playerId' => 'grabada-player-inicial',
                                    ])
                                @else
                                    {{-- 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>
                                @endif
                            @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>
                            {!! $publicacion->estructura_academica !!}
                        </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;
                                $lives = $curso->all_lives ?? collect();

                                // Detectar si al menos UNA entrada tiene clase HOY (en vivo ahora o próxima hoy)
                                $hasToday = false;
                                foreach($lives as $lv) {
                                    $inf = data_get($lv, 'live') ?? [];
                                    if (data_get($inf, 'en_vivo_ahora') || data_get($inf, 'proximo_hoy')) { $hasToday = true; break; }
                                }
                            @endphp

                            {{-- Renderizar todos los lives (si los hay) --}}
                            @foreach($lives as $live)
                                @php $infoLive = data_get($live, 'live') ?? []; @endphp

                                @if ($hasToday)
                                    {{-- Mostrar sólo las entradas de HOY (puede haber más de una) --}}
                                    @if (data_get($infoLive, 'en_vivo_ahora') || data_get($infoLive, 'proximo_hoy'))
                                        @if (!empty($live['link_vivo']) && data_get($infoLive, '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 btn-live"
                                                    href="{{ $live['link_vivo'] }}" target="_blank" rel="noopener"
                                                    data-curso-general="{{ $publicacion->id_curso }}"
                                                    data-curso-link="{{ $live['id'] ?? $publicacion->id_curso }}">
                                                    <span class="live-cta__dot" aria-hidden="true"></span>
                                                    <span class="tag-live">{{ in_array($live['tipo'], ['especialidad','especialidad_hijo']) ? 'Clases de especialidad' : 'Clases en Vivo' }}</span>
                                                    <img src="{{ asset('assets/img/aulavirtual/image41.png') }}" alt=""
                                                        class="live-icon" aria-hidden="true">
                                                </a>
                                            </div>
                                        @else
                                            @if (data_get($infoLive, '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($infoLive, 'proximo_hoy') }}</strong>
                                                        <span class="notice__meta">({{ data_get($infoLive, 'hoy_nombre') }})</span>
                                                    </small>
                                                </div>
                                            @endif
                                        @endif
                                    @endif
                                @else
                                    {{-- No hay clases hoy en ninguno: mostrar próximos por live --}}
                                    @if (!empty($live['link_vivo']) && data_get($infoLive, '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 btn-live"
                                                href="{{ $live['link_vivo'] }}" target="_blank" rel="noopener"
                                                data-curso-general="{{ $publicacion->id_curso }}"
                                                data-curso-link="{{ $live['id'] ?? $publicacion->id_curso }}">
                                                <span class="live-cta__dot" aria-hidden="true"></span>
                                                <span class="tag-live">{{ in_array($live['tipo'], ['especialidad','especialidad_hijo']) ? 'Clases de especialidad' : 'Clases en Vivo' }}</span>
                                                <img src="{{ asset('assets/img/aulavirtual/image41.png') }}" alt=""
                                                    class="live-icon" aria-hidden="true">
                                            </a>
                                        </div>
                                    @endif

                                    @if (!empty($infoLive) && !data_get($infoLive, 'en_vivo_ahora'))
                                        @if (data_get($infoLive, '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($infoLive, 'proximo_hoy') }}</strong>
                                                    <span class="notice__meta">({{ data_get($infoLive, 'hoy_nombre') }})</span>
                                                </small>
                                            </div>
                                        @elseif (data_get($infoLive, 'siguiente_dia') && data_get($infoLive, '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($infoLive, 'siguiente_dia') }} {{ data_get($infoLive, '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
                                @endif
                            @endforeach



                            <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">
                        Comprar Módulo
                    </a>
                </div>
            </div>
        </div>

        {{-- Modal de archivos múltiples --}}
        <div id="modal-archivos" uk-modal>
            <div class="uk-modal-dialog uk-modal-body uk-modal-body-large" style="max-width: 900px;">
                <button class="uk-modal-close-default" type="button" uk-close></button>
                <h3 class="uk-modal-title">Materiales de la sesión</h3>
                
                <div class="uk-margin" id="archivos-container">
                    <!-- Se llena dinámicamente con el listado de archivos -->
                </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>

    <script>
        // Función global para abrir modal de archivos (fuera del IIFE)
        function abrirModalArchivos(archivos) {
            const container = document.getElementById('archivos-container');
            if (!container) return;

            let html = '<div class="uk-child-width-1-1" uk-grid>';

            archivos.forEach((archivo, idx) => {
                const isPdf = archivo.es_pdf;
                
                // Tarjeta del archivo - solo título e ícono de descarga
                html += `
                    <div style="margin: 10px 0;">
                        <div class="uk-card uk-card-default uk-padding-small">
                            <div class="uk-flex uk-flex-between uk-flex-middle">
                                <div class="uk-flex-1">
                                    <h4 class="titulo-material-modal">
                                        <i class="fas fa-${isPdf ? 'file-pdf' : 'file-archive'}" style="color: ${isPdf ? '#d32f2f' : '#1976d2'}; margin-right: 8px;"></i>
                                        ${archivo.titulo}
                                    </h4>
                                </div>
                                <a href="${archivo.url}" target="_blank" class="uk-link-muted" download title="Descargar">
                                    <i class="fas fa-download" style="font-size: 20px;"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                `;
            });

            html += '</div>';
            container.innerHTML = html;

            // Abrir el modal
            if (window.UIkit && UIkit.modal) {
                UIkit.modal('#modal-archivos').show();
            }
        }

        (function() {
            // ====== CONFIG / VARS GLOBALES ======
            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');

            // Vars que vienen de Blade (ya definidas arriba del script en el Blade)
            var islogeado = {!! session()->has('suscrito') ? 'true' : 'false' !!};
            var totalClases = {{ (int) ($totalClases ?? 0) }};
            var completadas = {{ (int) ($completadas ?? 0) }};
            var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.content || "{{ csrf_token() }}";
            var AVANCE_URL = "{{ route('avance.store') }}";

            let lastLiClicked = null; // li activo
            let lastWasCompleted = false; // estado previo de completado

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

            function showInfoCard(type) {
                // Detener cualquier video o iframe activo
                document.querySelectorAll(
                    '#clase-media video, #clase-media iframe, #info-wrap video, #info-wrap iframe').forEach(el => {
                    // Pausar videos HTML5
                    if (el.tagName === 'VIDEO') {
                        el.pause();
                        el.currentTime = 0;
                    }
                    // Detener iframes de YouTube recargando su src
                    if (el.tagName === 'IFRAME') {
                        el.src = el.src;
                    }
                });

                if ($infoWrap) $infoWrap.style.display = '';
                if ($claseArea) $claseArea.style.display = 'none';

                document.querySelectorAll('#info-wrap .cuerpo-card').forEach(card => {
                    card.classList.toggle('is-visible', card.dataset.type === type);
                });

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

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

            function showClaseArea() {
                // 🔹 detener cualquier video o iframe activo antes de mostrar clase
                document.querySelectorAll('#info-wrap video, #info-wrap iframe').forEach(el => {
                    if (el.tagName === 'VIDEO') {
                        el.pause();
                        el.currentTime = 0;
                    }
                    if (el.tagName === 'IFRAME') {
                        el.src = el.src;
                    }
                });


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

            function notifyOK(msg) {
                if (window.Swal) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Correcto',
                        text: msg,
                        timer: 2200,
                        showConfirmButton: false
                    });
                } else if (window.UIkit?.notification) {
                    UIkit.notification({
                        message: msg,
                        status: 'success',
                        timeout: 2200
                    });
                } else {
                    alert(msg);
                }
            }

            function notifyERR(msg) {
                if (window.Swal) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: msg,
                        timer: 3000,
                        showConfirmButton: false
                    });
                } else if (window.UIkit?.notification) {
                    UIkit.notification({
                        message: msg,
                        status: 'danger',
                        timeout: 3000
                    });
                } else {
                    alert(msg);
                }
            }

            // Detecta si el ítem ya está completado (por dataset o por clase .estado-alerta o por API)
            function isLiCompleted(li, data) {
                const apiCompleted = !!(data?.detalle?.completado || data?.completado || data?.ya_completado);
                if (apiCompleted) return true;

                if ((li?.dataset?.completed || '') === '1') return true;

                const estado = li?.querySelector?.('.estado');
                if (estado && estado.classList.contains('estado-alerta')) return true;

                return false;
            }

            // Marca visualmente un li como completado (usa .estado-alerta)
            function markLiAsCompleted(li) {
                const estado = li?.querySelector?.('.estado');
                if (estado) {
                    estado.classList.remove('estado-vacio');
                    estado.classList.add('estado-alerta');
                    estado.setAttribute('aria-label', 'completado');
                }
                if (li) li.dataset.completed = '1';
            }

            // 🔹 UI helper: actualiza la barra
            function updateProgressUI(p) {
                const pct = Math.max(0, Math.min(100, parseInt(p || 0, 10)));
                if ($progFill) {
                    $progFill.style.width = pct + '%';
                    $progFill.setAttribute('aria-valuenow', pct);
                }
                if ($progText) $progText.textContent = pct + '% completado';
            }

            // 🔹 Recalcula desde el DOM (todas las clases accesibles/no bloqueadas)
            function recalcProgressFromDOM() {
                const estados = Array.from(
                    document.querySelectorAll('.parte-izq li.item.item-sesion:not(.is-locked) .estado')
                );
                const done = estados.filter(e => e.classList.contains('estado-alerta')).length;
                totalClases = estados.length; // pisa valores de Blade
                completadas = done; // pisa valores de Blade
                const p = totalClases ? Math.round((done / totalClases) * 100) : 0;
                updateProgressUI(p);
            }

            // Si el backend del detalle indica completado, sincroniza el li y recalcula el % local
            function syncLiFromDetalle(li, data) {
                const ya = !!(data?.detalle?.completado);
                if (ya && li && li.dataset.completed !== '1') {
                    markLiAsCompleted(li);
                    recalcProgressFromDOM();
                }
            }

            // ====== CORE: CARGAR DETALLE ======
            async function cargarDetalle(url, li) {
                try {
                    lastLiClicked = li;
                    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');

                    showClaseArea();
                    if ($tituloClase) $tituloClase.textContent = (data.detalle?.titulo || 'Clase');

                    // Media
                    const mediaContainer = document.getElementById('clase-media');
                    if (mediaContainer) {
                        if (data.detalle?.link) {
                            const linkVideo = data.detalle.link;
                            // El backend proxifica las URLs de gstorage/bucket; al frontend llega
                            // /stream-video?token=... Usamos el player protegido en ese caso.
                            const esProtegido = linkVideo.includes("/stream-video") ||
                                                linkVideo.includes("bucket.educaauge.com") ||
                                                linkVideo.includes("storage.googleapis.com/bucket-auge-oficial");
                            if (esProtegido) {
                                const uniquePlayerId = 'grabada-player-' + Date.now();
                                mediaContainer.innerHTML = `
                                    <div class="video-player-wrapper" id="${uniquePlayerId}">
                                        <video class="video-element" src="${linkVideo}" preload="auto" playsinline webkit-playsinline="true"></video>
                                        <div class="custom-controls">
                                            <div class="center-play-btn"><i class="fas fa-play"></i></div>
                                            <div class="controls-bottom-bar">
                                                <div class="progress-container">
                                                    <div class="progress-bar-track">
                                                        <div class="progress-buffer-bar"></div>
                                                        <div class="progress-filled-bar"></div>
                                                        <div class="progress-thumb"></div>
                                                    </div>
                                                    <div class="time-tooltip">00:00</div>
                                                </div>
                                                <div class="controls-buttons-row">
                                                    <div class="left-controls">
                                                        <button class="control-btn play-pause-btn" type="button"><i class="fas fa-play"></i></button>
                                                        <div class="time-display">
                                                            <span class="current-time">0:00</span> / <span class="total-duration">0:00</span>
                                                        </div>
                                                    </div>
                                                    <div class="right-controls">
                                                        <div class="speed-container">
                                                            <button class="speed-btn" type="button" aria-haspopup="true" aria-expanded="false" aria-label="Velocidad de reproducción">1x</button>
                                                            <div class="speed-menu" role="menu" aria-label="Velocidad de reproducción">
                                                                <button class="speed-option" type="button" role="menuitemradio" aria-checked="false" data-speed="0.5">0.5x</button>
                                                                <button class="speed-option" type="button" role="menuitemradio" aria-checked="false" data-speed="0.75">0.75x</button>
                                                                <button class="speed-option active" type="button" role="menuitemradio" aria-checked="true" data-speed="1">1x</button>
                                                                <button class="speed-option" type="button" role="menuitemradio" aria-checked="false" data-speed="1.25">1.25x</button>
                                                                <button class="speed-option" type="button" role="menuitemradio" aria-checked="false" data-speed="1.5">1.5x</button>
                                                                <button class="speed-option" type="button" role="menuitemradio" aria-checked="false" data-speed="2">2x</button>
                                                            </div>
                                                        </div>
                                                        <div class="volume-container">
                                                            <button class="control-btn volume-btn" type="button"><i class="fas fa-volume-up"></i></button>
                                                            <div class="volume-slider-wrapper">
                                                                <input type="range" class="volume-slider" min="0" max="1" step="0.05" value="1">
                                                            </div>
                                                        </div>
                                                        <button class="control-btn fullscreen-btn" type="button"><i class="fas fa-expand"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="loading-overlay"><div class="spinner"></div></div>
                                    </div>`;
                                if (typeof window.initializeProtectedPlayer === 'function') {
                                    window.initializeProtectedPlayer(uniquePlayerId);
                                }
                            } else {
                                mediaContainer.innerHTML = `
                                    <video class="media-box" controls playsinline preload="metadata" controlsList="nodownload" oncontextmenu="return false;">
                                    <source src="${linkVideo}" type="video/mp4">
                                    Tu navegador no soporta video HTML5.
                                    </video>`;
                            }
                        } else {
                            mediaContainer.innerHTML =
                                `<img src="{{ asset('assets/img/aulavirtual/clases.jpg') }}" alt="Imagen por defecto">`;
                        }
                    }

                    const $matTitle = document.getElementById('material-title');

                    // Material / archivos múltiples
                    const archivos = data.archivos || [];
                    if (archivos.length > 0) {
                        if ($matBlock) $matBlock.style.display = '';
                        if ($matTitle) $matTitle.style.display = archivos.some(a => a.es_pdf) ? '' : 'none';

                        // IDs desde el li activo
                        const pubId = li?.dataset?.publicacionId || '';
                        const modId = li?.dataset?.moduloId || '';
                        const sesId = li?.dataset?.sesionId || (data.detalle?.id ?? '');

                        // ¿ya completado?
                        lastWasCompleted = isLiCompleted(li);

                        // Botón (si no está completado) o nada
                        if (!lastWasCompleted) {
                            $comList.innerHTML = `
                                <button id="btn-completar" class="btn-complete"
                                        data-id="${sesId}"
                                        data-id-detalle="${modId}"
                                        data-publicacion-id="${pubId}">
                                Marcar completado
                                </button>`;
                        } else {
                            $comList.innerHTML = '';
                        }

                        // Si hay múltiples archivos: mostrar botón para abrir modal
                        // Si hay 1 archivo: mostrar botón de descarga directo
                        if (archivos.length > 1) {
                            $matList.innerHTML = `
                                <button class="btn-material" onclick="abrirModalArchivos(${JSON.stringify(archivos).replace(/"/g, '&quot;')})">
                                    Ver ${archivos.length} archivos
                                    <img src="{{ asset('assets/img/aulavirtual/image42.png') }}" alt="">
                                </button>`;
                        } else {
                            // Un solo archivo
                            const archivo = archivos[0];
                            $matList.innerHTML = `
                                <a href="${archivo.url}" target="_blank" class="btn-material">
                                    Descargar archivo
                                    <img src="{{ asset('assets/img/aulavirtual/image42.png') }}" alt="">
                                </a>`;
                        }
                    } else {
                        if ($matBlock) $matBlock.style.display = 'none';
                        $comList.innerHTML = '';
                        $matList.innerHTML = '';
                    }

                    // PDF preview (todos los PDFs)
                    const pdfsArchivos = archivos.filter(a => a.es_pdf);
                    if (pdfsArchivos.length > 0) {
                        $pdfWrap.style.display = '';
                        
                        // Generar un iframe por cada PDF
                        let pdfsHtml = '';
                        pdfsArchivos.forEach((pdf, idx) => {
                            pdfsHtml += `
                                <div class="uk-margin-medium-bottom">
                                    <h3 class="titulo-material-previsualizacion">${pdf.titulo}</h3>
                                    <iframe src="${pdf.url}" width="100%" height="800px" style="border: none;"></iframe>
                                </div>
                            `;
                        });
                        
                        $pdfFrame.style.display = 'none';
                        const pdfContainer = $pdfWrap.querySelector('.pdf-container') || (() => {
                            const div = document.createElement('div');
                            div.className = 'pdf-container';
                            $pdfWrap.appendChild(div);
                            return div;
                        })();
                        pdfContainer.innerHTML = pdfsHtml;
                    } else {
                        $pdfWrap.style.display = 'none';
                        $pdfFrame.src = '';
                    }
                } 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 NO PAGO ======
            function openNoPagoModal(courseTitle, payUrl, cursoBloqueadoId) {
                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.onclick = function(e) {
                        e.preventDefault();
                        seleccionarPlanMensual('mensual', cursoBloqueadoId);
                    };

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


            function seleccionarPlanMensual(tipoPago, cursoBloqueadoId = null) {
                const curso_idp = {{ $publicacion->id_curso }}; // curso principal desde Blade

                const paymentParams = {
                    tipoPago,
                    curso_idp, // curso principal
                    curso_bloqueado: cursoBloqueadoId // dependiente/especialidad
                };

                const secureParams = btoa(JSON.stringify(paymentParams));
                const checkoutRoute = `/checkout-data/${secureParams}`;
                window.open(checkoutRoute, '_blank');

            }


            // ====== CLICK EN LISTA (abrir detalle) ======
            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
                if (type === 'bienvenida' || type === 'estructura' || type === 'horario') {
                    setActiveItem(li);
                    showInfoCard(type);
                    return;
                }

                // Bloqueo si no pagó (para dependientes/especialidades de dependientes)
                const paid = (li?.dataset?.paid || '1') === '1';
                if (!paid) {
                    const title = li?.dataset?.coursetitle || '';
                    const payUrl = li?.dataset?.payurl || '#';
                    const cursoBloqueadoId = li?.dataset?.publicacionId || null;
                    openNoPagoModal(title, payUrl, cursoBloqueadoId);
                    return;
                }


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

            // ====== CLICK EN "MARCAR COMPLETADO" (delegado) ======
            $('#clase-area').on('click', '#btn-completar', function() {
                if (!islogeado) {
                    if (window.UIkit?.modal) UIkit.modal('#loginModal').show();
                    return;
                }

                const $btn = $(this);
                const sesionId = $btn.attr('data-id'); // id_detalle
                const moduloId = $btn.attr('data-id-detalle'); // id_sesion
                const publicId = $btn.attr('data-publicacion-id');

                if (!publicId || !moduloId || !sesionId) {
                    notifyERR('Faltan datos para guardar el avance.');
                    return;
                }

                $btn.prop('disabled', true);

                $.ajax({
                    url: AVANCE_URL,
                    type: 'POST',
                    data: {
                        _token: CSRF_TOKEN,
                        publicacion_id: Number(publicId),
                        sesion_id: Number(sesionId),
                        modulo_id: Number(moduloId)
                    },
                    success: function(response) {
                        if (!response || response.success !== true) {
                            throw new Error(response?.message || 'No se pudo guardar el avance.');
                        }

                        notifyOK('Sesión Completada');
                        $btn.hide();

                        if (lastLiClicked) {
                            markLiAsCompleted(
                                lastLiClicked); // pone .estado-alerta y data-completed=1
                        }

                        // Si el backend manda porcentaje, úsalo; luego alinea con el DOM siempre.
                        if (response.progreso && typeof response.progreso.porcentaje !==
                            'undefined') {
                            updateProgressUI(response.progreso.porcentaje);
                        }
                        recalcProgressFromDOM();
                    },
                    error: function(xhr) {
                        const msg = xhr?.responseJSON?.message ||
                            'Hubo un problema al guardar tu progreso. Inténtalo nuevamente.';
                        notifyERR(msg);
                        $btn.prop('disabled', false);
                    }
                });
            });

            // ====== ESTADO INICIAL ======
            showInfoCard('bienvenida'); // muestra bienvenida
            recalcProgressFromDOM(); // calcula progreso real desde el DOM al cargar

            // ====== CLICK EN "EN VIVO" ======
            document.addEventListener("click", function(e) {
                const btn = e.target.closest(".btn-live");
                if (!btn) return;

                const idCursoGeneral = btn.dataset.cursoGeneral;
                const idModulo = btn.dataset.cursoLink;

                fetch("{{ route('registrar.asistencia') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": CSRF_TOKEN
                        },
                        body: JSON.stringify({
                            id_curso: idCursoGeneral,
                            id_modulo: idModulo
                        })
                    })
                    .then(r => r.json())
                    .then(data => {
                        console.log("Asistencia grabada:", data);
                    })
                    .catch(err => console.error("Error registrando asistencia:", err));
            });


        })();
    </script>

    <script>
        // Abre solo el primer <details> y cierra el resto
        function openOnlyFirstDetails() {
            const groups = document.querySelectorAll('.parte-izq details.grupo');
            groups.forEach((el, i) => {
                el.open = (i === 0);
            });
        }

        // Acordeón: al abrir uno, cierra los demás
        function enableAccordionBehavior() {
            document.addEventListener('toggle', function(e) {
                const d = e.target;
                if (!d.matches('.parte-izq details.grupo')) return;
                if (d.open) {
                    document.querySelectorAll('.parte-izq details.grupo').forEach(other => {
                        if (other !== d) other.open = false;
                    });
                }
            }, true);
        }

        window.addEventListener('DOMContentLoaded', function() {
            openOnlyFirstDetails();
            enableAccordionBehavior();
        });
    </script>



@endsection