@extends('aulavirtual.layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/examenv2.css') }}" />

    <style>
        @media screen and (max-width: 560px) {
            .btn_estadistico {
                display: none;
            }
        }
    </style>
@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/misexamenes') }}" 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>
                    
                    <!-- Botón Mostrar Más -->
                    @if ($examenesDesarrollados->hasMorePages())
                        <div class="uk-margin-top uk-flex uk-flex-center">
                            <button id="btn-cargar-mas" 
                                    class="uk-button uk-button-primary"
                                    data-page="{{ $examenesDesarrollados->currentPage() + 1 }}">
                                Mostrar más exámenes
                            </button>
                        </div>
                    @endif
                @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: 'Total de Preguntas',
                    backgroundColor: 'rgba(14, 65, 234, 0.84)',
                    borderColor: 'rgba(52, 152, 219, 1)',
                    data: @json($examenesDesarrollados->pluck('total_preguntas')->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';
            }
        }

        // Cargar más exámenes
        document.addEventListener('DOMContentLoaded', function() {
            const btnCargarMas = document.getElementById('btn-cargar-mas');
            
            if (btnCargarMas) {
                btnCargarMas.addEventListener('click', function() {
                    const btn = this;
                    const page = btn.getAttribute('data-page');
                    const tbody = document.querySelector('#historial-examenes tbody');
                    
                    // Deshabilitar botón y mostrar cargando
                    btn.disabled = true;
                    btn.textContent = 'Cargando...';
                    
                    // Hacer petición AJAX
                    fetch(`{{ route('aulavirtual.historialexamen') }}?page=${page}`, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        // Agregar las nuevas filas
                        const currentRows = tbody.querySelectorAll('tr').length;
                        data.examenes.forEach((examen, index) => {
                            const row = `
                                <tr>
                                    <td>${currentRows + 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="/examen/result/${examen.ide}" 
                                           class="uk-button uk-button-small uk-button-primary">Ver Detalles</a>
                                    </td>
                                </tr>
                            `;
                            tbody.insertAdjacentHTML('beforeend', row);
                        });
                        
                        // Actualizar o eliminar botón
                        if (data.has_more_pages) {
                            btn.disabled = false;
                            btn.textContent = 'Mostrar más exámenes';
                            btn.setAttribute('data-page', data.next_page);
                        } else {
                            btn.remove();
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        btn.disabled = false;
                        btn.textContent = 'Mostrar más exámenes';
                        alert('Error al cargar más exámenes. Por favor, intenta de nuevo.');
                    });
                });
            }
        });
    </script>
@endsection