<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ver Gráficos - DIAGNOSTIKA</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
</head>
<body class="bg-gray-100">
    <!-- Header -->
    <header class="bg-blue-950 px-6 py-4 shadow-lg">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            <div class="flex items-center">
                <h1 class="text-white text-2xl font-bold">DIAGNOSTIKA</h1>
            </div>
            <nav>
                <a href="/reportes" class="text-white hover:bg-blue-900 px-4 py-2 rounded transition">← Volver a Reportes</a>
            </nav>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-6 py-12">
        <!-- Información del diagnóstico -->
        <div class="bg-white rounded-lg shadow-lg p-8 mb-8">
            <h1 class="text-3xl font-bold text-blue-900 mb-6">📊 Gráficos del Diagnóstico</h1>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div>
                    <p class="text-gray-600 text-sm font-medium">Institución</p>
                    <p class="text-lg font-bold text-gray-900 mt-1">{{ $pago->nombre_ie }}</p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm font-medium">Código Local</p>
                    <p class="text-lg font-bold text-gray-900 mt-1">{{ $pago->codigo_local }}</p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm font-medium">Fecha</p>
                    <p class="text-lg font-bold text-gray-900 mt-1">{{ $pago->created_at->format('d/m/Y') }}</p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm font-medium">Método de Pago</p>
                    <p class="text-lg font-bold text-gray-900 mt-1">
                        @switch($pago->metodo_pago)
                            @case('tarjeta')
                                💳 Tarjeta
                                @break
                            @case('yape')
                                📱 Yape
                                @break
                            @case('plin')
                                📲 Plin
                                @break
                        @endswitch
                    </p>
                </div>
            </div>
        </div>

        <!-- Gráficos -->
        <div class="grid grid-cols-1 gap-8">
            <!-- Compromiso 1 -->
            @if($graficoCompromiso1)
                <div class="bg-white rounded-lg shadow-lg p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">📋 Sección 1: Gestión Estratégica</h2>
                    <p class="text-gray-600 mb-6">Resultados de evaluación por pregunta</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
                        <div class="bg-blue-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Puntuación Total</p>
                            <p class="text-3xl font-bold text-blue-600">{{ $graficoCompromiso1['total'] }}</p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Promedio</p>
                            <p class="text-3xl font-bold text-green-600">{{ $graficoCompromiso1['promedio'] }}</p>
                        </div>
                        <div class="bg-purple-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Máximo</p>
                            <p class="text-3xl font-bold text-purple-600">{{ $graficoCompromiso1['maximo'] }}</p>
                        </div>
                        <div class="bg-orange-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Mínimo</p>
                            <p class="text-3xl font-bold text-orange-600">{{ $graficoCompromiso1['minimo'] }}</p>
                        </div>
                    </div>

                    <div class="relative h-96">
                        <canvas id="graficoCompromiso1"></canvas>
                    </div>
                </div>
            @endif

            <!-- Compromiso 2 -->
            @if($graficoCompromiso2)
                <div class="bg-white rounded-lg shadow-lg p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">📋 Sección 2: Gestión Académica</h2>
                    <p class="text-gray-600 mb-6">Resultados de evaluación por pregunta</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
                        <div class="bg-blue-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Puntuación Total</p>
                            <p class="text-3xl font-bold text-blue-600">{{ $graficoCompromiso2['total'] }}</p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Promedio</p>
                            <p class="text-3xl font-bold text-green-600">{{ $graficoCompromiso2['promedio'] }}</p>
                        </div>
                        <div class="bg-purple-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Máximo</p>
                            <p class="text-3xl font-bold text-purple-600">{{ $graficoCompromiso2['maximo'] }}</p>
                        </div>
                        <div class="bg-orange-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Mínimo</p>
                            <p class="text-3xl font-bold text-orange-600">{{ $graficoCompromiso2['minimo'] }}</p>
                        </div>
                    </div>

                    <div class="relative h-96">
                        <canvas id="graficoCompromiso2"></canvas>
                    </div>
                </div>
            @endif

            <!-- Compromiso 3 -->
            @if($graficoCompromiso3)
                <div class="bg-white rounded-lg shadow-lg p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">📋 Sección 3: Gestión de Recursos</h2>
                    <p class="text-gray-600 mb-6">Resultados de evaluación por pregunta</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
                        <div class="bg-blue-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Puntuación Total</p>
                            <p class="text-3xl font-bold text-blue-600">{{ $graficoCompromiso3['total'] }}</p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Promedio</p>
                            <p class="text-3xl font-bold text-green-600">{{ $graficoCompromiso3['promedio'] }}</p>
                        </div>
                        <div class="bg-purple-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Máximo</p>
                            <p class="text-3xl font-bold text-purple-600">{{ $graficoCompromiso3['maximo'] }}</p>
                        </div>
                        <div class="bg-orange-50 rounded-lg p-4">
                            <p class="text-gray-600 text-sm">Mínimo</p>
                            <p class="text-3xl font-bold text-orange-600">{{ $graficoCompromiso3['minimo'] }}</p>
                        </div>
                    </div>

                    <div class="relative h-96">
                        <canvas id="graficoCompromiso3"></canvas>
                    </div>
                </div>
            @endif
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-6 mt-12">
        <div class="max-w-7xl mx-auto px-6 text-center">
            <p>&copy; {{ date('Y') }} DIAGNOSTIKA. Herramienta de Evaluación Educativa</p>
        </div>
    </footer>

    <script>
        // Gráfico Compromiso 1
        @if($graficoCompromiso1)
            const ctxC1 = document.getElementById('graficoCompromiso1').getContext('2d');
            new Chart(ctxC1, {
                type: 'bar',
                data: {
                    labels: @json($graficoCompromiso1['labels']),
                    datasets: [{
                        label: 'Puntuación',
                        data: @json($graficoCompromiso1['data']),
                        backgroundColor: 'rgba(59, 130, 246, 0.8)',
                        borderColor: 'rgba(59, 130, 246, 1)',
                        borderWidth: 2,
                        borderRadius: 5,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: true, position: 'top' }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 5,
                            ticks: { stepSize: 1 }
                        }
                    }
                }
            });
        @endif

        // Gráfico Compromiso 2
        @if($graficoCompromiso2)
            const ctxC2 = document.getElementById('graficoCompromiso2').getContext('2d');
            new Chart(ctxC2, {
                type: 'bar',
                data: {
                    labels: @json($graficoCompromiso2['labels']),
                    datasets: [{
                        label: 'Puntuación',
                        data: @json($graficoCompromiso2['data']),
                        backgroundColor: 'rgba(34, 197, 94, 0.8)',
                        borderColor: 'rgba(34, 197, 94, 1)',
                        borderWidth: 2,
                        borderRadius: 5,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: true, position: 'top' }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 5,
                            ticks: { stepSize: 1 }
                        }
                    }
                }
            });
        @endif

        // Gráfico Compromiso 3
        @if($graficoCompromiso3)
            const ctxC3 = document.getElementById('graficoCompromiso3').getContext('2d');
            new Chart(ctxC3, {
                type: 'bar',
                data: {
                    labels: @json($graficoCompromiso3['labels']),
                    datasets: [{
                        label: 'Puntuación',
                        data: @json($graficoCompromiso3['data']),
                        backgroundColor: 'rgba(168, 85, 247, 0.8)',
                        borderColor: 'rgba(168, 85, 247, 1)',
                        borderWidth: 2,
                        borderRadius: 5,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: true, position: 'top' }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 5,
                            ticks: { stepSize: 1 }
                        }
                    }
                }
            });
        @endif
    </script>
</body>
</html>