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

        <title>Evaluaciones Institucionales - 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 -->
        <?php if(file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot'))): ?>
            <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
        <?php else: ?>
            <script src="https://cdn.tailwindcss.com"></script>
        <?php 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;
            }

            .level-table {
                width: 100%;
                border-collapse: collapse;
            }

            .level-table thead {
                background-color: #f3f4f6;
                border-bottom: 2px solid #d1d5db;
            }

            .level-table th {
                padding: 1rem;
                text-align: left;
                font-weight: 600;
                color: #1f2937;
                font-size: 0.95rem;
            }

            .level-table td {
                padding: 0.75rem 1rem;
                border-bottom: 1px solid #e5e7eb;
                color: #374151;
            }

            .level-table tbody tr:hover {
                background-color: #f9fafb;
            }

            .level-cell {
                font-weight: 600;
                color: #1f2937;
                background-color: #f3f4f6;
            }

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

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

            .input-percentage.error {
                border-color: #ef4444;
                background-color: #fef2f2;
            }

            .error-message {
                color: #dc2626;
                font-size: 0.75rem;
                margin-top: 0.25rem;
                display: none;
            }

            .error-message.show {
                display: block;
            }

            .total-row {
                background-color: #f0fdf4;
                font-weight: 700;
            }

            .total-row td {
                border-bottom: 2px solid #22c55e;
                padding: 1rem;
            }

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

            .button-group {
                display: flex;
                gap: 1rem;
                margin-top: 2rem;
            }

            .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;
            }

            .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="<?php echo e(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">
                    <?php if(auth()->guard()->check()): ?>
                        <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"><?php echo e(Auth::user()->name ?? 'Usuario'); ?></span>
                            <form method="POST" action="<?php echo e(route('logout')); ?>" style="display:inline;">
                                <?php echo csrf_field(); ?>
                                <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>
                    <?php endif; ?>
                </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 1</h1>
                <p class="text-gray-600">Evaluaciones Institucionales por Nivel</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>

            <!-- Nivel Inicial Section -->
            <div id="nivel-section-inicial">
                <div class="table-container">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">📚 Nivel Inicial</h2>
                    <form class="nivel-form" data-nivel="inicial">
                    <table class="level-table">
                        <thead>
                            <tr>
                                <th>Nivel de Logro</th>
                                <th>Comunicación (%)</th>
                                <th>Matemática (%)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="level-cell">Satisfactorio</td>
                                <td>
                                    <input type="number" class="input-percentage" name="inicial_satisfactorio_comunicacion" min="0" max="100" value="<?php echo e($inicial->satisfactorio_comunicacion ?? 0); ?>" data-nivel="inicial" data-logro="satisfactorio" data-area="comunicacion" data-color="#10b981">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="inicial_satisfactorio_matematica" min="0" max="100" value="<?php echo e($inicial->satisfactorio_matematica ?? 0); ?>" data-nivel="inicial" data-logro="satisfactorio" data-area="matematica" data-color="#10b981">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="level-cell">En Proceso</td>
                                <td>
                                    <input type="number" class="input-percentage" name="inicial_en_proceso_comunicacion" min="0" max="100" value="<?php echo e($inicial->en_proceso_comunicacion ?? 0); ?>" data-nivel="inicial" data-logro="en_proceso" data-area="comunicacion" data-color="#f97316">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="inicial_en_proceso_matematica" min="0" max="100" value="<?php echo e($inicial->en_proceso_matematica ?? 0); ?>" data-nivel="inicial" data-logro="en_proceso" data-area="matematica" data-color="#f97316">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="level-cell">En Inicio</td>
                                <td>
                                    <input type="number" class="input-percentage" name="inicial_en_inicio_comunicacion" min="0" max="100" value="<?php echo e($inicial->en_inicio_comunicacion ?? 0); ?>" data-nivel="inicial" data-logro="en_inicio" data-area="comunicacion" data-color="#eab308">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="inicial_en_inicio_matematica" min="0" max="100" value="<?php echo e($inicial->en_inicio_matematica ?? 0); ?>" data-nivel="inicial" data-logro="en_inicio" data-area="matematica" data-color="#eab308">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="level-cell">Previo al Inicio</td>
                                <td>
                                    <input type="number" class="input-percentage" name="inicial_previo_comunicacion" min="0" max="100" value="<?php echo e($inicial->previo_comunicacion ?? 0); ?>" data-nivel="inicial" data-logro="previo" data-area="comunicacion" data-color="#ef4444">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="inicial_previo_matematica" min="0" max="100" value="<?php echo e($inicial->previo_matematica ?? 0); ?>" data-nivel="inicial" data-logro="previo" data-area="matematica" data-color="#ef4444">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr class="total-row">
                                <td>TOTAL</td>
                                <td class="total-comunicacion">0%</td>
                                <td class="total-matematica">0%</td>
                            </tr>
                        </tbody>
                    </table>
                    </form>
                </div>
                <!-- Gráfico Nivel Inicial -->
                <div class="chart-container">
                    <canvas id="inicialChart"></canvas>
                </div>
            </div>

            <!-- Nivel Primaria Section -->
            <div id="nivel-section-primaria">
                <div class="table-container">
                <h2 class="text-xl font-bold text-gray-800 mb-4">📖 Nivel Primaria</h2>
                <form class="nivel-form" data-nivel="primaria">
                    <table class="level-table">
                        <thead>
                            <tr>
                                <th>Nivel de Logro</th>
                                <th>Comunicación (%)</th>
                                <th>Matemática (%)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="level-cell">Satisfactorio</td>
                                <td>
                                    <input type="number" class="input-percentage" name="primaria_satisfactorio_comunicacion" min="0" max="100" value="<?php echo e($primaria->satisfactorio_comunicacion ?? 0); ?>" data-nivel="primaria" data-logro="satisfactorio" data-area="comunicacion" data-color="#10b981">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="primaria_satisfactorio_matematica" min="0" max="100" value="<?php echo e($primaria->satisfactorio_matematica ?? 0); ?>" data-nivel="primaria" data-logro="satisfactorio" data-area="matematica" data-color="#10b981">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="level-cell">En Proceso</td>
                                <td>
                                    <input type="number" class="input-percentage" name="primaria_en_proceso_comunicacion" min="0" max="100" value="<?php echo e($primaria->en_proceso_comunicacion ?? 0); ?>" data-nivel="primaria" data-logro="en_proceso" data-area="comunicacion" data-color="#f97316">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="primaria_en_proceso_matematica" min="0" max="100" value="<?php echo e($primaria->en_proceso_matematica ?? 0); ?>" data-nivel="primaria" data-logro="en_proceso" data-area="matematica" data-color="#f97316">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="level-cell">En Inicio</td>
                                <td>
                                    <input type="number" class="input-percentage" name="primaria_en_inicio_comunicacion" min="0" max="100" value="<?php echo e($primaria->en_inicio_comunicacion ?? 0); ?>" data-nivel="primaria" data-logro="en_inicio" data-area="comunicacion" data-color="#eab308">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="primaria_en_inicio_matematica" min="0" max="100" value="<?php echo e($primaria->en_inicio_matematica ?? 0); ?>" data-nivel="primaria" data-logro="en_inicio" data-area="matematica" data-color="#eab308">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="level-cell">Previo al Inicio</td>
                                <td>
                                    <input type="number" class="input-percentage" name="primaria_previo_comunicacion" min="0" max="100" value="<?php echo e($primaria->previo_comunicacion ?? 0); ?>" data-nivel="primaria" data-logro="previo" data-area="comunicacion" data-color="#ef4444">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="primaria_previo_matematica" min="0" max="100" value="<?php echo e($primaria->previo_matematica ?? 0); ?>" data-nivel="primaria" data-logro="previo" data-area="matematica" data-color="#ef4444">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr class="total-row">
                                <td>TOTAL</td>
                                <td class="total-comunicacion">0%</td>
                                <td class="total-matematica">0%</td>
                            </tr>
                        </tbody>
                    </table>
                    </form>
                </div>
                <!-- Gráfico Nivel Primaria -->
                <div class="chart-container">
                    <canvas id="primariaChart"></canvas>
                </div>
            </div>

            <!-- Nivel Secundaria Section -->
            <div id="nivel-section-secundaria">
                <div class="table-container">
                <h2 class="text-xl font-bold text-gray-800 mb-4">🎓 Nivel Secundaria</h2>
                <form class="nivel-form" data-nivel="secundaria">
                    <table class="level-table">
                        <thead>
                            <tr>
                                <th>Nivel de Logro</th>
                                <th>Comunicación (%)</th>
                                <th>Matemática (%)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="level-cell">Satisfactorio</td>
                                <td>
                                    <input type="number" class="input-percentage" name="secundaria_satisfactorio_comunicacion" min="0" max="100" value="<?php echo e($secundaria->satisfactorio_comunicacion ?? 0); ?>" data-nivel="secundaria" data-logro="satisfactorio" data-area="comunicacion" data-color="#10b981">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="secundaria_satisfactorio_matematica" min="0" max="100" value="<?php echo e($secundaria->satisfactorio_matematica ?? 0); ?>" data-nivel="secundaria" data-logro="satisfactorio" data-area="matematica" data-color="#10b981">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="level-cell">En Proceso</td>
                                <td>
                                    <input type="number" class="input-percentage" name="secundaria_en_proceso_comunicacion" min="0" max="100" value="<?php echo e($secundaria->en_proceso_comunicacion ?? 0); ?>" data-nivel="secundaria" data-logro="en_proceso" data-area="comunicacion" data-color="#f97316">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="secundaria_en_proceso_matematica" min="0" max="100" value="<?php echo e($secundaria->en_proceso_matematica ?? 0); ?>" data-nivel="secundaria" data-logro="en_proceso" data-area="matematica" data-color="#f97316">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="level-cell">En Inicio</td>
                                <td>
                                    <input type="number" class="input-percentage" name="secundaria_en_inicio_comunicacion" min="0" max="100" value="<?php echo e($secundaria->en_inicio_comunicacion ?? 0); ?>" data-nivel="secundaria" data-logro="en_inicio" data-area="comunicacion" data-color="#eab308">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="secundaria_en_inicio_matematica" min="0" max="100" value="<?php echo e($secundaria->en_inicio_matematica ?? 0); ?>" data-nivel="secundaria" data-logro="en_inicio" data-area="matematica" data-color="#eab308">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="level-cell">Previo al Inicio</td>
                                <td>
                                    <input type="number" class="input-percentage" name="secundaria_previo_comunicacion" min="0" max="100" value="<?php echo e($secundaria->previo_comunicacion ?? 0); ?>" data-nivel="secundaria" data-logro="previo" data-area="comunicacion" data-color="#ef4444">
                                    <div class="error-message"></div>
                                </td>
                                <td>
                                    <input type="number" class="input-percentage" name="secundaria_previo_matematica" min="0" max="100" value="<?php echo e($secundaria->previo_matematica ?? 0); ?>" data-nivel="secundaria" data-logro="previo" data-area="matematica" data-color="#ef4444">
                                    <div class="error-message"></div>
                                </td>
                            </tr>
                            <tr class="total-row">
                                <td>TOTAL</td>
                                <td class="total-comunicacion">0%</td>
                                <td class="total-matematica">0%</td>
                            </tr>
                        </tbody>
                    </table>
                    </form>
                </div>
                <!-- Gráfico Nivel Secundaria -->
                <div class="chart-container">
                    <canvas id="secundariaChart"></canvas>
                </div>
            </div>

            <!-- Buttons -->
            <div class="button-group flex justify-between items-center">
                <button class="btn btn-secondary" onclick="window.history.back()">Atrás</button>
                <div class="flex gap-4">
                    <button
                        type="button"
                        id="resumeBtn"
                        onclick="window.location.href='<?php echo e(route('resumen-evaluaciones-institucionales')); ?>'"
                        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="window.location.href='<?php echo e(route('evaluaciones-institucionales2')); ?>'">Continuar con Evaluaciones</button>
                </div>
            </div>
        </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; 2025 DIAGNOSTIKA. Herramienta de Evaluación Educativa</p>
            </div>
        </footer>

        <script>
            Chart.register(ChartDataLabels);

            let charts = {
                inicial: null,
                primaria: null,
                secundaria: null
            };

            // Colores para los niveles de logro
            const colores = {
                'satisfactorio': '#10b981',      // Verde
                'en_proceso': '#f97316',         // Naranja
                'en_inicio': '#eab308',          // Amarillo
                'previo': '#ef4444'              // Rojo
            };

            const nivelesToText = {
                'satisfactorio': 'Satisfactorio',
                'en_proceso': 'En Proceso',
                'en_inicio': 'En Inicio',
                'previo': 'Previo al Inicio'
            };

            // Agregar event listeners a todos los inputs
            document.querySelectorAll('.input-percentage').forEach(input => {
                input.addEventListener('input', function() {
                    const nivel = this.dataset.nivel;
                    validarTotales(nivel);
                    actualizarGrafico();
                    guardarProgresoAutomatico(nivel);
                });
            });

            function validarTotales(nivel) {
                const inputs = document.querySelectorAll(`input[data-nivel="${nivel}"]`);
                const form = document.querySelector(`form[data-nivel="${nivel}"]`);
                
                // Separar inputs por área
                const comunicacionInputs = Array.from(inputs).filter(i => i.dataset.area === 'comunicacion');
                const matematicaInputs = Array.from(inputs).filter(i => i.dataset.area === 'matematica');

                // Validar comunicación
                let totalComunicacion = 0;
                comunicacionInputs.forEach(input => {
                    let valor = parseInt(input.value) || 0;
                    if (valor < 0) valor = 0;
                    if (valor > 100) {
                        valor = 100;
                        input.value = 100;
                    }
                    totalComunicacion += valor;
                });

                // Validar matemática
                let totalMatematica = 0;
                matematicaInputs.forEach(input => {
                    let valor = parseInt(input.value) || 0;
                    if (valor < 0) valor = 0;
                    if (valor > 100) {
                        valor = 100;
                        input.value = 100;
                    }
                    totalMatematica += valor;
                });

                // Mostrar errores si superan 100%
                comunicacionInputs.forEach(input => {
                    const errorDiv = input.parentElement.querySelector('.error-message');
                    if (totalComunicacion > 100) {
                        input.classList.add('error');
                        errorDiv.textContent = `⚠️ Total excede 100% (${totalComunicacion}%)`;
                        errorDiv.classList.add('show');
                    } else {
                        input.classList.remove('error');
                        errorDiv.classList.remove('show');
                    }
                });

                matematicaInputs.forEach(input => {
                    const errorDiv = input.parentElement.querySelector('.error-message');
                    if (totalMatematica > 100) {
                        input.classList.add('error');
                        errorDiv.textContent = `⚠️ Total excede 100% (${totalMatematica}%)`;
                        errorDiv.classList.add('show');
                    } else {
                        input.classList.remove('error');
                        errorDiv.classList.remove('show');
                    }
                });

                // Actualizar totales en la tabla
                const totalRow = form.querySelector('.total-row');
                const totalComunicacionCell = totalRow.querySelector('.total-comunicacion');
                const totalMatematicaCell = totalRow.querySelector('.total-matematica');

                totalComunicacionCell.textContent = `${totalComunicacion}%`;
                totalMatematicaCell.textContent = `${totalMatematica}%`;

                // Cambiar color si excede 100%
                if (totalComunicacion > 100) {
                    totalComunicacionCell.style.color = '#ef4444';
                    totalComunicacionCell.style.fontWeight = 'bold';
                } else {
                    totalComunicacionCell.style.color = '#22c55e';
                }

                if (totalMatematica > 100) {
                    totalMatematicaCell.style.color = '#ef4444';
                    totalMatematicaCell.style.fontWeight = 'bold';
                } else {
                    totalMatematicaCell.style.color = '#22c55e';
                }
            }

            function obtenerDatos() {
                const datos = {};
                document.querySelectorAll('form[data-nivel]').forEach(form => {
                    const nivel = form.dataset.nivel;
                    datos[nivel] = {};
                    
                    form.querySelectorAll('input[data-logro]').forEach(input => {
                        const logro = input.dataset.logro;
                        const area = input.dataset.area;
                        const valor = parseInt(input.value) || 0;
                        
                        if (!datos[nivel][logro]) {
                            datos[nivel][logro] = {};
                        }
                        datos[nivel][logro][area] = valor;
                    });
                });
                return datos;
            }

            function actualizarGrafico() {
                const datos = obtenerDatos();
                const nivelesLogro = ['satisfactorio', 'en_proceso', 'en_inicio', 'previo'];
                const niveles = ['inicial', 'primaria', 'secundaria'];
                const areas = ['comunicacion', 'matematica'];

                // Crear un gráfico para cada nivel
                niveles.forEach(nivel => {
                    const labels = ['Comunicación', 'Matemática'];
                    const datasets = [];

                    nivelesLogro.forEach(nivelLogro => {
                        const comValor = datos[nivel]?.[nivelLogro]?.comunicacion || 0;
                        const matValor = datos[nivel]?.[nivelLogro]?.matematica || 0;

                        datasets.push({
                            label: nivelesToText[nivelLogro],
                            data: [comValor, matValor],
                            backgroundColor: colores[nivelLogro],
                            borderColor: colores[nivelLogro],
                            borderWidth: 1,
                            borderRadius: 4
                        });
                    });

                    // Obtener canvas y contexto
                    const canvasId = `${nivel}Chart`;
                    const ctx = document.getElementById(canvasId).getContext('2d');

                    // Destruir gráfico anterior si existe
                    if (charts[nivel]) {
                        charts[nivel].destroy();
                    }

                    // Crear nuevo gráfico
                    charts[nivel] = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: datasets
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                    labels: {
                                        font: { size: 11 },
                                        usePointStyle: true,
                                        padding: 15
                                    }
                                },
                                title: {
                                    display: false
                                },
                                datalabels: {
                                    anchor: 'center',
                                    align: 'center',
                                    color: '#fff',
                                    font: {
                                        weight: 'bold',
                                        size: 11
                                    },
                                    formatter: function(value) {
                                        return value > 0 ? value + '%' : '';
                                    }
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 100,
                                    ticks: {
                                        callback: function(value) {
                                            return value + '%';
                                        }
                                    },
                                    title: {
                                        display: true,
                                        text: 'Porcentaje (%)'
                                    }
                                }
                            }
                        }
                    });
                });
            }

            function guardarDatos() {
                const datos = obtenerDatos();
                
                // Validar que no haya errores
                let hayErrores = false;
                document.querySelectorAll('.input-percentage').forEach(input => {
                    if (input.classList.contains('error')) {
                        hayErrores = true;
                    }
                });

                if (hayErrores) {
                    alert('⚠️ Por favor corrige los errores: Los totales no deben exceder el 100%');
                    return;
                }

                // Guardar en localStorage para respaldo
                localStorage.setItem('evaluacionesInstitucionales', JSON.stringify(datos));
                console.log('Datos guardados:', datos);
            }

            function guardarProgresoAutomatico(nivel) {
                const inputs = document.querySelectorAll(`input[data-nivel="${nivel}"]`);
                const anoActual = new Date().getFullYear();
                
                const datos = {
                    nivel: nivel,
                    ano: anoActual,
                    satisfactorio_comunicacion: document.querySelector(`input[name="${nivel}_satisfactorio_comunicacion"]`).value,
                    en_proceso_comunicacion: document.querySelector(`input[name="${nivel}_en_proceso_comunicacion"]`).value,
                    en_inicio_comunicacion: document.querySelector(`input[name="${nivel}_en_inicio_comunicacion"]`).value,
                    previo_comunicacion: document.querySelector(`input[name="${nivel}_previo_comunicacion"]`).value,
                    satisfactorio_matematica: document.querySelector(`input[name="${nivel}_satisfactorio_matematica"]`).value,
                    en_proceso_matematica: document.querySelector(`input[name="${nivel}_en_proceso_matematica"]`).value,
                    en_inicio_matematica: document.querySelector(`input[name="${nivel}_en_inicio_matematica"]`).value,
                    previo_matematica: document.querySelector(`input[name="${nivel}_previo_matematica"]`).value,
                };

                // Enviar datos al servidor
                fetch('<?php echo e(route('evaluaciones.guardarProgreso')); ?>', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(datos)
                })
                .then(response => response.json())
                .then(data => {
                    if (!data.success) {
                        console.error('Error al guardar:', data);
                    }
                })
                .catch(error => console.error('Error:', error));
            }

            function cargarDatosAlInicio() {
                const niveles = ['inicial', 'primaria', 'secundaria'];
                const anoActual = new Date().getFullYear();

                niveles.forEach(nivel => {
                    fetch(`<?php echo e(route('evaluaciones.obtenerDatos')); ?>?nivel=${nivel}&ano=${anoActual}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.data && Object.keys(data.data).length > 0) {
                                // Cargar datos en los inputs
                                document.querySelector(`input[name="${nivel}_satisfactorio_comunicacion"]`).value = data.data.satisfactorio_comunicacion || 0;
                                document.querySelector(`input[name="${nivel}_en_proceso_comunicacion"]`).value = data.data.en_proceso_comunicacion || 0;
                                document.querySelector(`input[name="${nivel}_en_inicio_comunicacion"]`).value = data.data.en_inicio_comunicacion || 0;
                                document.querySelector(`input[name="${nivel}_previo_comunicacion"]`).value = data.data.previo_comunicacion || 0;
                                document.querySelector(`input[name="${nivel}_satisfactorio_matematica"]`).value = data.data.satisfactorio_matematica || 0;
                                document.querySelector(`input[name="${nivel}_en_proceso_matematica"]`).value = data.data.en_proceso_matematica || 0;
                                document.querySelector(`input[name="${nivel}_en_inicio_matematica"]`).value = data.data.en_inicio_matematica || 0;
                                document.querySelector(`input[name="${nivel}_previo_matematica"]`).value = data.data.previo_matematica || 0;
                                
                                // Actualizar validaciones
                                validarTotales(nivel);
                                console.log(`Datos cargados para ${nivel}`);
                            }
                        })
                        .catch(error => console.error('Error cargando datos:', error));
                });
            }

            // Inicializar gráficos al cargar
            document.addEventListener('DOMContentLoaded', () => {
                cargarDatosAlInicio();
                actualizarGrafico();
                // Validar totales iniciales
                document.querySelectorAll('form[data-nivel]').forEach(form => {
                    validarTotales(form.dataset.nivel);
                });

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

            // WhatsApp Button
        </script>

        <!-- WhatsApp Button -->
        <?php echo $__env->make('components.whatsapp-button', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
    </body>
</html>
<?php /**PATH D:\proyecto-web\diagnostika\src\resources\views/evaluaciones-institucionales.blade.php ENDPATH**/ ?>