@extends('layout.master')

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

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

@section('content')
    <main class="page-main">

        <div class="uk-container">

            <div class="uk-grid" data-uk-grid>
                <div class="uk-width-1-1">
                    <div class="uk-grid  uk-child-width-2-2@l uk-child-width-2-2@m uk-child-width-1-1@s">
                        <section class="b-post b-post-full b-post-single clearfix">

                            <div class="fixedmovil" id="container-fixedmovil">
                                <div
                                    class="uk-flex uk-flex-column uk-flex-center uk-flex-middle uk-background-cover uk-light videocurso">
                                    <div class="video-container">
                                        @php
                                            $esPodcastGstorage = str_contains($primeraSesion->link_video ?? '', 'storage.googleapis.com/bucket-auge-oficial') ||
                                                                 str_contains($primeraSesion->link_video ?? '', 'bucket.educaauge.com');
                                        @endphp
                                        @if ($esPodcastGstorage)
                                            @php
                                                $securePodcastUrl = \App\Http\Controllers\VideoProxyController::generateSecureUrl($primeraSesion->link_video);
                                            @endphp
                                            @include('partials.video-player-protected', [
                                                'videoSrc' => $securePodcastUrl,
                                                'playerId' => 'session-video',
                                            ])
                                        @else
                                            <div style="padding:56.25% 0 0 0;position:relative;">
                                                <iframe id="session-video"
                                                    src="{{ $primeraSesion->link_video }}badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
                                                    frameborder="0"
                                                    allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
                                                    style="position:absolute;top:0;left:0;width:100%;height:100%;"
                                                    title="Video de la sesión"></iframe>
                                            </div>
                                        @endif
                                    </div>
                                </div>



                                <div class="control-buttons">
                                    <button id="btn-prev" class="btn btn-prev" disabled>
                                        <i class="fas fa-chevron-left"></i>
                                    </button>
                                    <button class="btn btn-complete">Completado</button>
                                    <button id="btn-next" class="btn btn-next">
                                        <i class="fas fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>

                            <div id="container-sesion" class="course-container">
                                <h1 id="session-name">{{ $primeraSesion->nombre }}</h1> <!-- Nombre de la sesión -->
                                <div class="content-row">
                                    <div class="course-info">
                                        <div class="stream-item__nicname">
                                            {{ $primeraSesion->docentes->nombre }}
                                        </div>
                                        <div class="stream-item__time">
                                            <span class="tag">{{ $primeraSesion->dias_transcurridos }} -
                                                {{ $primeraSesion->cantidad_vistas }}</span>
                                        </div>
                                        <div class="stream-item__tags">
                                            <span class="tag">{{ $primeraSesion->tipoAcceso->tipo_acceso }}</span>
                                            <span class="tag">{{ $publicacion->temaCurso->tema_curso }}</span>
                                        </div>
                                    </div>

                                    <div class="course-actions">
                                        {{-- <button class="button"><i class="fas fa-microphone"></i> Podcast</button> --}}
                                        @if ($primeraSesion->audio)
                                            <a id="podcast-download" class="button" download
                                                href="{{ asset('audios_sesion/' . $primeraSesion->audio) }}">
                                                <i class="fas fa-microphone"></i> Descargar Podcast
                                            </a>
                                        @endif
                                        <div class="btn-group">
                                            <button class="like" id="like-button"
                                                data-url="{{ route('like.sesion', $primeraSesion->id) }}">
                                                <i class="fas fa-thumbs-up"></i>
                                                <span id="like-count">
                                                    @if ($primeraSesion->me_gusta_cant > 0)
                                                        {{ $primeraSesion->me_gusta_cant }}
                                                    @endif
                                                </span>
                                            </button>
                                            <button class="dislike"><i class="fas fa-thumbs-down"></i></button>
                                        </div>

                                        <script>
                                            $('#like-button').on('click', function() {
                                                var url = $(this).data('url'); // Obtener la URL del botón
                                                $.ajax({
                                                    url: url,
                                                    type: 'POST',
                                                    data: {
                                                        _token: '{{ csrf_token() }}',
                                                        publicacion: '{{ $publicacion->id }}' // Incluye el token CSRF para seguridad
                                                    },
                                                    success: function(response) {
                                                        if (response.redirect) {
                                                            // Redirigir al login si no está autenticado
                                                            window.location.href = response.redirect;
                                                        } else if (response.success) {
                                                            // Actualizar el número de 'me gusta' en la interfaz sin recargar la página
                                                            $('#like-count').text(response.megusta);
                                                        }
                                                    },
                                                    error: function(xhr, status, error) {
                                                        console.error('Error:', error);
                                                    }
                                                });
                                            });
                                        </script>
                                        <button class="button"><i class="fas fa-share"></i> Compartir</button>
                                        <button class="button"><i class="fas fa-download"></i> Material</button>
                                        <button class="button"><i class="fas fa-bookmark"></i> Guardar</button>
                                    </div>
                                </div>

                                <p id="course-description" class="course-description">
                                    {{ $primeraSesion->descripcion }}
                                </p>
                            </div>


                            <style>
                                .feedback {
                                    display: none;
                                }

                                #resultado-final {
                                    display: none;
                                }

                                .next-question {
                                    display: none;
                                }
                            </style>



                            {{-- mira aca esta para la sesion examen  --}}
                            <div id="container-examen" class="examen-container" style="display: none;">
                                <!-- Instrucciones -->
                                <h1 class="uk-heading-line"><span>Examen Online</span></h1>
                                <p>Responde cada pregunta y obtén retroalimentación inmediata.</p>
                                <h3>Instrucciones:</h3>
                                <p>Lee cuidadosamente cada pregunta y selecciona la respuesta correcta.</p>

                                <!-- Pregunta 1 -->
                                <div id="pregunta1" class="uk-margin question">
                                    <h4>1. ¿Cuál es la capital de Perú?</h4>
                                    <form>
                                        <div class="uk-margin">
                                            <label><input class="uk-radio" type="radio" name="pregunta1"
                                                    value="incorrecto">
                                                Cusco</label><br>
                                            <label><input class="uk-radio" type="radio" name="pregunta1" value="correcto">
                                                Lima</label><br>
                                            <label><input class="uk-radio" type="radio" name="pregunta1"
                                                    value="incorrecto">
                                                Arequipa</label><br>
                                            <label><input class="uk-radio" type="radio" name="pregunta1"
                                                    value="incorrecto">
                                                Trujillo</label>
                                        </div>
                                        <button class="uk-button uk-button-primary" type="button"
                                            onclick="verificarRespuesta('pregunta1', 'Lima')">Verificar</button>
                                    </form>
                                    <p class="uk-alert feedback" id="feedback1"></p>
                                    <button id="next1" class="uk-button uk-button-secondary next-question"
                                        onclick="mostrarSiguientePregunta('pregunta1')">Siguiente Pregunta</button>
                                </div>

                                <!-- Pregunta 2 (oculta al inicio) -->
                                <div id="pregunta2" class="uk-margin question" style="display: none;">
                                    <h4>2. ¿Qué país es conocido como 'la tierra del sol naciente'?</h4>
                                    <form>
                                        <div class="uk-margin">
                                            <label><input class="uk-radio" type="radio" name="pregunta2"
                                                    value="incorrecto">
                                                China</label><br>
                                            <label><input class="uk-radio" type="radio" name="pregunta2"
                                                    value="correcto">
                                                Japón</label><br>
                                            <label><input class="uk-radio" type="radio" name="pregunta2"
                                                    value="incorrecto">
                                                Corea del Sur</label><br>
                                            <label><input class="uk-radio" type="radio" name="pregunta2"
                                                    value="incorrecto">
                                                India</label>
                                        </div>
                                        <button class="uk-button uk-button-primary" type="button"
                                            onclick="verificarRespuesta('pregunta2', 'Japón')">Verificar</button>
                                    </form>
                                    <p class="uk-alert feedback" id="feedback2"></p>
                                    <button id="next2" class="uk-button uk-button-secondary next-question"
                                        onclick="mostrarSiguientePregunta('pregunta2')">Siguiente Pregunta</button>
                                </div>

                                <!-- Pregunta 3 (oculta al inicio) -->
                                <div id="pregunta3" class="uk-margin question" style="display: none;">
                                    <h4>3. ¿Qué planeta es conocido como el planeta rojo?</h4>
                                    <form>
                                        <div class="uk-margin">
                                            <label><input class="uk-radio" type="radio" name="pregunta3"
                                                    value="incorrecto">
                                                Tierra</label><br>
                                            <label><input class="uk-radio" type="radio" name="pregunta3"
                                                    value="incorrecto">
                                                Júpiter</label><br>
                                            <label><input class="uk-radio" type="radio" name="pregunta3"
                                                    value="correcto">
                                                Marte</label><br>
                                            <label><input class="uk-radio" type="radio" name="pregunta3"
                                                    value="incorrecto">
                                                Venus</label>
                                        </div>
                                        <button class="uk-button uk-button-primary" type="button"
                                            onclick="verificarRespuesta('pregunta3', 'Marte')">Verificar</button>
                                    </form>
                                    <p class="uk-alert feedback" id="feedback3"></p>
                                    <button id="next3" class="uk-button uk-button-secondary next-question"
                                        onclick="mostrarNotaFinal()">Finalizar</button>
                                </div>

                                <!-- Resultado final -->
                                <div id="resultado-final" class="uk-margin uk-alert-success uk-text-center">
                                    <h4>¡Examen finalizado!</h4>
                                    <p id="nota-final"></p>
                                </div>

                            </div>

                            <script>
                                let respuestasCorrectas = 0;
                                const totalPreguntas = 3;

                                function verificarRespuesta(preguntaId, respuestaCorrecta) {
                                    const preguntaDiv = document.getElementById(preguntaId);
                                    const seleccion = preguntaDiv.querySelector('input[type="radio"]:checked');
                                    const feedback = document.getElementById(`feedback${preguntaId.charAt(preguntaId.length - 1)}`);
                                    const nextButton = document.getElementById(`next${preguntaId.charAt(preguntaId.length - 1)}`);
                                    const verifyButton = preguntaDiv.querySelector(
                                        'button[type="button"]'); // Obtener el botón de verificar (primer botón)

                                    if (!seleccion) {
                                        alert('Por favor selecciona una respuesta.');
                                        return;
                                    }

                                    // Mostrar retroalimentación correcta o incorrecta
                                    if (seleccion.value === 'correcto') {
                                        feedback.classList.add('uk-alert-success');
                                        feedback.textContent = '¡Correcto!';
                                        respuestasCorrectas++;
                                    } else {
                                        feedback.classList.add('uk-alert-danger');
                                        feedback.textContent = `Incorrecto. La respuesta correcta es: ${respuestaCorrecta}.`;
                                    }

                                    feedback.style.display = 'block'; // Mostrar retroalimentación
                                    verifyButton.style.display = 'none'; // Ocultar el botón "Siguiente" (primer botón)
                                    nextButton.style.display = 'inline-block'; // Mostrar el botón "Siguiente Pregunta"
                                }

                                function mostrarSiguientePregunta(preguntaId) {
                                    const currentQuestion = document.getElementById(preguntaId);
                                    const nextQuestionNumber = parseInt(preguntaId.charAt(preguntaId.length - 1)) + 1;
                                    const nextQuestion = document.getElementById(`pregunta${nextQuestionNumber}`);

                                    // Ocultar la pregunta actual
                                    currentQuestion.style.display = 'none';

                                    // Mostrar la siguiente pregunta
                                    if (nextQuestion) {
                                        nextQuestion.style.display = 'block';
                                    }
                                }

                                function mostrarNotaFinal() {
                                    const notaFinal = (respuestasCorrectas / totalPreguntas) * 20; // Calcula la nota sobre 20
                                    document.getElementById('nota-final').textContent =
                                        `Tu nota final es: ${notaFinal}/20. Respondiste correctamente ${respuestasCorrectas} de ${totalPreguntas} preguntas.`;
                                    document.getElementById('resultado-final').style.display = 'block';
                                }
                            </script>

                            <div class="game-profile-price">
                                <div class="game-profile-price__value">
                                    <font style="vertical-align: inherit;">
                                        <span class="precioanterior"><s>${{ $publicacion->precio_normal }}</s></span>
                                        <span class="precioactual">${{ $publicacion->precio_promocion }}</span>
                                    </font>
                                </div>
                                <a href="{{ url('/pasarela/' . $publicacion->title_rewrite) }}"
                                    class="uk-button uk-button-buy uk-width-1-1 comprar">
                                    <i class="fas fa-shopping-cart"></i>
                                    <span>
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">Comprar ahora</font>
                                        </font>
                                    </span>
                                </a>
                            </div>





                            <div class="fl-subnav1">
                                <ul class="uk-subnav1">
                                    <a href="javascript:void(0);" data-target="home-comments" class="active-tab">
                                        <li><i class="fas fa-briefcase-medical"></i> Beneficios</li>
                                    </a>
                                    <a href="javascript:void(0);" data-target="info-comments">
                                        <li><i class="fas fa-chalkboard-teacher"></i> Sobre el Docente(s)</li>
                                    </a>
                                    <a href="javascript:void(0);" data-target="members-comments">
                                        <li><i class="fas fa-award"></i> Certificación</li>
                                    </a>
                                    <a href="javascript:void(0);" data-target="invites-comments">
                                        <li><i class="fas fa-clock"></i> Tiempos</li>
                                    </a>
                                </ul>
                            </div>

                            <div class="entry-main">
                                <div class="entry-content">
                                    <div id="home-comments" class="comments_form active">
                                        <p>{{ $publicacion->beneficios }}</p>
                                    </div>
                                    <div id="info-comments" class="comments_form">
                                        <!-- Comentarios para Info -->
                                        @foreach ($publicacion->profesores_unicos as $index => $profesor)
                                            <div class="comentariolista">

                                                <img src="{{ $profesor->imagen ? asset('imagenes_usuarios/' . $profesor->imagen) : asset('assets/img/user-1.png') }}"
                                                    alt="Foto de usuario" class="foto-comentario1">
                                                <div class="texto-comentario">
                                                    <strong>{{ $profesor->nombre . ' ' . $profesor->apellido_paterno ?? '' }}</strong>
                                                    <p>{{ $profesor->descripcion ?? '' }}</p>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div id="members-comments" class="comments_form">
                                        <!-- Comentarios para Members -->

                                        <div class="comentariolista">
                                            <img src="{{ asset('assets/img/certificacion.png') }}" alt="Foto de usuario"
                                                class="foto-comentario1">
                                            <p>{{ $publicacion->certificacion ?? '' }}</p>
                                        </div>

                                    </div>
                                    <div id="invites-comments" class="comments_form">
                                        <!-- Comentarios para Send Invites -->


                                        <div class="comentariolista">
                                            <img src="{{ asset('assets/img/tiempo.webp') }}" alt="Foto de usuario"
                                                class="foto-comentario1">
                                            <p>{{ $publicacion->tiempos ?? '' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="entry-content comentario">
                                <div class="comentarios-toggle">
                                    <span style="cursor: pointer">Comentarios
                                        @if ($cantidadComentarios > 0)
                                            {{ $cantidadComentarios }}
                                        @endif
                                        <i class="fa fa-chevron-down" id="comentarios-icon"></i>
                                    </span>
                                </div>
                                <div class="descargar">
                                    <a href="{{ url('/brochures/' . $publicacion->brochure) }}" target="_blank">
                                        <span>Descargar Proforma</span>
                                    </a>
                                </div>


                            </div>

                            <div class="entry-main" id="lista-comentarios" style="display: none;">
                                <div class="entry-content">
                                    <div class="comentarios-ejemplo">
                                        <!-- Iterar sobre los comentarios de la publicación -->
                                        @if ($comentarios->isNotEmpty())
                                            @foreach ($comentarios as $comentario)
                                                <div class="comentariolista">
                                                    <!-- Validar si el usuario tiene imagen; si no, usar una por defecto -->
                                                    <img src="{{ $comentario->usuario->imagen ? asset('imagenes_usuarios/' . $comentario->usuario->imagen) : asset('assets/img/user-1.png') }}"
                                                        alt="Foto de usuario" class="foto-comentario">

                                                    <style>
                                                        .comentario-header {
                                                            display: flex;
                                                            justify-content: space-between;
                                                            align-items: center;
                                                        }

                                                        .comentario-header strong {
                                                            margin-right: auto;
                                                            /* Alinea el nombre del usuario a la izquierda */
                                                        }

                                                        .comentario-header small {
                                                            margin-left: auto;
                                                            /* Alinea la fecha a la derecha */
                                                            font-size: 0.9em;
                                                            color: #888;
                                                            /* Color más claro para la fecha */
                                                            font-style: italic
                                                        }
                                                    </style>
                                                    <div class="texto-comentario">
                                                        <div class="comentario-header">
                                                            <!-- Mostrar el nombre del usuario o 'Usuario anónimo' si no tiene -->
                                                            <strong>{{ $comentario->usuario->nombre ?? 'Usuario anónimo' }}</strong>

                                                            <!-- Mostrar la fecha en formato relativo (ej. 'hace 2 horas') -->
                                                            <small>{{ $comentario->created_at->diffForHumans() }}</small>
                                                        </div>

                                                        <!-- Mostrar el comentario -->
                                                        <p>{{ $comentario->comentario }}</p>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            <p>No hay comentarios aún.</p>
                                        @endif
                                    </div>

                                    <div class="fl-form" id="respond">
                                        <form action="{{ route('guardarComentario', $publicacion->id) }}" method="POST"
                                            class="uk-grid-small" uk-grid>
                                            @csrf <!-- Token de seguridad para formularios en Laravel -->

                                            <div class="uk-width-expand uk-inline">
                                                <input type="text" name="comentario" class="uk-input"
                                                    placeholder="Escribe tu comentario..." required>
                                            </div>

                                            <div class="uk-width-auto uk-inline">
                                                <button type="submit" class="uk-button uk-button-default">Enviar</button>
                                            </div>
                                        </form>
                                    </div>


                                </div>
                            </div>

                            <div class="entry-content ultimainfo">
                                <div class="descargar1"><a href="">Relacionados</a></div>

                                <ul class="uk-grid-small uk-child-width-1-1 uk-child-width-1-3@m uk-child-width-1-2@s"
                                    data-uk-grid>
                                    @foreach ($publicacionesRelacionadas as $publicacionRelacionada)
                                        <li>
                                            <div class="stream-item">
                                                <div class="stream-item__box">
                                                    <div class="stream-item__media">
                                                        <a
                                                            href="{{ url('/contenido' . '/' . $publicacionRelacionada->title_rewrite) }}">
                                                            <img src="{{ asset('imagenes_publicaciones/' . $publicacionRelacionada->imagen_grande) }}"
                                                                alt="{{ $publicacionRelacionada->nombre }}" />
                                                        </a>
                                                        <div class="stream-item__info">
                                                            <div class="stream-item__status">
                                                                {{ $publicacionRelacionada->tipoCurso->tipo_curso }}</div>
                                                        </div>
                                                    </div>
                                                    <div class="stream-item__body">
                                                        <div class="stream-item__title">
                                                            {{ $publicacionRelacionada->nombre }}
                                                        </div>
                                                        <div class="stream-item__nicname"
                                                            style="font-size: 12px;
                                                            font-style: normal;
                                                            font-weight: 400;
                                                            line-height: 1;
                                                            padding-bottom: 10px;
                                                            text-transform: uppercase;
                                                            opacity: 0.8;">
                                                            @foreach ($publicacionRelacionada->profesores_unicos as $index => $profesor)
                                                                {{ $profesor }} @if (!$loop->last)
                                                                    -
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                        <div class="stream-item__time">
                                                            <span class="tag"><i
                                                                    class="icon-calendar"></i>{{ $publicacionRelacionada->dias_transcurridos }}</span>
                                                            <span class="tag">-</span>
                                                            <span
                                                                class="tag">{{ $publicacionRelacionada->vistas_formateadas }}</span>
                                                        </div>
                                                        <div class="stream-item__tags tagsnuevo" style="display:none">
                                                            <span
                                                                class="tag">{{ $publicacionRelacionada->tipoAcceso->tipo_acceso }}</span>
                                                            <span
                                                                class="tag">{{ $publicacionRelacionada->temaCurso->tema_curso }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach


                                </ul>
                            </div>

                        </section>

                    </div>

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

    <script>
        $(document).ready(function() {

            // Manipulación del texto de la descripción del curso
            const descriptionElem = document.getElementById('course-description');
            if (descriptionElem) {
                const fullText = descriptionElem.innerText;
                const maxLength = 300;
                if (fullText.length > maxLength) {
                    const visibleText = fullText.substring(0, maxLength);
                    const hiddenText = fullText.substring(maxLength);
                    descriptionElem.innerHTML =
                        `${visibleText}<span id="ellipses">...</span><span id="more-text" style="display: none;">${hiddenText}</span><a href="#" id="more-link" style="display: inline; font-size:14px">más</a>`;

                    const moreLink = document.getElementById('more-link');
                    moreLink.addEventListener('click', function(e) {
                        e.preventDefault();
                        const moreText = document.getElementById('more-text');
                        const ellipses = document.getElementById('ellipses');
                        if (moreText.style.display === 'none') {
                            moreText.style.display = 'inline';
                            ellipses.style.display = 'none';
                            moreLink.textContent = 'menos';
                        } else {
                            moreText.style.display = 'none';
                            ellipses.style.display = 'inline';
                            moreLink.textContent = 'más';
                        }
                    });
                }
            }

            // Comportamiento de los enlaces en la subnavegación
            const links = document.querySelectorAll('.uk-subnav1 a');
            const commentDivs = document.querySelectorAll('.comments_form');
            links.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    commentDivs.forEach(div => div.style.display = 'none');
                    links.forEach(l => l.classList.remove('active-tab'));
                    const targetId = this.getAttribute('data-target');
                    const targetDiv = document.getElementById(targetId);
                    if (targetDiv) {
                        targetDiv.style.display = 'block';
                    }
                    this.classList.add('active-tab');
                });
            });

            // Comportamiento del botón de comentarios
            const toggleButton = document.querySelector('.comentarios-toggle span');
            const comentariosDiv = document.getElementById('lista-comentarios');
            const icon = document.getElementById('comentarios-icon');
            if (toggleButton && comentariosDiv && icon) {
                toggleButton.addEventListener('click', function() {
                    comentariosDiv.style.display = comentariosDiv.style.display === 'none' ? 'block' :
                        'none';
                    icon.className = comentariosDiv.style.display === 'block' ? 'fa fa-chevron-up' :
                        'fa fa-chevron-down';
                });
            }
        });
    </script>



@endsection