@extends('layout.master')

@section('title', 'Historial de Exámenes')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/examenv2.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">
                <h3 class="poppi-sb color1 anticon uk-margin-remove">
                    <span>Historial de Exámenes</span>
                </h3>
                <a href="{{ url('/aulavirtual/miscursos') }}" class="uk-button uk-button-link uk-text-small">
                    &lt;&lt; Retornar
                </a>
            </div>

            <div class="btn_estadistico">
                <button class="uk-button uk-button-small uk-button-primary btn-toggle" onclick="toggleView()"
                    style="width: 10px;">
                    Ver Estadisticas
                </button>
            </div>
            <style>
                /* Estilos generales */
                .chart-canvas {
                    width: 100% !important;
                    max-width: 100%;
                    height: auto !important;
                    margin: 0 auto;
                    display: block;
                }

                /* Ajustes para móviles */
                @media screen and (max-width: 768px) {
                    #chart-container {
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                        /* Espaciado entre gráficos */
                        padding: 0 1rem;
                        /* Espaciado lateral */
                    }

                    .chart-canvas {
                        width: 100%;
                        height: 250px;
                        /* Altura fija para evitar gráficos alargados */
                    }
                }

                /* Ajustes para pantallas grandes */
                @media screen and (min-width: 769px) {
                    #chart-container {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        gap: 1rem;
                        /* Espaciado horizontal entre gráficos */
                    }

                    .chart-canvas {
                        width: 32%;
                        height: 350px;
                        /* Mantener altura adecuada */
                    }
                }
            </style>
            <!-- Tabla de Historial -->
            <div id="historial-table" class="table-container">
                @if ($examenesDesarrollados->isNotEmpty())
                    <table id="historial-examenes"
                        class="uk-table uk-table-striped uk-table-hover uk-table-small uk-table-responsive">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Examen</th>
                                <th>Fecha</th>
                                <th>Preguntas Correctas</th>
                                <th>Preguntas Incorrectas</th>
                                <th>Puntos Obtenidos</th>
                                <th>Porcentaje</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($examenesDesarrollados as $index => $examen)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $examen->examen->titulo ?? '' }}</td>
                                    <td>{{ $examen->fecha_registro ?? '' }}</td>
                                    <td>{{ $examen->preguntas_correctas ?? '' }}</td>
                                    <td>{{ $examen->preguntas_incorrectas ?? '' }}</td>
                                    <td>{{ $examen->puntos_obtenidos ?? '' }} / {{ $examen->puntos_totales ?? '' }}</td>
                                    <td>{{ $examen->porcentaje ?? '' }}%</td>
                                    <td>
                                        <a href="{{ route('resultadoexamen', $examen->ide) }}"
                                            class="uk-button uk-button-small uk-button-primary">Ver Detalles</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <p>No se han encontrado exámenes desarrollados.</p>
                @endif
            </div>

            <!-- Contenedor de Gráficos -->
            <div id="chart-container" class="table-container">
                <canvas id="chart-preguntas" class="chart-canvas"></canvas>
                <canvas id="chart-puntos" class="chart-canvas"></canvas>
                <canvas id="chart-general" class="chart-canvas"></canvas>
            </div>

        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const chartPreguntasData = {
            labels: @json($examenesDesarrollados->pluck('examen.titulo')->take(5)),
            datasets: [{
                    label: 'Preguntas Correctas',
                    backgroundColor: 'rgba(17, 236, 17, 0.95)',
                    borderColor: 'rgba(39, 174, 96, 1)',
                    data: @json($examenesDesarrollados->pluck('preguntas_correctas')->take(5))
                },
                {
                    label: 'Preguntas Incorrectas',
                    backgroundColor: 'rgba(236, 13, 13, 0.99)',
                    borderColor: 'rgb(223, 36, 16)',
                    data: @json($examenesDesarrollados->pluck('preguntas_incorrectas')->take(5))
                },
                {
                    label: 'Cantidad Total de Preguntas',
                    backgroundColor: 'rgba(14, 65, 234, 0.84)',
                    borderColor: 'rgba(52, 152, 219, 1)',
                    data: @json($examenesDesarrollados->pluck('puntos_totales')->take(5))
                }
            ]
        };

        const chartPuntosData = {
            labels: @json($examenesDesarrollados->pluck('examen.titulo')->take(5)),
            datasets: [{
                    label: 'Puntos Obtenidos',
                    backgroundColor: 'rgba(17, 236, 17, 0.95)',
                    borderColor: 'rgba(39, 174, 96, 1)',
                    data: @json($examenesDesarrollados->pluck('puntos_obtenidos')->take(5))
                },
                {
                    label: 'Puntos Totales',
                    backgroundColor: 'rgba(14, 65, 234, 0.84)',
                    borderColor: 'rgb(17, 102, 158)',
                    data: @json($examenesDesarrollados->pluck('puntos_totales')->take(5))
                }
            ]
        };

        const chartGeneralData = {
            labels: @json($examenesDesarrollados->pluck('examen.titulo')->take(5)),
            datasets: [{
                label: 'Porcentaje (%)',
                backgroundColor: 'rgb(250, 198, 40)',
                borderColor: 'rgba(243, 156, 18, 1)',
                data: @json($examenesDesarrollados->pluck('porcentaje')->take(5))
            }]
        };

        const options = {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top'
                },
                title: {
                    display: true,
                    text: ''
                }
            }
        };



        let chartPreguntas, chartPuntos, chartGeneral;

        function toggleView() {
            const table = document.getElementById('historial-table');
            const charts = document.getElementById('chart-container');
            const btn = document.querySelector('.btn-toggle');

            if (table.style.display !== 'none') {
                table.style.display = 'none';
                charts.style.display = 'block';
                btn.textContent = 'Volver a Tabla';

                // Crear gráficos si no existen
                if (!chartPreguntas) {
                    chartPreguntas = new Chart(document.getElementById('chart-preguntas'), {
                        type: 'bar',
                        data: chartPreguntasData,
                        options: {
                            ...options,
                            title: {
                                text: 'Resumen por Preguntas'
                            }
                        }
                    });
                }
                if (!chartPuntos) {
                    chartPuntos = new Chart(document.getElementById('chart-puntos'), {
                        type: 'bar',
                        data: chartPuntosData,
                        options: {
                            ...options,
                            title: {
                                text: 'Resumen por Puntos'
                            }
                        }
                    });
                }
                if (!chartGeneral) {
                    chartGeneral = new Chart(document.getElementById('chart-general'), {
                        type: 'line',
                        data: chartGeneralData,
                        options: {
                            ...options,
                            title: {
                                text: 'Resumen General'
                            }
                        }
                    });
                }
            } else {
                table.style.display = 'block';
                charts.style.display = 'none';
                btn.textContent = 'Ver Resumen';
            }
        }
    </script>
@endsection