@extends('layout.plantilladetalle')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/detallecurso.css') }}" />

@endsection

@section('content')

    <section class="uk-section uk-section-default seccion-detalle">
        <div class="course-header">
            <div class="uk-container">
                <div class="uk-width-2-3@m div-header">
                    <ul class="uk-breadcrumb uk-margin-remove subtitle">
                        <li><a href="{{ url('/') }}">Educación</a></li>
                        @if ($categoriacurso && $categoriacurso->categoria)
                            <li>
                                <a href="{{ url('categoria/' . $categoriacurso->categoria->titulo_rewrite) }}">
                                    {{ $categoriacurso->categoria->titulo }}
                                </a>
                            </li>
                        @endif
                    </ul>

                    <!-- BLOQUE PRECIO SOLO PARA MÓVIL -->
                    <div class="video-movil uk-hidden@m">
                        @include('partials.bloque-video') <!-- puedes extraerlo a un partial para no repetir -->
                    </div>

                    <!-- Título principal -->
                    <h1 class="titulo_principal">
                        {{ $publicacion->titulo }}
                    </h1>

                    <!-- Descripción -->
                    <p class="lead">
                        {{ $publicacion->breve_detalle }}
                    </p>

                    <!-- Badge + rating + inscripciones -->
                    <div class="uk-flex uk-flex-middle uk-margin-small">
                        <span class="mas_vendido uk-margin-right">Lo más vendido</span>

                        <ul class="uk-iconnav uk-margin-remove-right estrella-rating">
                            <li class="numero_estrella">{{ $publicacion->calificacion }}</li>
                            @for ($i = 1; $i <= 5; $i++)
                                @if ($i <= floor($publicacion->calificacion))
                                    <li><i class="fas fa-star full-star"></i></li> <!-- Llena -->
                                @elseif ($i - 0.5 == $publicacion->calificacion)
                                    <li><i class="fas fa-star half-star"></i></li> <!-- Media con degradado -->
                                @else
                                    <li><i class="fas fa-star empty-star"></i></li> <!-- Vacía -->
                                @endif
                            @endfor
                        </ul>

                        <span class="uk-text-small valoraciones">
                            {{ max(10, $publicacion->cantidad_suscritos) }} docentes inscritos
                        </span>

                    </div>
                    <p class="lead">
                        <i class="fas fa-clock"></i> Última actualización: {{ $fecha_hoy }} – Español [Audio original]
                    </p>
                </div>
            </div>
        </div>
        <div class="uk-container">

            <div class="uk-grid-large" uk-grid>

                <!-- CONTENIDO PRINCIPAL -->
                <div class="uk-width-2-3@m">

                    <!-- BLOQUE PRECIO SOLO PARA MÓVIL -->
                    <div class="video-movil uk-hidden@m">
                        @include('partials.bloque-precio') <!-- puedes extraerlo a un partial para no repetir -->
                    </div>

                    {{-- <div class="what-to-learn uk-section-small">
                        <h2>Lo que aprenderás</h2>
                        <ul class="learn-list js-learn-list">
                            <li><span uk-icon="icon: check"></span>Dominar estrategias clave para el examen del MINEDU.
                            </li>
                            <li><span uk-icon="icon: check"></span>Mejorar tu rendimiento en Comprensión Lectora y Pedagogía
                            </li>
                            <li><span uk-icon="icon: check"></span>Enfrentar simulacros con seguridad y enfoque</li>
                            <li><span uk-icon="icon: check"></span>Aplicar técnicas efectivas para resolver preguntas
                                complejas</li>
                            <li><span uk-icon="icon: check"></span>Desarrollar habilidades para destacar en tu especialidad
                            </li>
                            <li><span uk-icon="icon: check"></span>Organizar tu preparación en tiempo récord </li>
                            <li><span uk-icon="icon: check"></span>Evitar errores comunes en el ascenso magisterial</li>
                            <li><span uk-icon="icon: check"></span>Optimizar tu estudio con asesoría experta y planificada
                            </li>
                        </ul>
                        <div class="btn-vermas js-btn-container">
                            <a href="#" class="js-toggle-more">
                                <span class="js-btn-text">Ver más</span>
                                <span uk-icon="icon: chevron-down" class="js-icon"></span>
                            </a>
                        </div>
                    </div> --}}

                    @if ($aprendizajes->count() > 0)
                        <div class="what-to-learn uk-section-small">
                            <h2>Lo que aprenderás</h2>
                            <ul class="learn-list js-learn-list">
                                @foreach ($aprendizajes as $a)
                                    <li><span uk-icon="icon: check"></span>{{ $a->descripcion }}</li>
                                @endforeach
                            </ul>

                            <div class="btn-vermas js-btn-container">
                                <a href="#" class="js-toggle-more">
                                    <span class="js-btn-text">Ver más</span>
                                    <span uk-icon="icon: chevron-down" class="js-icon"></span>
                                </a>
                            </div>
                        </div>
                    @endif


                    <div class="uk-incluye">
                        <h2>Este curso incluye:</h2>
                        <ul class="incluye-lista">
                            <li><img src="https://cdn-icons-png.flaticon.com/512/1828/1828884.png"
                                    alt="Reloj">{{ $publicacion->n_horas }} de formación intensiva</li>
                            <li><img src="https://cdn-icons-png.flaticon.com/512/747/747376.png"
                                    alt="Video">{{ $publicacion->modalidad_texto }}</li>
                            <li><img src="https://cdn-icons-png.flaticon.com/512/337/337946.png" alt="Documento">Material
                                descargable y actualizado</li>
                            <li><img src="https://cdn-icons-png.flaticon.com/512/1828/1828919.png"
                                    alt="Certificación">Certificación oficial para escalafón</li>
                            <li><img src="https://cdn-icons-png.flaticon.com/512/847/847969.png"
                                    alt="Grupo">Acompañamiento y grupo privado</li>
                            <li><img src="https://cdn-icons-png.flaticon.com/512/3064/3064197.png"
                                    alt="Candado abierto">Acceso inmediato al aula virtual</li>
                        </ul>
                    </div>



                    @if ($silabos && $silabos->count())
                        @php
                            $silabos_generales = $silabos->where('tipo', 1);
                            $silabos_especialidades = $silabos->where('tipo', '!=', 1);
                            $total_generales = $silabos_generales->count();
                            $total_especialidades = $silabos_especialidades->count();
                        @endphp

                        <div class="curriculum-section uk-incluye">
                            <h2 class="uk-margin-remove">Contenido del curso</h2>

                            @if ($total_generales > 0)
                                {{-- Mostrar contenido general --}}
                                @if ($total_generales > 1)
                                    <div
                                        class="uk-flex uk-flex-between uk-margin-small-bottom uk-margin-small-top titulo-contenido">
                                        <p class="leadblack">{{ $total_generales + ($total_especialidades > 0 ? 1 : 0) }}
                                            secciones · {{ $publicacion->n_horas }} de duración total</p>
                                        <a href="#" class="js-expand-all" style="font-weight: 600;">Ampliar todas las
                                            secciones</a>
                                    </div>
                                @endif

                                <ul uk-accordion="multiple: true" class="uk-margin-top js-curriculum">
                                    @foreach ($silabos_generales as $silabo)
                                        <li class="{{ $loop->first ? 'uk-open' : '' }} border-li">
                                            <a class="uk-accordion-title" href="#">
                                                <span class="toggle-icon"
                                                    uk-icon="icon: chevron-down"></span>{{ $silabo->titulo }}
                                            </a>
                                            <div class="uk-accordion-content">
                                                {!! $silabo->descripcion !!}
                                            </div>
                                        </li>
                                    @endforeach

                                    @if ($total_especialidades > 0)
                                        <li class="border-li">
                                            <a class="uk-accordion-title" href="#">
                                                <span class="toggle-icon" uk-icon="icon: chevron-down"></span>Curso según
                                                especialidad
                                            </a>
                                            <div class="uk-accordion-content">
                                                <ul uk-accordion="multiple: true"
                                                    class="uk-margin-remove uk-accordion-child">
                                                    @foreach ($silabos_especialidades as $esp)
                                                        <li>
                                                            <a class="uk-accordion-title uk-accordion-subtitle"
                                                                href="#">
                                                                <span class="toggle-icon"
                                                                    uk-icon="icon: chevron-down"></span>{{ $esp->titulo }}
                                                            </a>
                                                            <div class="uk-accordion-content">
                                                                {!! $esp->descripcion !!}
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </li>
                                    @endif
                                </ul>
                            @elseif ($total_especialidades > 0)
                                <div
                                    class="uk-flex uk-flex-between uk-margin-small-bottom uk-margin-small-top titulo-contenido">
                                    <p class="leadblack">{{ $total_especialidades }}
                                        secciones · {{ $publicacion->n_horas }} de duración total</p>
                                    <a href="#" class="js-expand-all" style="font-weight: 600;">Ampliar todas las
                                        secciones</a>
                                </div>
                                {{-- Solo mostrar contenido de especialidad --}}
                                <ul uk-accordion="multiple: true" class="uk-margin-top js-curriculum">
                                    @foreach ($silabos_especialidades as $esp)
                                        <li class="{{ $loop->first ? 'uk-open' : '' }} border-li">
                                            <a class="uk-accordion-title" href="#">
                                                <span class="toggle-icon"
                                                    uk-icon="icon: chevron-down"></span>{{ $esp->titulo }}
                                            </a>
                                            <div class="uk-accordion-content">
                                                {!! $esp->descripcion !!}
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        </div>
                    @endif



                    <!-- REQUISITOS -->
                    <div class="uk-incluye">
                        <h2>Requisitos</h2>
                        <ul class="requisitos-lista">
                            <li>Ser docente nombrado o contratado en el Magisterio Peruano.</li>
                            <li>Contar con conexión a internet y un dispositivo para acceder al aula virtual.</li>
                            <li>Tener disposición y compromiso para avanzar en tu carrera profesional.</li>
                            <li>No se requiere experiencia previa en simulacros; aprenderás desde cero.</li>
                        </ul>
                    </div>

                    <!-- Descripcion -->
                    <div class="uk-incluye">
                        <h2>Descripción</h2>
                        <p>
                            {!! $publicacion->beneficios !!}</p>
                    </div>

                    <!-- DIRIGIDO -->
                    <div class="uk-incluye ">
                        <h2>¿Para quién es este curso?</h2>
                        <div class="requisitos-lista">
                            {!! $publicacion->certificacion !!}
                        </div>


                    </div>

                    {{-- CURSOS SIMILARES --}}
                    @if ($publicacion->coincidencias->count())
                        <div class="uk-incluye">
                            <h2>Los estudiantes también compraron</h2>

                            @foreach ($publicacion->coincidencias as $curso)
                                <div class="curso-item">
                                    <a href="{{ url('/contenido' . '/' . $curso->titulo_rewrite) }}">
                                        <div class="curso-grid-final">
                                            <!-- Mitad izquierda -->
                                            <div class="curso-izquierda">
                                                <div class="curso-imagen">
                                                    <img src="{{ env('URL_ARCHIVOS') . '/images/capa/' . $curso->imagen_mini }}"
                                                        alt="{{ $curso->titulo }}">
                                                </div>
                                                <div class="curso-info">
                                                    <h3 class="curso-titulo">{{ $curso->titulo }}</h3>
                                                    <div class="curso-detalles">
                                                        <span
                                                            class="duracion">{{ $curso->n_horas ?? '120 Horas en total' }}</span>
                                                        <span class="fecha">- {{ $curso->n_sesiones ?? '8' }}
                                                            sesiones</span>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Mitad derecha -->
                                            <div class="curso-derecha">
                                                <div class="otra-division">
                                                    <div class="item">
                                                        <span
                                                            class="valor">{{ number_format($curso->calificacion ?? 4.5, 1) }}</span>
                                                        <i class="fas fa-star icono-estrella"></i>
                                                    </div>
                                                    <div class="item">
                                                        <img src="https://cdn-icons-png.flaticon.com/512/747/747376.png"
                                                            alt="users" class="icon-img">
                                                        <span
                                                            class="numero-com">{{ number_format($curso->cantidad_suscritos ?? 0) }}</span>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="item_precio">
                                                        <span
                                                            class="precio-actual">{{ number_format($curso->costo_promo ?? 149.9, 2) }}
                                                            S/</span><br>
                                                        <span
                                                            class="precio-anterior">{{ number_format($curso->precio_online ?? 249.9, 2) }}
                                                            S/</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    @endif


                    @if ($publicacion->docentes->count())
                        <div class="uk-incluye">
                            <h2>Instructores</h2>

                            <div class="instructores-list js-instructores-list">
                                @foreach ($publicacion->docentes as $docente)
                                    @php
                                        $calificacion = number_format(rand(40, 50) / 10, 1); // 4.0 – 5.0
                                        $estudiantes = number_format(rand(6000, 50000));
                                        $resenas = number_format(rand(10000, 20000));
                                    @endphp
                                    <div class="instructor-card">
                                        <h3 class="nombre-instructor">{{ $docente->titulo }}</h3>
                                        <p class="especialidad">{{ $docente->cargo }}</p>

                                        <div class="instructor-header">
                                            <!-- Imagen -->
                                            <div class="instructor-foto">
                                                <img src="{{ env('URL_ARCHIVOS') . '/images/profesores/' . $docente->imagen }}"
                                                    alt="{{ $docente->titulo }}">
                                            </div>

                                            <!-- Info -->
                                            <div class="instructor-info">
                                                <ul class="instructor-datos">
                                                    <li><i class="fas fa-star"></i> Calificación del instructor:
                                                        <strong>{{ $calificacion }}</strong>
                                                    </li>
                                                    <li><i class="fas fa-medal"></i> {{ $resenas }} reseñas</li>
                                                    <li><i class="fas fa-chalkboard-teacher"></i> Docente formador MINEDU
                                                    </li>
                                                    <li><i class="fas fa-user-graduate"></i> {{ $estudiantes }}
                                                        estudiantes</li>
                                                </ul>
                                            </div>
                                        </div>

                                        <p class="descripcion-instructor">
                                            {!! $docente->descripcion !!}
                                        </p>
                                    </div>
                                @endforeach
                            </div>

                            @if ($publicacion->docentes->count() > 2)
                                <div class="js-instructores-btn-container">
                                    <a href="#" class="js-toggle-instructores">
                                        <span class="js-instructores-text">Ver más</span>
                                        <span uk-icon="icon: chevron-down" class="js-instructores-icon"></span>
                                    </a>
                                </div>
                            @endif
                        </div>
                    @endif


                    <!-- TESTIMONIOS -->
                    @if ($testimonios->count())
                        <div class="uk-incluye">
                            <h2 class="valoracion-titulo">
                                <i class="fas fa-star emogi-valoracion"></i>
                                4,8 valoración del curso · {{ rand(400, 700) }} valoraciones
                            </h2>

                            <div class="js-testimonios-wrapper uk-grid-small uk-child-width-1-2@m uk-child-width-1-1@s uk-grid-match"
                                uk-grid>
                                @foreach ($testimonios as $testimonio)
                                    @php
                                        $iniciales = collect(explode(' ', trim($testimonio->titulo)))
                                            ->filter()
                                            ->map(fn($w) => strtoupper($w[0]))
                                            ->join('');

                                        $dias = rand(2, 15);
                                    @endphp
                                    <div class="js-testimonio-item">
                                        <div class="card-testimonio">
                                            <div class="uk-flex uk-flex-middle uk-margin-small-bottom">
                                                <div class="avatar-inicial uk-margin-small-right">{{ $iniciales }}
                                                </div>
                                                <div>
                                                    <strong class="uk-display-block">{{ $testimonio->titulo }}</strong>
                                                    <div class="testimonio-meta">
                                                        <span>
                                                            @for ($i = 0; $i < 5; $i++)
                                                                <i class="fas fa-star"></i>
                                                            @endfor
                                                        </span>
                                                        <span>hace {{ $dias }} días</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <p>{!! $testimonio->descripcion !!}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            @if ($testimonios->count() > 6)
                                <div class="uk-margin-top">
                                    <button class="js-toggle-testimonios">
                                        Mostrar todas las reseñas
                                    </button>
                                </div>
                            @endif
                        </div>
                    @endif


                    <!-- RECOMENDACION DE CURSOS  -->
                    @if ($publicacion->coincidencias->count())
                        <div class="uk-incluye">
                            <h2> Más cursos de <span style="color: #7946FF">Actualización</span></h2>

                            <div class="uk-grid uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s
