<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>Evaluaciones Institucionales 2 - DIAGNOSTIKA</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=roboto:400,500,700&display=swap" rel="stylesheet" />

        <!-- Tailwind CSS -->
        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/js/app.js'])
        @else
            <script src="https://cdn.tailwindcss.com"></script>
        @endif

        <!-- Chart.js -->
        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

        <style>
            .table-container {
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                padding: 1.5rem;
                margin-bottom: 2rem;
                overflow-x: auto;
            }

            @media (max-width: 640px) {
                .table-container {
                    padding: 1rem 0.75rem;
                    margin-bottom: 1.5rem;
                }
            }

            .nivel-section {
                margin-bottom: 3rem;
            }

            @media (max-width: 640px) {
                .nivel-section {
                    margin-bottom: 2rem;
                    padding-bottom: 1.5rem;
                }
            }

            .nivel-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 1.5rem;
                gap: 1rem;
                flex-wrap: wrap;
            }

            @media (max-width: 640px) {
                .nivel-header {
                    flex-direction: column;
                    align-items: flex-start;
                    margin-bottom: 1rem;
                }
            }

            .nivel-header h2 {
                font-size: 1.5rem;
                font-weight: bold;
                color: #1f2937;
            }

            @media (max-width: 640px) {
                .nivel-header h2 {
                    font-size: 1.1rem;
                }
            }

            .year-selector {
                padding: 0.6rem 1.2rem;
                border: 2px solid #d1d5db;
                border-radius: 6px;
                font-size: 0.95rem;
                font-weight: 500;
                background-color: white;
                color: #1f2937;
                cursor: pointer;
                transition: all 0.3s ease;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231f2937' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 0.75rem center;
                padding-right: 2.5rem;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
            }

            @media (max-width: 640px) {
                .year-selector {
                    font-size: 0.85rem;
                    padding: 0.5rem 0.8rem;
                    padding-right: 1.8rem;
                    width: 100%;
                    max-width: 200px;
                }
            }

            .year-selector:hover {
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            }

            .year-selector:focus {
                outline: none;
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
            }

            .data-table {
                width: 100%;
                border-collapse: collapse;
                margin-bottom: 1.5rem;
                min-width: 100%;
            }

            .data-table thead {
                background-color: #1f2937;
                color: white;
            }

            .data-table th {
                padding: 1rem;
                text-align: center;
                font-weight: 600;
                font-size: 0.9rem;
                border: 1px solid #111827;
            }

            @media (max-width: 640px) {
                .data-table th {
                    padding: 0.6rem 0.5rem;
                    font-size: 0.75rem;
                }
            }

            .data-table td {
                padding: 0.75rem 1rem;
                text-align: center;
                border: 1px solid #e5e7eb;
            }

            @media (max-width: 640px) {
                .data-table td {
                    padding: 0.5rem 0.5rem;
                    font-size: 0.8rem;
                }
            }

            .data-table tbody tr:first-child td {
                background-color: #f9fafb;
                padding: 0.5rem;
            }

            .input-numeric {
                width: 100%;
                padding: 0.5rem;
                border: 1px solid #d1d5db;
                border-radius: 4px;
                text-align: center;
                font-weight: 600;
                font-size: 0.95rem;
            }

            .input-numeric:focus {
                outline: none;
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            }

            .chart-container {
                position: relative;
                height: 500px;
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                padding: 1.5rem;
                margin-bottom: 2rem;
            }

            @media (max-width: 640px) {
                .chart-container {
                    height: 350px;
                    padding: 1rem 0.75rem;
                    margin-bottom: 3rem;
                }
            }

            .chart-legend {
                display: flex;
                flex-wrap: wrap;
                gap: 2rem;
                margin-top: 1.5rem;
                justify-content: center;
                align-items: center;
            }

            @media (max-width: 640px) {
                .chart-legend {
                    gap: 1rem;
                    margin-top: 1.5rem;
                    row-gap: 0.75rem;
                }
            }

            .legend-item {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.35rem 0;
                white-space: nowrap;
            }

            .legend-color {
                width: 16px;
                height: 16px;
                border-radius: 2px;
                flex-shrink: 0;
            }

            .legend-text {
                font-size: 0.85rem;
                color: #374151;
                font-weight: 500;
            }

            @media (max-width: 640px) {
                .legend-text {
                    font-size: 0.75rem;
                    word-break: break-word;
                }
            }

            .button-group {
                display: flex;
                gap: 1rem;
                margin-top: 2rem;
                justify-content: space-between;
                flex-wrap: wrap;
            }

            @media (max-width: 640px) {
                .button-group {
                    flex-direction: column;
                    gap: 0.75rem;
                }

                .button-group .btn,
                .button-group button {
                    width: 100%;
                    padding: 0.75rem 1rem !important;
                    font-size: 0.9rem !important;
                }
            }

            .btn {
                padding: 0.75rem 1.5rem;
                border-radius: 0.5rem;
                font-weight: 600;
                transition: all 0.2s;
                border: none;
                cursor: pointer;
            }

            .btn-primary {
                background-color: #1e40af;
                color: white;
            }

            .btn-primary:hover {
                background-color: #1e3a8a;
            }

            .btn-secondary {
                background-color: #e5e7eb;
                color: #374151;
            }

            .btn-secondary:hover {
                background-color: #d1d5db;
            }

            .niveles-selector {
                background: white;
                border: 2px solid #e5e7eb;
                border-radius: 8px;
                padding: 2rem;
                margin-bottom: 2rem;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }

            .niveles-selector h3 {
                font-size: 1.1rem;
                font-weight: bold;
                color: #1f2937;
                margin-bottom: 1rem;
            }

            .niveles-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 1.5rem;
            }

            @media (max-width: 640px) {
                .niveles-grid {
                    grid-template-columns: 1fr;
                    gap: 1rem;
                }
            }

            .nivel-checkbox {
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }

            .nivel-checkbox input[type="checkbox"] {
                width: 20px;
                height: 20px;
                cursor: pointer;
            }

            .nivel-checkbox label {
                font-size: 1rem;
                font-weight: 500;
                color: #374151;
                cursor: pointer;
                flex: 1;
            }
        </style>
    </head>
    <body class="min-h-screen bg-gray-50 font-sans">
        <!-- Header -->
        <header class="bg-blue-950 px-3 sm:px-6 py-3 sm:py-4 shadow-lg">
            <div class="max-w-7xl mx-auto flex justify-between items-center">
                <!-- Logo -->
                <div class="flex items-center">
                    <img src="{{ asset('images/logo.gif') }}" alt="DIAGNOSTIKA Logo" class="h-10 sm:h-16" />
                </div>
                
                <!-- Navigation -->
                <nav class="flex items-center gap-2 sm:space-x-4">
                    @auth
                        <div class="flex items-center gap-2 sm:space-x-3">
                            <span class="text-white font-semibold text-xs sm:text-base hidden sm:inline">{{ Auth::user()->name ?? 'Usuario' }}</span>
                            <form method="POST" action="{{ route('logout') }}" style="display:inline;">
                                @csrf
                                <button type="submit" class="text-white border border-white px-2 sm:px-4 py-1 sm:py-2 rounded text-xs sm:text-base hover:bg-red-600 hover:border-red-600 transition">
                                    Salir
                                </button>
                            </form>
                        </div>
                    @endauth
                </nav>
            </div>
        </header>

        <!-- Main Content -->
        <main class="max-w-7xl mx-auto px-3 sm:px-6 py-6 sm:py-12">
            <!-- Page Title -->
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-gray-800 mb-2">COMPROMISO DE GESTIÓN ESCOLAR 2</h1>
                <p class="text-gray-600">Resultados de Estudiantes por Nivel Educativo</p>
                <p class="text-sm text-amber-600 font-semibold mt-2">💾 Los datos se guardan automáticamente en cada entrada</p>
            </div>

            <!-- Selector de Niveles -->
            <div class="niveles-selector">
                <h3>👇 Selecciona los niveles educativos que deseas evaluar:</h3>
                <div class="niveles-grid">
                    <div class="nivel-checkbox">
                        <input type="checkbox" id="check-inicial" class="nivel-check" data-nivel="inicial" checked />
                        <label for="check-inicial">📚 Nivel Inicial</label>
                    </div>
                    <div class="nivel-checkbox">
                        <input type="checkbox" id="check-primaria" class="nivel-check" data-nivel="primaria" checked />
                        <label for="check-primaria">📖 Nivel Primaria</label>
                    </div>
                    <div class="nivel-checkbox">
                        <input type="checkbox" id="check-secundaria" class="nivel-check" data-nivel="secundaria" checked />
                        <label for="check-secundaria">🎓 Nivel Secundaria</label>
                    </div>
                </div>
            </div>

            <!-- VALIDACIÓN DE USUARIO REGISTRADO -->
            @auth
            <!-- Contenedor de niveles -->
            <div id="niveles-container">
                <!-- Nivel Inicial -->
                <div class="nivel-section">
                    <div class="table-container">
                        <div class="nivel-header">
                            <h2>📚 Nivel Inicial</h2>
                            <select class="year-selector" id="year-inicial" data-nivel="inicial" onchange="cambiarAno('inicial')"></select>
                        </div>
                        
                        <!-- 3 Tablas para Inicial (2025, 2024) -->
                        <div id="tablas-inicial"></div>
                    </div>

                    <!-- Gráfico Nivel Inicial -->
                    <div class="chart-container">
                        <canvas id="inicialChart"></canvas>
                        <div class="chart-legend" id="inicialLegend"></div>
                    </div>
                </div>

                <!-- Nivel Primaria -->
                <div class="nivel-section">
                    <div class="table-container">
                        <div class="nivel-header">
                            <h2>📖 Nivel Primaria</h2>
                            <select class="year-selector" id="year-primaria" data-nivel="primaria" onchange="cambiarAno('primaria')"></select>
                        </div>
                        
                        <!-- 3 Tablas para Primaria (2025, 2024) -->
                        <div id="tablas-primaria"></div>
                    </div>

                    <!-- Gráfico Nivel Primaria -->
                    <div class="chart-container">
                        <canvas id="primariaChart"></canvas>
                        <div class="chart-legend" id="primariaLegend"></div>
                    </div>
                </div>

                <!-- Nivel Secundaria -->
                <div class="nivel-section">
                    <div class="table-container">
                        <div class="nivel-header">
                            <h2>🎓 Nivel Secundaria</h2>
                            <select class="year-selector" id="year-secundaria" data-nivel="secundaria" onchange="cambiarAno('secundaria')"></select>
                        </div>
                        
                        <!-- 3 Tablas para Secundaria (2025, 2024) -->
                        <div id="tablas-secundaria"></div>
                    </div>

                    <!-- Gráfico Nivel Secundaria -->
                    <div class="chart-container">
                        <canvas id="secundariaChart"></canvas>
                        <div class="chart-legend" id="secundariaLegend"></div>
                    </div>
                </div>
            </div>

            <!-- Buttons -->
            <div class="button-group">
                <button class="btn btn-secondary" onclick="window.history.back()">← Atrás</button>
                <button
                    type="button"
                    id="resumeBtn"
                    onclick="window.location.href='{{ route('resumen-evaluaciones-institucionales2') }}'"
                    class="px-8 py-3 border border-green-500 text-green-700 rounded-lg font-semibold hover:bg-green-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    📊 Ver Resumen
                </button>
                <button class="btn btn-primary" onclick="guardarDatos2(); setTimeout(() => { window.location.href='{{ route('info-institucion') }}'; }, 500);">Continuar →</button>
            </div>

            @else
                <!-- Mensaje para usuarios NO registrados -->
                <div class="bg-red-50 border-2 border-red-200 rounded-lg p-6 text-center">
                    <h2 class="text-2xl font-bold text-red-800 mb-3">⚠️ Acceso Restringido</h2>
                    <p class="text-red-700 mb-4">Esta herramienta solo está disponible para usuarios registrados e identificados.</p>
                    <a href="{{ route('login') }}" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 inline-block">Iniciar Sesión</a>
                </div>
            @endauth
        </main>

        <!-- Footer -->
        <footer class="bg-blue-950 text-blue-100 py-6 mt-12">
            <div class="max-w-7xl mx-auto px-6 text-center">
                <p>&copy; 2026 DIAGNOSTIKA. Herramienta de Evaluación Educativa</p>
            </div>
        </footer>

        <script>
            Chart.register(ChartDataLabels);

            // Almacenar gráficos
            let charts = {
                inicial: null,
                primaria: null,
                secundaria: null
            };

            // Colores especificados
            const coloresCategoria = {
                'matriculados': '#f97316',
                'aprobados': '#22c55e',
                'desaprobados': '#ef4444',
                'recuperacion': '#06b6d4',
                'retirados': '#eab308',
                'trasladados': '#92400e',
                'fallecidos': '#4b5563'
            };

            const etiquetas = {
                'matriculados': 'Matriculados',
                'aprobados': 'Aprobados',
                'desaprobados': 'Desaprobados',
                'recuperacion': 'Requiere Recuperación',
                'retirados': 'Retirados',
                'trasladados': 'Trasladados',
                'fallecidos': 'Fallecidos'
            };

            // Tiempos para autoguardado
            let timeoutIds = {};

            // Función para crear HTML de una tabla
            function crearTabla(nivel, ano) {
                const tablaId = `tabla-${nivel}-${ano}`;
                let campos = ['matriculados', 'aprobados', 'desaprobados', 'recuperacion', 'retirados', 'trasladados', 'fallecidos'];
                
                // Excluir 'recuperacion' solo para Inicial
                if (nivel === 'inicial') {
                    campos = ['matriculados', 'aprobados', 'desaprobados', 'retirados', 'trasladados', 'fallecidos'];
                }
                
                let headerHtml = '<tr><th>Matriculados</th><th>Aprobados</th><th>Desaprobados</th>';
                if (nivel !== 'inicial') {
                    headerHtml += '<th>Requiere Recuperación</th>';
                }
                headerHtml += '<th>Retirados</th><th>Trasladados</th><th>Fallecidos</th></tr>';
                
                let html = `
                    <form class="nivel-form" data-nivel="${nivel}" data-year="${ano}" id="form-${tablaId}">
                        <table class="data-table" id="${tablaId}" style="display:none;">
                            <thead>
                                ${headerHtml}
                            </thead>
                            <tbody>
                                <tr>
                `;
                
                campos.forEach(campo => {
                    html += `<td><input type="number" class="input-numeric" name="${nivel}_${ano}_${campo}" 
                                min="0" value="0" data-nivel="${nivel}" data-year="${ano}" 
                                data-tipo="${campo}" onchange="guardarConDelay('${nivel}', '${ano}')"></td>`;
                });
                
                html += `
                                </tr>
                            </tbody>
                        </table>
                    </form>
                `;
                
                return html;
            }

            // Función para generar años selectores y tablas
            function generarAnosYTablas() {
                const anos = [2025, 2024, 2023];
                
                // For each level
                ['inicial', 'primaria', 'secundaria'].forEach(nivel => {
                    // Generar selector de año
                    const select = document.getElementById(`year-${nivel}`);
                    if (select) {
                        anos.forEach(ano => {
                            const option = document.createElement('option');
                            option.value = ano;
                            option.textContent = 'Año ' + ano;
                            select.appendChild(option);
                        });
                        select.value = anos[0];
                    }

                    // Generar tablas para este nivel
                    const tablasContainer = document.getElementById(`tablas-${nivel}`);
                    if (tablasContainer) {
                        anos.forEach(ano => {
                            tablasContainer.innerHTML += crearTabla(nivel, ano);
                        });
                    }
                });

                // Cargar datos existentes y mostrar tabla actual
                cargarDatosAlInicio();
                
                // Mostrar tabla del año actual por defecto
                ['inicial', 'primaria', 'secundaria'].forEach(nivel => {
                    mostrarTabla(nivel, anos[0]);
                });
            }

            // Función para mostrar/ocultar tablas según año seleccionado
            function mostrarTabla(nivel, ano) {
                const anioActual = new Date().getFullYear();
                const anos = [];
                
                for (let i = 1; i <= 4; i++) {
                    anos.push(anioActual - i);
                }
                
                anos.forEach(year => {
                    const tabla = document.getElementById(`tabla-${nivel}-${year}`);
                    if (tabla) {
                        tabla.style.display = year == ano ? 'table' : 'none';
                    }
                });
            }

            // Función para cambiar año
            function cambiarAno(nivel) {
                const select = document.getElementById(`year-${nivel}`);
                const ano = select.value;
                
                mostrarTabla(nivel, ano);
                
                // Cargar datos del año seleccionado
                cargarDatosDelAno(nivel, ano);
                
                // Actualizar gráfico
                actualizarGraficoPie(nivel);
            }

            // Función para cargar datos de un año específico
            function cargarDatosDelAno(nivel, ano) {
                fetch(`{{ route('evaluaciones2.obtenerDatos') }}?nivel=${nivel}&ano=${ano}`)
                    .then(response => response.json())
                    .then(data => {
                        let campos = ['matriculados', 'aprobados', 'desaprobados', 'recuperacion', 'retirados', 'trasladados', 'fallecidos'];
                        
                        // Excluir recuperación para Inicial
                        if (nivel === 'inicial') {
                            campos = ['matriculados', 'aprobados', 'desaprobados', 'retirados', 'trasladados', 'fallecidos'];
                        }
                        
                        if (data.data && Object.keys(data.data).length > 0) {
                            campos.forEach(campo => {
                                const input = document.querySelector(`input[name="${nivel}_${ano}_${campo}"]`);
                                if (input) {
                                    input.value = data.data[campo] || 0;
                                }
                            });
                        } else {
                            campos.forEach(campo => {
                                const input = document.querySelector(`input[name="${nivel}_${ano}_${campo}"]`);
                                if (input) {
                                    input.value = 0;
                                }
                            });
                        }
                        
                        actualizarGraficoPie(nivel);
                    })
                    .catch(error => {
                        console.error('Error cargando datos:', error);
                        actualizarGraficoPie(nivel);
                    });
            }

            // Función de autoguardado con delay
            function guardarConDelay(nivel, ano) {
                // Limpiar timeout anterior si existe
                const key = `${nivel}-${ano}`;
                if (timeoutIds[key]) {
                    clearTimeout(timeoutIds[key]);
                }
                
                // Establecer nuevo timeout para guardar después de 2 segundos
                timeoutIds[key] = setTimeout(() => {
                    guardarProgresoAutomatico(nivel, ano);
                    actualizarGraficoPie(nivel);
                }, 2000);
            }

            // Función para obtener datos de un nivel y año específico
            function obtenerDatosNivelAno(nivel, ano) {
                const datos = {};
                let campos = ['matriculados', 'aprobados', 'desaprobados', 'recuperacion', 'retirados', 'trasladados', 'fallecidos'];
                
                // Excluir recuperación para Inicial
                if (nivel === 'inicial') {
                    campos = ['matriculados', 'aprobados', 'desaprobados', 'retirados', 'trasladados', 'fallecidos'];
                }
                
                campos.forEach(campo => {
                    const input = document.querySelector(`input[name="${nivel}_${ano}_${campo}"]`);
                    datos[campo] = input ? parseInt(input.value) || 0 : 0;
                });
                
                return datos;
            }

            // Función para obtener datos de un nivel (todas las tablas)
            function obtenerDatosNivel(nivel) {
                const datos = {};
                let campos = ['matriculados', 'aprobados', 'desaprobados', 'recuperacion', 'retirados', 'trasladados', 'fallecidos'];
                
                // Excluir recuperación para Inicial
                if (nivel === 'inicial') {
                    campos = ['matriculados', 'aprobados', 'desaprobados', 'retirados', 'trasladados', 'fallecidos'];
                }
                
                campos.forEach(campo => {
                    // Obtener de la tabla visible
                    const select = document.getElementById(`year-${nivel}`);
                    const ano = select.value;
                    const input = document.querySelector(`input[name="${nivel}_${ano}_${campo}"]`);
                    datos[campo] = input ? parseInt(input.value) || 0 : 0;
                });
                
                return datos;
            }

            // Autoguardado
            function guardarProgresoAutomatico(nivel, ano) {
                const datos = obtenerDatosNivelAno(nivel, ano);

                // Mostrar indicador de guardado
                mostrarIndicadorGuardado(`Guardando ${nivel} ${ano}...`);

                fetch('{{ route('evaluaciones2.guardarProgreso') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        usuario_id: {{ auth()->id() }},
                        nivel: nivel,
                        ano: ano,
                        matriculados: datos.matriculados,
                        aprobados: datos.aprobados,
                        desaprobados: datos.desaprobados,
                        recuperacion: datos.recuperacion,
                        retirados: datos.retirados,
                        trasladados: datos.trasladados,
                        fallecidos: datos.fallecidos
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        mostrarIndicadorGuardado('✓ Guardado correctamente', 'success');
                        setTimeout(() => ocultarIndicador(), 2000);
                    } else {
                        mostrarIndicadorGuardado('✗ Error al guardar', 'error');
                        console.error('Error:', data);
                    }
                })
                .catch(error => {
                    mostrarIndicadorGuardado('✗ Error de conexión', 'error');
                    console.error('Error:', error);
                });
            }

            // Indicador visual de guardado
            function mostrarIndicadorGuardado(mensaje, tipo = 'info') {
                let indicador = document.getElementById('indicador-guardado');
                if (!indicador) {
                    indicador = document.createElement('div');
                    indicador.id = 'indicador-guardado';
                    indicador.style.cssText = 'position: fixed; top: 20px; right: 20px; padding: 12px 20px; border-radius: 6px; font-weight: 500; z-index: 9999; transition: all 0.3s ease;';
                    document.body.appendChild(indicador);
                }
                
                indicador.textContent = mensaje;
                indicador.style.opacity = '1';
                indicador.style.visibility = 'visible';
                
                if (tipo === 'success') {
                    indicador.style.backgroundColor = '#22c55e';
                    indicador.style.color = 'white';
                } else if (tipo === 'error') {
                    indicador.style.backgroundColor = '#ef4444';
                    indicador.style.color = 'white';
                } else {
                    indicador.style.backgroundColor = '#3b82f6';
                    indicador.style.color = 'white';
                }
            }

            function ocultarIndicador() {
                const indicador = document.getElementById('indicador-guardado');
                if (indicador) {
                    indicador.style.opacity = '0';
                    indicador.style.visibility = 'hidden';
                }
            }

            // Actualizar gráfico
            function actualizarGraficoPie(nivel) {
                const datos = obtenerDatosNivel(nivel);
                
                let labels = [
                    etiquetas.aprobados,
                    etiquetas.desaprobados,
                    etiquetas.retirados,
                    etiquetas.trasladados,
                    etiquetas.fallecidos
                ];

                let valores = [
                    datos.aprobados || 0,
                    datos.desaprobados || 0,
                    datos.retirados || 0,
                    datos.trasladados || 0,
                    datos.fallecidos || 0
                ];

                let colores = [
                    coloresCategoria.aprobados,
                    coloresCategoria.desaprobados,
                    coloresCategoria.retirados,
                    coloresCategoria.trasladados,
                    coloresCategoria.fallecidos
                ];

                // Agregar Requiere Recuperación para Primaria y Secundaria
                if (nivel !== 'inicial') {
                    labels.splice(2, 0, etiquetas.recuperacion);
                    valores.splice(2, 0, datos.recuperacion || 0);
                    colores.splice(2, 0, coloresCategoria.recuperacion);
                }

                const canvasId = `${nivel}Chart`;
                const ctx = document.getElementById(canvasId);
                if (!ctx) return;

                const context = ctx.getContext('2d');

                if (charts[nivel]) {
                    charts[nivel].destroy();
                }

                const total = valores.reduce((a, b) => a + b, 0);

                charts[nivel] = new Chart(context, {
                    type: 'doughnut',
                    data: {
                        labels: labels,
                        datasets: [{
                            data: valores,
                            backgroundColor: colores,
                            borderColor: '#fff',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            },
                            title: {
                                display: false
                            },
                            datalabels: {
                                color: '#fff',
                                font: {
                                    weight: 'bold',
                                    size: 12
                                },
                                formatter: function(value) {
                                    if (value === 0) return '';
                                    const porcentaje = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                    return porcentaje + '%';
                                }
                            }
                        }
                    }
                });

                actualizarLeyenda(nivel, labels, colores, valores, total);
            }

            function actualizarLeyenda(nivel, labels, colores, valores, total) {
                const legendDiv = document.getElementById(`${nivel}Legend`);
                if (!legendDiv) return;
                
                legendDiv.innerHTML = '';

                labels.forEach((label, index) => {
                    const valor = valores[index];
                    
                    const legendItem = document.createElement('div');
                    legendItem.className = 'legend-item';
                    legendItem.innerHTML = `
                        <div class="legend-color" style="background-color: ${colores[index]};"></div>
                        <div class="legend-text">
                            <strong>${label}</strong>: ${valor}
                        </div>
                    `;
                    legendDiv.appendChild(legendItem);
                });
            }

            function guardarDatos2() {
                // Guardar todos los datos antes de finalizar
                const datos = {};
                ['inicial', 'primaria', 'secundaria'].forEach(nivel => {
                    datos[nivel] = obtenerDatosNivel(nivel);
                });

                localStorage.setItem('evaluacionesInstitucionales2', JSON.stringify(datos));
                mostrarIndicadorGuardado('✓ Todos los datos han sido guardados', 'success');
            }

            function cargarDatosAlInicio() {
                const anioActual = new Date().getFullYear();
                
                ['inicial', 'primaria', 'secundaria'].forEach(nivel => {
                    for (let i = 1; i <= 4; i++) {
                        const ano = anioActual - i;
                        cargarDatosDelAno(nivel, ano);
                    }
                    console.log(`Datos cargados para ${nivel}`);
                });
            }

            // Inicializar
            document.addEventListener('DOMContentLoaded', () => {
                generarAnosYTablas();

                // Manejar checkboxes de niveles
                const checkboxes = document.querySelectorAll('.nivel-check');
                checkboxes.forEach(checkbox => {
                    checkbox.addEventListener('change', function() {
                        const nivel = this.dataset.nivel;
                        const nivelSection = document.querySelector(`.nivel-section:has(#tablas-${nivel})`);
                        if (nivelSection) {
                            nivelSection.style.display = this.checked ? 'block' : 'none';
                        }
                    });
                });
            });
        </script>

        <!-- WhatsApp Button -->
        @include('components.whatsapp-button')
    </body>
</html>
