@extends('layout.master')

@section('title', 'Resultado del Examen')

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

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

        <div class="uk-container">

            <div class="uk-flex uk-flex-between uk-flex-middle uk-margin titulo_historial">
                <h4 class="poppi-sb color1 anticon uk-margin-remove">
                    <small>{{ $examen->examen->categoria->titulo }}</small><br>
                    {{ $examen->examen->titulo }}
                </h4>
                <a href="{{ url('mis-examenes') }}" class="uk-button uk-button-link uk-text-small">
                    &lt;&lt; Retornar
                </a>
            </div>
            <div class="uk-margin-small-top uk-flex uk-flex-right">
                <button class="uk-button uk-button-small uk-button-primary" onclick="mostrarResumen()" style="width: 10px;">
                    Ver Resumen
                </button>
            </div>
            <div id="modal-resumen" class="uk-modal" uk-modal>
                <div class="uk-modal-dialog uk-modal-body uk-width-1-3@m custom-modal">
                    <button class="uk-modal-close-default" type="button" uk-close></button>
                    <div class="detalle_resultado">
                        <h4 class="uk-heading-line uk-text-center custom-title">
                            <span>Detalle del Examen Resuelto</span>
                        </h4>
                        <div class="custom-content">
                            <p><strong>Cantidad de Preguntas:</strong> <span
                                    class="custom-value">{{ $totalPreguntas->total }}</span></p>
                            <p><strong>Preguntas Correctas:</strong> <span
                                    class="custom-value correct">{{ $preguntasCorrectas->total_correctas }}</span></p>
                            <p><strong>Preguntas Incorrectas:</strong> <span
                                    class="custom-value incorrect">{{ $totalPreguntas->total - $preguntasCorrectas->total_correctas }}</span>
                            </p>
                            <p><strong>Puntos Obtenidos:</strong> <span
                                    class="custom-value">{{ $preguntasCorrectas->puntos_obtenidos }} /
                                    {{ $totalPreguntas->total_puntos }}</span></p>
                            <p><strong>Porcentaje:</strong> <span class="custom-value">{{ $porcentaje }}%</span></p>
                            <p><strong>Tiempo Usado:</strong> <span class="custom-value">{{ $examen->minutos }}
                                    minutos</span></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="uk-card">
                <h4 class="uk-heading-line"><span>Listado de Preguntas</span></h4>
                @if ($mostrar_detalle == false && $examen->examen->privacidad == 4)
                    <p class="uk-text-small">El detalle de las preguntas resueltas se mostrará el
                        {{ $examen->examen->fecha_cierre }} a las {{ $examen->examen->hora_cierre }}</p>
                @else
                    <table id="tabla-preguntas"
                        class="uk-table uk-table-striped uk-table-hover uk-table-small uk-table-responsive">
                        <thead>
                            <tr>
                                <th>Item</th>
                                <th>Pregunta</th>
                                <th>Tu Respuesta</th>
                                <th>Respuesta Correcta</th>
                                <th>Puntos</th>
                                <th>Solución</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($listadoPreguntas as $index => $pregunta)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $pregunta->titulo }}</td>
                                    <td>
                                        @php
                                            $respuestaMarcada = $pregunta->respuestasMarcadas->first();
                                            $respuestaCorrecta = $pregunta->respuestasCorrectas->first();
                                        @endphp

                                        @if ($respuestaMarcada && $respuestaMarcada->id_rpta !== null)
                                            @if ($respuestaCorrecta && $respuestaMarcada->id_rpta === $respuestaCorrecta->id_rpta)
                                                <i class="fa fa-check" style="color:rgb(12,124,3);"></i>
                                                {{ $respuestaMarcada->respuesta->titulo ?? '' }}
                                            @else
                                                <i class="fa fa-times" style="color:#E10F0F;"></i>
                                                {{ $respuestaMarcada->respuesta->titulo ?? '' }}
                                            @endif
                                        @else
                                            <i class="fa fa-times" style="color:#E10F0F;"> [No marcaste una respuesta]</i>
                                        @endif

                                    </td>
                                    <td>
                                        <i class="fa fa-check" style="color:rgb(12,124,3);"></i>
                                        {{ $pregunta->respuestasCorrectas->first()->titulo ?? '[Sin definir]' }}
                                    </td>
                                    <td>
                                        @if (
                                            $pregunta->respuestasMarcadas->isNotEmpty() &&
                                                $pregunta->respuestasCorrectas->isNotEmpty() &&
                                                $pregunta->respuestasMarcadas->first()->id_rpta === $pregunta->respuestasCorrectas->first()->id_rpta)
                                            {{ $pregunta->puntos }}
                                        @else
                                            <span style="color:#E10F0F;">0.00</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($pregunta->solucion_es_video == 1)
                                            <iframe src="{{ $pregunta->solucion }}" frameborder="0"
                                                allow="autoplay; fullscreen" allowfullscreen></iframe>
                                        @elseif (empty($pregunta->solucion))
                                            <img src="{{ env('URL_ARCHIVOS') . '/images/imagenes/' . $pregunta->imagen2 }}"
                                                alt="Imagen de solución">
                                        @else
                                            {!! $pregunta->solucion !!}
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div id="pagination" class="pagination-container"></div>
                @endif


            </div>

        </div>
        <script>
            function mostrarResumen() {
                UIkit.modal('#modal-resumen').show();
            }
        </script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const rowsPerPage = 10; // Filas por página
                const table = document.getElementById("tabla-preguntas");
                const tbody = table.querySelector("tbody");
                const rows = Array.from(tbody.querySelectorAll("tr"));
                const totalPages = Math.ceil(rows.length / rowsPerPage);
                const pagination = document.getElementById("pagination");

                function displayRows(page) {
                    const start = (page - 1) * rowsPerPage;
                    const end = start + rowsPerPage;
                    rows.forEach((row, index) => {
                        row.style.display = index >= start && index < end ? "table-row" : "none";
                    });
                }

                function setupPagination() {
                    // Agregar el botón de "Anterior"
                    const prevButton = document.createElement("button");
                    prevButton.textContent = "«";
                    prevButton.className = "pagination-button pagination-arrow disabled";
                    prevButton.addEventListener("click", () => {
                        const currentPage = Number(document.querySelector(".pagination-button.active").dataset
                            .page);
                        if (currentPage > 1) {
                            changePage(currentPage - 1);
                        }
                    });
                    pagination.appendChild(prevButton);

                    // Agregar los botones de las páginas
                    for (let i = 1; i <= totalPages; i++) {
                        const button = document.createElement("button");
                        button.textContent = i;
                        button.className = "pagination-button";
                        button.dataset.page = i;
                        button.addEventListener("click", () => changePage(i));
                        pagination.appendChild(button);
                    }

                    // Agregar el botón de "Siguiente"
                    const nextButton = document.createElement("button");
                    nextButton.textContent = "»";
                    nextButton.className = "pagination-button pagination-arrow";
                    nextButton.addEventListener("click", () => {
                        const currentPage = Number(document.querySelector(".pagination-button.active").dataset
                            .page);
                        if (currentPage < totalPages) {
                            changePage(currentPage + 1);
                        }
                    });
                    pagination.appendChild(nextButton);
                }

                function changePage(page) {
                    displayRows(page);

                    // Actualizar botones activos
                    document.querySelectorAll(".pagination-button").forEach(button => button.classList.remove("active",
                        "disabled"));
                    document.querySelector(`.pagination-button[data-page="${page}"]`).classList.add("active");

                    // Habilitar o deshabilitar botones de navegación
                    const prevButton = pagination.querySelector(".pagination-arrow:first-child");
                    const nextButton = pagination.querySelector(".pagination-arrow:last-child");
                    prevButton.classList.toggle("disabled", page === 1);
                    nextButton.classList.toggle("disabled", page === totalPages);
                }

                // Inicializar
                setupPagination();
                changePage(1);
            });
        </script>



    </main>
@endsection