uk-grid-match ultimo-curso"
                                uk-grid>
                                @foreach ($publicacion->coincidencias as $curso)
                                    <a href="{{ url('/contenido' . '/' . $curso->titulo_rewrite) }}">
                                        <div class="card-curso">
                                            <img src="{{ env('URL_ARCHIVOS') . '/images/capa/' . $curso->imagen_mini }}"
                                                alt="{{ $curso->titulo }}">
                                            <div class="card-body-curso">
                                                <div class="card-titulo-curso">{{ $curso->titulo }}</div>

                                                <div class="card-detalle-curso">
                                                    Actualizado
                                                    {{ \Carbon\Carbon::parse($curso->fecha_actualizacion)->format('m/Y') }}
                                                </div>

                                                <div class="card-rating-curso">
                                                    <b
                                                        style="color: #F59B08">{{ number_format($curso->calificacion ?? 4.5, 1) }}</b>
                                                    @for ($i = 0; $i < 5; $i++)
                                                        <i class="fas fa-star"></i>
                                                    @endfor
                                                    ({{ number_format($curso->cantidad_suscritos ?? rand(6000, 20000)) }})
                                                </div>

                                                <div class="card-detalle-curso">
                                                    {{ $curso->n_horas ?? '120' }} horas en total<br>
                                                    • Todos los niveles
                                                </div>

                                                <div class="uk-margin-small-top">
                                                    <span class="card-precio-curso">
                                                        {{ number_format($curso->costo_promo ?? 149.9, 2) }} S/
                                                    </span>
                                                    <span class="card-precio-anterior">
                                                        {{ number_format($curso->precio_online ?? 249.9, 2) }} S/
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif


                </div>

                <!-- SIDEBAR PRECIO (STICKY) -->
                <div class="uk-width-1-3@m">

                    <div uk-sticky="offset:100; bottom: true; media: @m" class="para-fondo-relativo">
                        <div class="card-precio-fijo">
                            @include('partials.bloque-video')

                            @include('partials.bloque-precio')

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

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


    <!-- Modal de vista previa -->
    <!-- Modal de vista previa -->
    <div id="modal-video" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">

            <!-- Botón cerrar -->
            <button class="uk-modal-close-default" type="button" uk-close></button>

            <!-- Encabezado -->
            <div class="uk-padding-small">
                <div class="uk-text-meta">Vista previa del curso</div>
                <h3 class="uk-margin-small-top uk-margin-remove-bottom">
                    {{ $publicacion->titulo }}
                </h3>
            </div>

            <!-- Reproductor de video -->
            <div class="uk-position-relative uk-margin-remove">
                @php
                    $primerVideo = $videoscortos[0] ?? null;
                @endphp

                @if ($primerVideo)
                    <video id="main-video" width="100%" height="400" controls crossorigin="anonymous"
                        controlsList="nodownload">
                        <source src="{{ $primerVideo->link }}" type="video/mp4">
                        Tu navegador no soporta video.
                    </video>
                @endif
            </div>

            <!-- Lista de videos -->
            <ul id="video-list" class="uk-list">
                @foreach ($videoscortos as $index => $video)
                    <li class="video-item {{ $loop->first ? 'active' : '' }}" data-video="{{ $video->link }}">
                        <div class="uk-flex uk-flex-between uk-flex-middle">
                            <div class="uk-flex uk-flex-middle">
                                @if (!empty($video->imagen))
                                    <img src="{{ env('URL_ARCHIVOS') . '/images/images_videos/' . $video->imagen }}"
                                        width="60" class="uk-margin-small-right" alt="">
                                @else
                                    <img src="{{ asset('assets/img/ultimocurso.png') }}" width="60"
                                        class="uk-margin-small-right" alt="">
                                @endif

                                <span class="video-title">
                                    @if ($loop->first)
                                        <i class="fas fa-play-circle uk-margin-small-right text-play-icon"></i>
                                    @endif
                                    {{ $video->nombre }}
                                </span>
                            </div>
                            <span>{{ $video->duracion_texto ?? '00:00' }}</span>
                        </div>
                    </li>
                @endforeach
            </ul>

        </div>
    </div>


    <!-- BARRA FIJA PARA MÓVIL -->
    <div class="barra-movil uk-hidden@m">
        <div class="barra-contenido">
            <div class="barra-izquierda">
                <div class="barra-titulo">{{ $publicacion->titulo }}</div>
                <div class="barra-precios">
                    @php
                        $precio = $publicacion->precio;
                        $promo = $publicacion->costo_promo;

                        if (isset($publicacion->precio_mensual) && isset($publicacion->promo_mensual)) {
                            // Si hay cursos dependientes: usar precio mensual por defecto
                            $precio = $publicacion->precio_mensual;
                            $promo = $publicacion->promo_mensual;
                        }
                    @endphp

                    <span class="precio-actualfijo">{{ number_format($promo, 2) }} S/</span>
                    <span class="precio-anteriorfijo">{{ number_format($precio, 2) }} S/</span>
                </div>
            </div>
            <div class="barra-derecha">
                <button onclick="seleccionarPlanMensual('plata')" class="btn-comprar">Comprar Ahora</button>
            </div>
        </div>
    </div>





    <script>
        document.addEventListener('DOMContentLoaded', () => {

            // ================================
            // 🔁 VER MÁS / VER MENOS (Lo que aprenderás)
            // ================================
            const toggleMoreBtn = document.querySelector('.js-toggle-more');
            const list = document.querySelector('.js-learn-list');
            const txt = toggleMoreBtn?.querySelector('.js-btn-text');
            const icon = toggleMoreBtn?.querySelector('.js-icon');

            toggleMoreBtn?.addEventListener('click', e => {
                e.preventDefault();
                const expanded = list.classList.toggle('expanded');
                txt.textContent = expanded ? 'Ver menos' : 'Ver más';
                icon.setAttribute('uk-icon', `icon: ${expanded ? 'chevron-up' : 'chevron-down'}`);
            });

            // ================================
            // 🔁 EXPANDIR / CONTRAER TODAS LAS SECCIONES
            // ================================
            const expandAllBtn = document.querySelector(".js-expand-all");
            const accordionItems = document.querySelectorAll(".js-curriculum > li");
            const accordionTitles = document.querySelectorAll(".js-curriculum > li > .uk-accordion-title");

            expandAllBtn?.addEventListener("click", (e) => {
                e.preventDefault();

                const anyClosed = Array.from(accordionItems).some(item => !item.classList.contains(
                    "uk-open"));

                accordionTitles.forEach(title => {
                    const parent = title.closest("li");
                    const isOpen = parent.classList.contains("uk-open");
                    if ((anyClosed && !isOpen) || (!anyClosed && isOpen)) {
                        title.click();
                    }
                });

                expandAllBtn.textContent = anyClosed ? "Contraer todas las secciones" :
                    "Ampliar todas las secciones";
            });

            // ================================
            // 👨‍🏫 Ver más / menos instructores
            // ================================
            const toggleInstructoresBtn = document.querySelector('.js-toggle-instructores');
            const instructoresList = document.querySelector('.js-instructores-list');
            const txtInstr = toggleInstructoresBtn?.querySelector('.js-instructores-text');
            const iconInstr = toggleInstructoresBtn?.querySelector('.js-instructores-icon');

            toggleInstructoresBtn?.addEventListener('click', e => {
                e.preventDefault();
                const expanded = instructoresList.classList.toggle('show-instructors');
                txtInstr.textContent = expanded ? 'Ver menos' : 'Ver más';
                iconInstr.setAttribute('uk-icon', `icon: ${expanded ? 'chevron-up' : 'chevron-down'}`);
            });

            // ================================
            // ⭐ Ver más / menos testimonios
            // ================================
            const toggleBtn = document.querySelector('.js-toggle-testimonios');
            const wrapper = document.querySelector('.js-testimonios-wrapper');

            toggleBtn?.addEventListener('click', () => {
                const isExpanded = wrapper.classList.toggle('show-all');
                toggleBtn.textContent = isExpanded ? 'Ver menos reseñas' : 'Mostrar todas las reseñas';
            });

            // ================================
            // 🎥 CAMBIO DE VIDEO EN MODAL CON <video>
            // ================================
            const videoList = document.querySelectorAll('#video-list .video-item');
            const videoElement = document.getElementById('main-video');
            const sourceElement = videoElement?.querySelector('source');

            videoList.forEach(item => {
                item.addEventListener('click', (e) => {
                    e.preventDefault();
                    const newSrc = item.dataset.video + '?v=' + new Date().getTime();
                    console.log('🎯 Click detectado:', newSrc);

                    if (sourceElement && videoElement) {
                        videoElement.pause();
                        videoElement.currentTime = 0;
                        sourceElement.src = newSrc;
                        videoElement.load();

                        videoElement.onloadeddata = () => {
                            videoElement.play().catch(err => {
                                console.warn(
                                    "🎥 El navegador bloqueó la reproducción automática:",
                                    err);
                            });
                        };
                    }

                    // Resetear ítems visuales
                    videoList.forEach(i => {
                        i.classList.remove('active');
                        const icon = i.querySelector('.text-play-icon');
                        if (icon) icon.remove();
                    });

                    item.classList.add('active');
                    const title = item.querySelector('.video-title');
                    const icon = document.createElement('i');
                    icon.className = 'fas fa-play-circle uk-margin-small-right text-play-icon';
                    title.prepend(icon);
                });

            });

            // ✅ NUEVO: Pausar el video al cerrar el modal
            UIkit.util.on('#modal-video', 'hide', () => {
                const video = document.getElementById('main-video');
                if (video && !video.paused) {
                    video.pause();
                }
            });

            UIkit.util.on('#modal-video', 'show', () => {
                const video = document.getElementById('main-video');
                if (video) {
                    video.currentTime = 0;
                    video.play().catch(err => {
                        console.warn(
                            "🎥 El navegador bloqueó la reproducción automática al mostrar el modal:",
                            err);
                    });
                }
            });


        });
    </script>

    <script>
        const curso_idp = {{ $publicacion->id_curso }};
        let moduloSeleccionado = null; // se asigna dinámicamente si el usuario elige módulo

        function seleccionarPlanMensual(tipoPlan) {
            const tipoPago = 'mensual';

            const paymentParams = {
                tipoPago,
                tipoPlan,
                curso_idp,
                moduloSeleccionado
            };

            const secureParams = btoa(JSON.stringify(paymentParams));
            const checkoutRoute = `/checkout-curso/${secureParams}`;
            window.location.href = checkoutRoute;
        }

        function seleccionarPlanPaquete(tipoPlan) {
            const tipoPago = 'paquete';

            const paymentParams = {
                tipoPago,
                tipoPlan,
                curso_idp
            };

            const secureParams = btoa(JSON.stringify(paymentParams));
            const checkoutRoute = `/checkout-curso/${secureParams}`;
            window.location.href = checkoutRoute;
        }
    </script>
@endsection