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

        <title>Resumen 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 -->
        @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>
        <!-- Chart.js Data Labels Plugin -->
        <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);
            }

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

            .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-institucionales" 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</h1>
                <p class="text-blue-100">Resultados de evaluación por nivel y asignatura</p>
            </div>

            @if($evaluaciones && count($evaluaciones) > 0)
                <!-- Gráficos por Nivel -->
                <!-- Gráfico Inicial -->
                @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>
                        @foreach($evaluaciones['inicial'] as $idx => $eval)
                            <div class="mb-6">
                                <h4 class="text-lg font-semibold text-gray-700 mb-4">Año {{ $eval->ano }}</h4>
                                <div class="chart-container">
                                    <canvas id="inicialChart{{ $idx }}"></canvas>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                <!-- Gráfico Primaria -->
                @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>
                        @foreach($evaluaciones['primaria'] as $idx => $eval)
                            <div class="mb-6">
                                <h4 class="text-lg font-semibold text-gray-700 mb-4">Año {{ $eval->ano }}</h4>
                                <div class="chart-container">
                                    <canvas id="primariaChart{{ $idx }}"></canvas>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                <!-- Gráfico Secundaria -->
                @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>
                        @foreach($evaluaciones['secundaria'] as $idx => $eval)
                            <div class="mb-6">
                                <h4 class="text-lg font-semibold text-gray-700 mb-4">Año {{ $eval->ano }}</h4>
                                <div class="chart-container">
                                    <canvas id="secundariaChart{{ $idx }}"></canvas>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            @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 para mostrar.</p>
                    <a href="/evaluaciones-institucionales" class="inline-block bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
                        Ir a Evaluaciones
                    </a>
                </div>
            @endif

            <!-- Buttons -->
            <div class="button-group">
                <button class="btn btn-secondary" onclick="window.history.back()">← Atrás</button>
                <a href="/evaluaciones-institucionales2" 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>
            // Registrar el plugin de etiquetas de datos
            Chart.register(ChartDataLabels);

            @if($evaluaciones && count($evaluaciones) > 0)
                // Colores consistentes según la leyenda proporcionada
                const chartColors = {
                    satisfactorio: 'rgba(34, 197, 94, 0.8)',      // Verde
                    enProceso: 'rgba(249, 115, 22, 0.8)',         // Naranja
                    enInicio: 'rgba(253, 224, 71, 0.8)',          // Amarillo
                    previoAlInicio: 'rgba(239, 68, 68, 0.8)',     // Rojo
                };

                // Función para crear gráfico de nivel
                function crearGraficoNivel(canvasId, nivel, satisComun, procesoComun, inicioComun, satisMatem, procesoMatem, inicioMatem) {
                    const ctx = document.getElementById(canvasId);
                    if (!ctx) return;

                    new Chart(ctx.getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: ['Comunicación', 'Matemática'],
                            datasets: [
                                {
                                    label: 'Satisfactorio',
                                    data: [satisComun, satisMatem],
                                    backgroundColor: chartColors.satisfactorio,
                                    borderColor: 'rgba(34, 197, 94, 1)',
                                    borderWidth: 2,
                                },
                                {
                                    label: 'En Proceso',
                                    data: [procesoComun, procesoMatem],
                                    backgroundColor: chartColors.enProceso,
                                    borderColor: 'rgba(249, 115, 22, 1)',
                                    borderWidth: 2,
                                },
                                {
                                    label: 'En Inicio',
                                    data: [inicioComun, inicioMatem],
                                    backgroundColor: chartColors.enInicio,
                                    borderColor: 'rgba(253, 224, 71, 1)',
                                    borderWidth: 2,
                                },
                                {
                                    label: 'Previo al Inicio',
                                    data: [0, 0],
                                    backgroundColor: chartColors.previoAlInicio,
                                    borderColor: 'rgba(239, 68, 68, 1)',
                                    borderWidth: 2,
                                },
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            indexAxis: 'y',
                            plugins: {
                                legend: {
                                    position: 'top',
                                    labels: {
                                        padding: 15,
                                        font: {
                                            size: 13,
                                            weight: 'bold'
                                        }
                                    }
                                },
                                title: {
                                    display: false
                                },
                                datalabels: {
                                    anchor: 'center',
                                    align: 'center',
                                    color: '#000',
                                    font: {
                                        weight: 'bold',
                                        size: 12
                                    },
                                    formatter: function(value) {
                                        return value > 0 ? value + '%' : '';
                                    }
                                }
                            },
                            scales: {
                                x: {
                                    beginAtZero: true,
                                    max: 100,
                                    ticks: {
                                        callback: function(value) {
                                            return value + '%';
                                        }
                                    }
                                }
                            }
                        }
                    });
                }

                // Gráfico Inicial
                @if($evaluaciones->has('inicial'))
                    @foreach($evaluaciones['inicial'] as $idx => $eval)
                        crearGraficoNivel(
                            'inicialChart{{ $idx }}',
                            'Inicial - Año {{ $eval->ano }}',
                            {{ $eval->satisfactorio_comunicacion }},
                            {{ $eval->en_proceso_comunicacion }},
                            {{ $eval->en_inicio_comunicacion }},
                            {{ $eval->satisfactorio_matematica }},
                            {{ $eval->en_proceso_matematica }},
                            {{ $eval->en_inicio_matematica }}
                        );
                    @endforeach
                @endif

                // Gráfico Primaria
                @if($evaluaciones->has('primaria'))
                    @foreach($evaluaciones['primaria'] as $idx => $eval)
                        crearGraficoNivel(
                            'primariaChart{{ $idx }}',
                            'Primaria - Año {{ $eval->ano }}',
                            {{ $eval->satisfactorio_comunicacion }},
                            {{ $eval->en_proceso_comunicacion }},
                            {{ $eval->en_inicio_comunicacion }},
                            {{ $eval->satisfactorio_matematica }},
                            {{ $eval->en_proceso_matematica }},
                            {{ $eval->en_inicio_matematica }}
                        );
                    @endforeach
                @endif

                // Gráfico Secundaria
                @if($evaluaciones->has('secundaria'))
                    @foreach($evaluaciones['secundaria'] as $idx => $eval)
                        crearGraficoNivel(
                            'secundariaChart{{ $idx }}',
                            'Secundaria - Año {{ $eval->ano }}',
                            {{ $eval->satisfactorio_comunicacion }},
                            {{ $eval->en_proceso_comunicacion }},
                            {{ $eval->en_inicio_comunicacion }},
                            {{ $eval->satisfactorio_matematica }},
                            {{ $eval->en_proceso_matematica }},
                            {{ $eval->en_inicio_matematica }}
                        );
                    @endforeach
                @endif
            @endif
        </script>
    </body>
</html>
