<!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">

        <title>Resumen 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 -->
        <?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>
        <!-- Chart.js Plugin DataLabels -->
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

        <style>
            .summary-container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 2rem;
            }

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

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

            .summary-header {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                padding: 2rem;
                border-radius: 8px;
                margin-bottom: 2rem;
            }

            .summary-header h1 {
                font-size: 2rem;
                font-weight: bold;
                margin-bottom: 0.5rem;
            }

            .data-table {
                width: 100%;
                border-collapse: collapse;
                background: white;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                margin-bottom: 2rem;
            }

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

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

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

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

            .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 a {
                    width: 100%;
                    padding: 0.75rem 1rem !important;
                    font-size: 0.9rem !important;
                    text-align: center;
                }
            }

            .btn {
                padding: 0.75rem 1.5rem;
                border-radius: 6px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                border: none;
            }

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

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

            .btn-primary {
                background-color: #3b82f6;
                color: white;
            }

            .btn-primary:hover {
                background-color: #2563eb;
            }
        </style>
    </head>
    <body class="bg-gray-50">
        <!-- Header -->
        <header class="bg-blue-950 text-white px-6 py-4 shadow-lg">
            <div class="max-w-7xl mx-auto flex justify-between items-center">
                <h1 class="text-2xl font-bold">DIAGNOSTIKA</h1>
                <nav>
                    <a href="/evaluaciones-institucionales2" class="text-white hover:bg-blue-900 px-4 py-2 rounded transition">
                        ← Volver
                    </a>
                </nav>
            </div>
        </header>

        <main class="summary-container">
            <div class="summary-header">
                <h1>📊 Resumen: Evaluaciones Institucionales 2</h1>
                <p class="text-blue-100">Resultados de matrícula y desempeño por nivel</p>
            </div>

            <?php if($evaluaciones && count($evaluaciones) > 0): ?>
                <!-- Gráficos por Nivel -->
                <!-- Gráfico Inicial -->
                <?php if($evaluaciones->has('inicial')): ?>
                    <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6 border-b-4 border-blue-500 pb-3">📚 Nivel Inicial</h3>
                        <?php $__currentLoopData = $evaluaciones['inicial']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $eval): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="mb-6">
                                <h4 class="text-lg font-semibold text-gray-700 mb-4">Año <?php echo e($eval->ano); ?></h4>
                                <div class="chart-container">
                                    <canvas id="inicialChart<?php echo e($idx); ?>"></canvas>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                <?php endif; ?>

                <!-- Gráfico Primaria -->
                <?php if($evaluaciones->has('primaria')): ?>
                    <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6 border-b-4 border-green-500 pb-3">📖 Nivel Primaria</h3>
                        <?php $__currentLoopData = $evaluaciones['primaria']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $eval): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="mb-6">
                                <h4 class="text-lg font-semibold text-gray-700 mb-4">Año <?php echo e($eval->ano); ?></h4>
                                <div class="chart-container">
                                    <canvas id="primariaChart<?php echo e($idx); ?>"></canvas>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                <?php endif; ?>

                <!-- Gráfico Secundaria -->
                <?php if($evaluaciones->has('secundaria')): ?>
                    <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6 border-b-4 border-purple-500 pb-3">📚 Nivel Secundaria</h3>
                        <?php $__currentLoopData = $evaluaciones['secundaria']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $eval): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="mb-6">
                                <h4 class="text-lg font-semibold text-gray-700 mb-4">Año <?php echo e($eval->ano); ?></h4>
                                <div class="chart-container">
                                    <canvas id="secundariaChart<?php echo e($idx); ?>"></canvas>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                <?php endif; ?>
            <?php else: ?>
                <div class="bg-blue-50 rounded-lg border-l-4 border-blue-500 p-8 text-center">
                    <p class="text-gray-600 mb-4">No hay datos de evaluaciones institucionales 2 para mostrar.</p>
                    <a href="/evaluaciones-institucionales2" class="inline-block bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
                        Ir a Evaluaciones
                    </a>
                </div>
            <?php endif; ?>

            <!-- Buttons -->
            <div class="button-group">
                <button class="btn btn-secondary" onclick="window.history.back()">← Atrás</button>
                <a href="/info-institucion" class="btn btn-primary">Continuar →</a>
            </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>
            <?php if($evaluaciones && count($evaluaciones) > 0): ?>
                // Colores consistentes según la leyenda
                const chartColors = {
                    aprobados: 'rgba(34, 197, 94, 0.8)',           // Verde
                    desaprobados: 'rgba(239, 68, 68, 0.8)',        // Rojo
                    requiereRecuperacion: 'rgba(6, 182, 212, 0.8)', // Cian
                    retirados: 'rgba(253, 224, 71, 0.8)',          // Amarillo
                    trasladados: 'rgba(139, 69, 19, 0.8)',         // Marrón
                    fallecidos: 'rgba(55, 65, 81, 0.8)',           // Gris oscuro
                };

                // Función para crear gráfico circular para INICIAL
                function crearGraficoInicial(canvasId, nivel, aprobados, desaprobados, recuperacion, retirados, trasladados, fallecidos) {
                    const ctx = document.getElementById(canvasId);
                    if (!ctx) return;

                    const data = [aprobados, desaprobados, retirados, trasladados, fallecidos];
                    const total = data.reduce((a, b) => a + b, 0);

                    new Chart(ctx.getContext('2d'), {
                        type: 'doughnut',
                        data: {
                            labels: ['Aprobados', 'Desaprobados', 'Retirados', 'Trasladados', 'Fallecidos'],
                            datasets: [
                                {
                                    data: data,
                                    backgroundColor: [
                                        chartColors.aprobados,
                                        chartColors.desaprobados,
                                        chartColors.retirados,
                                        chartColors.trasladados,
                                        chartColors.fallecidos,
                                    ],
                                    borderColor: [
                                        'rgba(34, 197, 94, 1)',
                                        'rgba(239, 68, 68, 1)',
                                        'rgba(253, 224, 71, 1)',
                                        'rgba(139, 69, 19, 1)',
                                        'rgba(55, 65, 81, 1)',
                                    ],
                                    borderWidth: 2,
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                datalabels: {
                                    color: '#fff',
                                    font: {
                                        size: 14,
                                        weight: 'bold'
                                    },
                                    formatter: function(value) {
                                        if (value === 0) return '';
                                        const percentage = ((value / total) * 100).toFixed(1);
                                        return percentage + '%';
                                    }
                                },
                                legend: {
                                    position: 'bottom',
                                    labels: {
                                        padding: 15,
                                        font: {
                                            size: 13,
                                            weight: 'bold'
                                        },
                                        color: '#333',
                                        generateLabels: function(chart) {
                                            const data = chart.data;
                                            return data.labels.map((label, i) => ({
                                                text: label + ': ' + data.datasets[0].data[i],
                                                fillStyle: data.datasets[0].backgroundColor[i],
                                                fontColor: data.datasets[0].backgroundColor[i].replace('0.8', '1'),
                                                hidden: false,
                                                index: i
                                            }));
                                        }
                                    }
                                },
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                            const percentage = ((context.parsed / total) * 100).toFixed(1);
                                            return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
                                        }
                                    }
                                }
                            }
                        },
                        plugins: [ChartDataLabels]
                    });
                }

                // Función para crear gráfico circular para PRIMARIA Y SECUNDARIA (con Requiere Recuperación)
                function crearGraficoPrimariaSecundaria(canvasId, nivel, aprobados, desaprobados, recuperacion, retirados, trasladados, fallecidos) {
                    const ctx = document.getElementById(canvasId);
                    if (!ctx) return;

                    const data = [aprobados, desaprobados, recuperacion, retirados, trasladados, fallecidos];
                    const total = data.reduce((a, b) => a + b, 0);

                    new Chart(ctx.getContext('2d'), {
                        type: 'doughnut',
                        data: {
                            labels: ['Aprobados', 'Desaprobados', 'Requiere Recuperación', 'Retirados', 'Trasladados', 'Fallecidos'],
                            datasets: [
                                {
                                    data: data,
                                    backgroundColor: [
                                        chartColors.aprobados,
                                        chartColors.desaprobados,
                                        chartColors.requiereRecuperacion,
                                        chartColors.retirados,
                                        chartColors.trasladados,
                                        chartColors.fallecidos,
                                    ],
                                    borderColor: [
                                        'rgba(34, 197, 94, 1)',
                                        'rgba(239, 68, 68, 1)',
                                        'rgba(6, 182, 212, 1)',
                                        'rgba(253, 224, 71, 1)',
                                        'rgba(139, 69, 19, 1)',
                                        'rgba(55, 65, 81, 1)',
                                    ],
                                    borderWidth: 2,
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                datalabels: {
                                    color: '#fff',
                                    font: {
                                        size: 14,
                                        weight: 'bold'
                                    },
                                    formatter: function(value) {
                                        if (value === 0) return '';
                                        const percentage = ((value / total) * 100).toFixed(1);
                                        return percentage + '%';
                                    }
                                },
                                legend: {
                                    position: 'bottom',
                                    labels: {
                                        padding: 15,
                                        font: {
                                            size: 13,
                                            weight: 'bold'
                                        },
                                        color: '#333',
                                        generateLabels: function(chart) {
                                            const data = chart.data;
                                            return data.labels.map((label, i) => ({
                                                text: label + ': ' + data.datasets[0].data[i],
                                                fillStyle: data.datasets[0].backgroundColor[i],
                                                fontColor: data.datasets[0].backgroundColor[i].replace('0.8', '1'),
                                                hidden: false,
                                                index: i
                                            }));
                                        }
                                    }
                                },
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                            const percentage = ((context.parsed / total) * 100).toFixed(1);
                                            return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
                                        }
                                    }
                                }
                            }
                        },
                        plugins: [ChartDataLabels]
                    });
                }

                // Gráfico Inicial
                <?php if($evaluaciones->has('inicial')): ?>
                    <?php $__currentLoopData = $evaluaciones['inicial']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $eval): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        crearGraficoInicial(
                            'inicialChart<?php echo e($idx); ?>',
                            'Inicial - Año <?php echo e($eval->ano); ?>',
                            <?php echo e($eval->aprobados ?? 0); ?>,
                            <?php echo e($eval->desaprobados ?? 0); ?>,
                            <?php echo e($eval->recuperacion ?? 0); ?>,
                            <?php echo e($eval->retirados ?? 0); ?>,
                            <?php echo e($eval->trasladados ?? 0); ?>,
                            <?php echo e($eval->fallecidos ?? 0); ?>

                        );
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                <?php endif; ?>

                // Gráfico Primaria
                <?php if($evaluaciones->has('primaria')): ?>
                    <?php $__currentLoopData = $evaluaciones['primaria']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $eval): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        crearGraficoPrimariaSecundaria(
                            'primariaChart<?php echo e($idx); ?>',
                            'Primaria - Año <?php echo e($eval->ano); ?>',
                            <?php echo e($eval->aprobados ?? 0); ?>,
                            <?php echo e($eval->desaprobados ?? 0); ?>,
                            <?php echo e($eval->recuperacion ?? 0); ?>,
                            <?php echo e($eval->retirados ?? 0); ?>,
                            <?php echo e($eval->trasladados ?? 0); ?>,
                            <?php echo e($eval->fallecidos ?? 0); ?>

                        );
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                <?php endif; ?>

                // Gráfico Secundaria
                <?php if($evaluaciones->has('secundaria')): ?>
                    <?php $__currentLoopData = $evaluaciones['secundaria']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $eval): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        crearGraficoPrimariaSecundaria(
                            'secundariaChart<?php echo e($idx); ?>',
                            'Secundaria - Año <?php echo e($eval->ano); ?>',
                            <?php echo e($eval->aprobados ?? 0); ?>,
                            <?php echo e($eval->desaprobados ?? 0); ?>,
                            <?php echo e($eval->recuperacion ?? 0); ?>,
                            <?php echo e($eval->retirados ?? 0); ?>,
                            <?php echo e($eval->trasladados ?? 0); ?>,
                            <?php echo e($eval->fallecidos ?? 0); ?>

                        );
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                <?php endif; ?>
            <?php endif; ?>
        </script>
    </body>
</html>
<?php /**PATH D:\proyecto-web\diagnostika\src\resources\views/resumen-evaluaciones-institucionales2.blade.php ENDPATH**/ ?>