@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') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/aulavirtual/guias.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/aulavirtual/miscursos.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/aulavirtual/examenes.css') }}" />
    <style>
        .titulo-curso {
            --lines: 2;
        }
    </style>
@endsection
@section('content')
    <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/' . $curso->titulo_rewrite) }}" class="btn-back">
                        <span uk-icon="icon: chevron-left"></span> Regresar al curso
                    </a>

                    <ul class="side-menu uk-margin-top">

                        @if ($curso->modalidad == 2)
                            <li class="side-item" data-type="envivo">
                                <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                                Clases virtuales EN VIVO
                            </li>
                        @endif
                        <li class="side-item" data-url="{{ url('sesionesgrabadas/' . $curso->titulo_rewrite) }}">
                            <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                            Sesiones Grabadas
                        </li>
                        <li class="side-item" data-type="acompanamiento" style="display: none;">
                            <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                            Acompañamiento Personalizado
                        </li>

                        @if ($examenes->isNotEmpty())
                            <li class="side-item" data-type="simulacros">
                                <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                                Exámenes Simulacro
                            </li>
                        @endif
                        <li class="side-item" data-type="BancoPreguntas" style="display: none;">
                            <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">Banco
                            de Preguntas
                        </li>
                        @if (!empty($curso->link_whatsapp_interno))
                            <li class="side-item" data-type="GrupoWhatsApp">
                                <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                                Grupo Exclusivo de WhatsApp
                            </li>
                        @endif
                        @if (!empty($curso->link_telegram_interno))
                            <li class="side-item" data-type="GrupoTelegram">
                                <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                                Grupo Exclusivo de Telegram
                            </li>
                        @endif
                        @if ($guias->isNotEmpty())
                            <li class="side-item" data-type="GuiasDescargables">
                                <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                                Guías Descargables y Resúmenes
                            </li>
                        @endif
                        <li class="side-item" data-type="ZonaDocente" style="display: none;">
                            <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                            Zona Docente
                        </li>
                        <li class="side-item" data-type="Certificado">
                            <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt=""
                                class="img-ico">Certificado
                        </li>
                        <li class="side-item" data-type="sesioncoaching" style="display: none;">
                            <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                            Sesión de Coaching
                        </li>
                        <li class="side-item" data-url="https://certificados.educaauge.com" style="display: none;">
                            <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">Mini
                            Curso GRATUITO
                        </li>
                        <li class="side-item" data-url="{{ url('aulavirtual/soporte/' . $curso->titulo_rewrite) }}">
                            <img src="{{ asset('assets/img/aulavirtual/group.png') }}" alt="" class="img-ico">
                            Soporte Técnico Plataforma
                        </li>



                    </ul>
                </aside>

                <!-- CONTENIDO (derecha) -->
                <!-- CONTENIDO (derecha) -->
                <section class="uk-width-3-4@m parte-der">
                    <div id="panel-envivo" class="panel-content" data-type="envivo">
                        <div class="header-center">
                            <h2 class="title">🎥 Clases Virtuales EN VIVO</h2>
                            <p class="subtitle">Accede a tus sesiones en vivo según tu horario.</p>
                        </div>
                        <div class="uk-text-center">
                            @php
                                $lives = $curso->all_lives ?? collect();
                                $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 varios lives (orden cronológico) --}}
                            @foreach($lives as $live)
                                @php $infoLive = data_get($live, 'live') ?? []; @endphp

                                @if ($hasToday)
                                    {{-- Mostrar sólo los lives que son HOY (pueden ser varios) --}}
                                    @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"
                                                    data-curso-general="{{ $curso->id_curso }}"
                                                    data-curso-link="{{ $live['id'] ?? $curso->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 de los lives: comportamiento anterior --}}
                                    @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"
                                                data-curso-general="{{ $curso->id_curso }}"
                                                data-curso-link="{{ $live['id'] ?? $curso->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

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


                    </div>

                    <div id="panel-grabadas" class="panel-content" data-type="grabadas">
                        <h2>🎞 Sesiones Grabadas</h2>
                        <p>Aquí estarán tus clases grabadas.</p>
                    </div>

                    <div id="panel-soportetecnico" class="panel-content" data-type="soportetecnico">
                        <h2>🛠 Soporte Técnico</h2>
                        <p>Si tienes problemas técnicos, contáctanos.</p>
                    </div>

                    <div id="panel-acompanamiento" class="panel-content" data-type="acompanamiento">
                        <h2>🤝 Acompañamiento Personalizado</h2>
                        <p>Conoce a tu mentor asignado.</p>
                    </div>

                    <div id="panel-examenes" class="panel-content card-scroll-mobile" data-type="simulacros">
                        <div class="uk-section uk-padding-remove banner-guias uk-position-relative">

                            {{-- Imagen de fondo --}}
                            <img src="{{ asset('assets/img/aulavirtual/portada-simulacro.png') }}"
                                alt="Guías Descargables" class="uk-width-1-1 uk-object-cover">

                            {{-- Texto encima --}}
                            <div class="uk-position-center uk-text-center">
                                <h2>📝 Exámenes Simulacro</h2>
                                <p>Pon a prueba tus conocimientos con simulacros similares a los oficiales.</p>
                            </div>
                        </div>

                        <div class="encabezado-tab">
                            <a href="{{ url('/examenesdesarrollados') }}" class="uk-button uk-button-primary">
                                EXÁMENES RESUELTOS
                            </a>
                        </div>

                        <div>
                            <table
                                class="uk-table uk-table-divider uk-table-middle uk-table-hover uk-table-responsive exam-table">
                                <thead>
                                    <tr>
                                        <th># EXAMEN</th>
                                        <th>PRIVACIDAD</th>
                                        <th>FECHA ACTIVA</th>
                                        <th>HORA ACTIVA</th>
                                        <th>CANT. INTENTOS / EFECTUADOS</th>
                                        <th>ESTADO</th>
                                        <th>ACCIÓN</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach ($examenes as $index => $examen)
                                        <tr class="fila-table">
                                            <td>
                                                <div class="exam-title">
                                                    <span class="exam-num">{{ $index + 1 }}</span>
                                                    <div
                                                        class="border {{ $examen->intentos_realizados >= $examen->intentos_totales ? 'border-red' : 'border-green' }} titulo-exam">
                                                        {{ $examen->titulo }}
                                                    </div>
                                                </div>
                                            </td>

                                            <td data-label="PRIVACIDAD: ">
                                                @switch($examen->privacidad)
                                                    @case(1)
                                                        Por curso
                                                    @break

                                                    @case(2)
                                                        Gratuito
                                                    @break

                                                    @case(3)
                                                        Pagado
                                                    @break

                                                    @case(4)
                                                        Beca
                                                    @break

                                                    @default
                                                        ---
                                                @endswitch
                                            </td>

                                            <td data-label="FECHA ACTIVA: ">{{ $examen->fecha_compra ?? '---' }}</td>
                                            <td data-label="HORA ACTIVA: ">{{ $examen->hora_apertura ?? 'Sin datos' }}
                                            </td>
                                            <td data-label="CANT. INTENTOS / EFECTUADOS: ">
                                                {{ $examen->intentos_realizados }} / {{ $examen->intentos_totales }}
                                            </td>

                                            <td data-label="ESTADO: ">
                                                @if ($examen->intentos_realizados >= $examen->intentos_totales)
                                                    <span class="estado_exam btn-rendido">Rendido</span>
                                                @else
                                                    <span class="estado_exam btn-activo">Activo</span>
                                                @endif
                                            </td>

                                            <td>
                                                @if ($examen->intentos_realizados < $examen->intentos_totales)
                                                    @if (!$examen->bloqueado)
                                                        <a href="{{ url('examen/' . $examen->titulo_rewrite) }}"
                                                            class="btn-resolver btn-estilo">
                                                            <img src="{{ asset('assets/img/aulavirtual/play.png') }}"
                                                                alt="" />RESOLVER
                                                        </a>
                                                        @if ($examen->mensaje_bloqueo)
                                                            <div class="descrip-exam uk-text-meta uk-margin-small-top">
                                                                {{ $examen->mensaje_bloqueo }}
                                                            </div>
                                                        @endif
                                                    @else
                                                        <button class="btn-nodisponible" disabled>
                                                            <span uk-icon="icon: lock"></span>
                                                            {{ $examen->mensaje_bloqueo }}
                                                        </button>
                                                    @endif
                                                @else
                                                    <button class="btn-nodisponible btn-estilo"
                                                        uk-toggle="target: #modal-intentos-{{ $examen->id_examen }}">
                                                        NO DISPONIBLE
                                                    </button>

                                                    <!-- Modal intentos agotados -->
                                                    <div id="modal-intentos-{{ $examen->id_examen }}" uk-modal>
                                                        <div class="uk-modal-dialog uk-modal-body uk-text-center">
                                                            <h2 class="uk-modal-title">Intentos agotados</h2>
                                                            <p>
                                                                Has realizado
                                                                <strong>{{ $examen->intentos_realizados }}</strong>
                                                                de
                                                                <strong>{{ $examen->intentos_totales }}</strong> intentos
                                                                permitidos.
                                                            </p>
                                                            <div class="para-botones">
                                                                <a href="https://api.whatsapp.com/send/?phone=51957668571&text=Hola%2C+necesito+m%C3%A1s+informaci%C3%B3n+sobre+{{ urlencode($examen->titulo) }}"
                                                                    target="_blank"
                                                                    class="uk-button uk-button-primary uk-button-small">
                                                                    <span uk-icon="icon: whatsapp"></span> Contactar por
                                                                    WhatsApp
                                                                </a>
                                                                <button class="uk-button uk-button-default uk-modal-close"
                                                                    type="button">
                                                                    Cerrar
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach


                                </tbody>
                            </table>
                        </div>
                    </div>


                    <div id="panel-GuiasDescargables" class="panel-content card-scroll-mobile"
                        data-type="GuiasDescargables">
                        <div class="uk-section uk-padding-remove banner-guias uk-position-relative">

                            {{-- Imagen de fondo --}}
                            <img src="{{ asset('assets/img/aulavirtual/portada-guia.png') }}" alt="Guías Descargables"
                                class="uk-width-1-1 uk-object-cover">

                            {{-- Texto encima --}}
                            <div class="uk-position-center uk-text-center">
                                <h2>
                                    📑 Guías Descargables y Resúmenes
                                </h2>
                                <p>
                                    Material en PDF con lo esencial para estudiar mejor y ahorrar tiempo.
                                </p>
                            </div>
                        </div>



                        @if ($guias->isEmpty())
                            <p class="uk-text-center">No hay guías disponibles para tu especialidad.</p>
                        @else
                            <div class="uk-grid-small uk-child-width-1-3@m uk-text-center" uk-grid>
                                @foreach ($guias as $guia)
                                    <div>
                                        <a href="{{ env('URL_ARCHIVOS') . '/files/archivos-guias/' . $guia->archivo }}"
                                            target="_blank">
                                            <div class="card-curso">
                                                <div class="uk-card-media-top">
                                                    <img src="{{ env('URL_ARCHIVOS') . '/images/images-guias/' . $guia->imagen }}"
                                                        alt="{{ $guia->nombre }}" class="uk-border-rounded">
                                                </div>
                                                <div class="card-body">
                                                    <p class="titulo-curso">{{ $guia->nombre }}</p>

                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>


                    <div id="panel-ZonaDocente" class="panel-content" data-type="ZonaDocente">
                        <h2>👩‍🏫 Zona Docente</h2>
                        <p>Recursos exclusivos para docentes.</p>
                    </div>

                    <div id="panel-sesioncoaching" class="panel-content" data-type="sesioncoaching">
                        <h2>🎯 Sesión de Coaching</h2>
                        <p>Reserva tu espacio de coaching personalizado.</p>
                    </div>

                    <div id="panel-cursoGratis" class="panel-content" data-type="cursoGratis">
                        <h2>🎁 Mini Curso Gratuito</h2>
                        <p>Accede a tu curso adicional sin costo.</p>
                    </div>

                    <div id="panel-whatsapp" class="panel-content" data-type="GrupoWhatsApp">
                        <div class="header-center">
                            <h2 class="title">👥 Grupo Exclusivo de WhatsApp</h2>
                            <p class="subtitle">Recibe recordatorios, tips y comparte con otros compañeros.</p>
                        </div>
                        <div class="uk-text-center">
                            <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="{{ $curso->link_whatsapp_interno }}" target="_blank">
                                    <span uk-icon="icon: whatsapp"></span>
                                    <span class="tag-live">Unirme al grupo exclusivo</span>
                                </a>
                            </div>

                        </div>
                        <div class="envivo-card">
                            <a href="{{ $curso->link_whatsapp_interno }}" target="_blank">
                                <img src="{{ asset('assets/img/aulavirtual/portadawhatsapp.png') }}" alt="Horarios"
                                    loading="lazy">
                            </a>
                        </div>

                    </div>

                    <div id="panel-telegram" class="panel-content" data-type="GrupoTelegram">
                        <div class="header-center">
                            <h2 class="title">👥 Grupos Exclusivos de Telegram</h2>
                            <p class="subtitle">Recibe recordatorios, tips y comparte con otros compañeros.</p>
                        </div>
                        <div class="uk-text-center">
                            @if ($linkTelegramGeneral)
                                <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" style="background: #0088CC !important;"
                                        href="{{ $linkTelegramGeneral->link }}" target="_blank">
                                        <span uk-icon="icon: telegram"></span>
                                        <span class="tag-live">Unirme al Grupo General</span>
                                    </a>
                                </div>
                            @endif

                            @if ($linkTelegramEspecialidad)
                                <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" style="background: #229ED9 !important;"
                                        href="{{ $linkTelegramEspecialidad->link }}" target="_blank">
                                        <span uk-icon="icon: telegram"></span>
                                        <span class="tag-live">
                                            Unirme al Grupo 
                                            @if($linkTelegramEspecialidad->especialidad)
                                                {{ $linkTelegramEspecialidad->especialidad->titulo }}
                                            @else
                                                Especialidad
                                            @endif
                                        </span>
                                    </a>
                                </div>
                            @endif

                        </div>
                        <div class="envivo-card">
                            @if ($linkTelegramGeneral)
                                <a href="{{ $linkTelegramGeneral->link }}" target="_blank">
                                    <img src="{{ asset('assets/img/aulavirtual/portadatelegram.jpeg') }}" alt="Telegram"
                                        loading="lazy">
                                </a>
                            @elseif ($linkTelegramEspecialidad)
                                <a href="{{ $linkTelegramEspecialidad->link }}" target="_blank">
                                    <img src="{{ asset('assets/img/aulavirtual/portadatelegram.jpeg') }}" alt="Telegram"
                                        loading="lazy">
                                </a>
                            @endif
                        </div>

                    </div>

                    <div id="panel-certificado" class="panel-content" data-type="Certificado">
                        <div class="header-center">
                            <h2 class="title">🏅 Certificado</h2>
                            <p class="subtitle">Obtén tu certificado oficial como reconocimiento de tu esfuerzo.</p>
                        </div>
                        <div class="uk-text-center">
                            @if ($solicitud)
                                @if ($solicitud->estado_correo == 1)
                                    <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="{{ route('certificado.verificarqr', base64_encode($solicitud->ide)) }}" target="_blank">
                                            <span uk-icon="icon: download"></span>
                                            <span class="tag-live">Descargar certificado</span>
                                        </a>
                                    </div>
                                @else
                                    <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>
                                            Su certificado aún está en proceso de firma.</strong>
                                        </small>
                                    </div>
                                @endif
                            @else
                                <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="https://wa.me/51957668571?text={{ urlencode('Hola, mas información para obtener el certificado de: ' . $curso->titulo) }}"
                                        target="_blank">
                                        <span uk-icon="icon: whatsapp"></span>
                                        <span class="tag-live">Solicitar Certificado</span>
                                    </a>
                                </div>
                            @endif

                        </div>
                        <div class="envivo-card">
                            <a href="{{ $curso->link_whatsapp_interno }}" target="_blank">
                                <img src="{{ asset('assets/img/aulavirtual/portadacertificado.png') }}" alt="Horarios"
                                    loading="lazy">
                            </a>
                        </div>
                    </div>

                </section>
            </div>

        </div>

    </main>

    <script>
        function setTopHeight() {
            var topEl = document.querySelector('.parte-der');
            if (!topEl) return;
            // altura real del bloque superior (incluye imágenes ya cargadas)
            var h = topEl.getBoundingClientRect().height;
            document.documentElement.style.setProperty('--topH', h + 'px');
        }

        window.addEventListener('load', setTopHeight);
        window.addEventListener('resize', setTopHeight);
        // si hay imágenes dentro del banner
        document.querySelectorAll('.parte-der img').forEach(function(img) {
            img.addEventListener('load', setTopHeight, {
                once: true
            });
        });

        // como red de seguridad, re-calcula tras un tick (fuentes/uk init)
        setTimeout(setTopHeight, 200);
    </script>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const menuItems = document.querySelectorAll(".side-item");
            const panels = document.querySelectorAll(".panel-content");

            // 🔹 1. Activar el panel según lo que envía el controlador (si existe)
            const activeType = "{{ $seccion ?? 'envivo' }}"; // viene del controlador
            if (activeType) {
                menuItems.forEach(item => {
                    const type = item.dataset.type;
                    const url = item.dataset.url;

                    // Solo aplica si el ítem NO tiene URL (panel interno)
                    if (!url && type === activeType) {
                        item.classList.add("is-active");
                        const panel = document.querySelector(`.panel-content[data-type="${type}"]`);
                        if (panel) {
                            panel.style.display = "";
                            panel.classList.add("is-visible");
                        }
                    }
                });
            }

            // 🔹 2. Mantener tu comportamiento original de clics
            menuItems.forEach(item => {
                item.addEventListener("click", () => {
                    const type = item.dataset.type;
                    const url = item.dataset.url;

                    if (url) {
                        // Si tiene URL, redirige como antes
                        window.location.href = url;
                        return;
                    }

                    // Caso: panel interno dentro de la misma vista
                    menuItems.forEach(i => i.classList.remove("is-active"));
                    panels.forEach(p => {
                        p.style.display = "none";
                        p.classList.remove("is-visible");
                    });

                    item.classList.add("is-active");
                    const panel = document.querySelector(`.panel-content[data-type="${type}"]`);
                    if (panel) {
                        panel.style.display = "";
                        panel.classList.add("is-visible");
                    }
                });
            });
        });
    </script>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll(".btn-live").forEach(btn => {
                btn.addEventListener("click", function() {
                    let idCursoGeneral = this.dataset.cursoGeneral;
                    let idModulo = this.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(res => res.json())
                        .then(data => console.log("Asistencia:", data))
                        .catch(err => console.error("Error registrando asistencia:", err));
                });
            });
        });
    </script>




@endsection