<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reportes - 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-50">
    <!-- 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="/dashboard" class="text-white hover:bg-blue-900 px-4 py-2 rounded transition">
                    ← Volver al Dashboard
                </a>
            </nav>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-6 py-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-2">📊 Reportes de Diagnóstico</h1>
        <p class="text-gray-600 text-lg mb-8">Historial de diagnósticos y gráficos por fecha</p>

        <!-- Sección de Reportes PDF -->
        <?php if(!empty($reportesPDF) && $reportesPDF->count() > 0): ?>
            <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-8">
                <div class="bg-gradient-to-r from-green-600 to-green-900 text-white px-6 py-4">
                    <h2 class="text-xl font-bold">📄 Reportes Generados</h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-100 border-b border-gray-200">
                            <tr>
                                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Reporte</th>
                                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Tipo</th>
                                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Fecha Generación</th>
                                <th class="px-6 py-3 text-center text-sm font-semibold text-gray-900">Estado</th>
                                <th class="px-6 py-3 text-center text-sm font-semibold text-gray-900">Descargas</th>
                                <th class="px-6 py-3 text-center text-sm font-semibold text-gray-900">Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <?php $__currentLoopData = $reportesPDF; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $reporte): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr class="hover:bg-gray-50 transition">
                                    <td class="px-6 py-4">
                                        <div class="text-sm font-semibold text-gray-900"><?php echo e($reporte->nombre); ?></div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            <?php switch($reporte->tipo):
                                                case ('compromiso1'): ?>
                                                    Liderazgo
                                                    <?php break; ?>
                                                <?php case ('compromiso2'): ?>
                                                    Gestión Académica
                                                    <?php break; ?>
                                                <?php case ('compromiso3'): ?>
                                                    Gestión de Recursos
                                                    <?php break; ?>
                                                <?php case ('evaluaciones'): ?>
                                                    Evaluaciones Institucionales
                                                    <?php break; ?>
                                                <?php case ('evaluaciones2'): ?>
                                                    Resultados Académicos
                                                    <?php break; ?>
                                                <?php default: ?>
                                                    <?php echo e($reporte->tipo); ?>

                                            <?php endswitch; ?>
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <?php if($reporte->fecha_generacion): ?>
                                            <div class="text-sm font-semibold text-gray-900"><?php echo e($reporte->fecha_generacion->format('d/m/Y')); ?></div>
                                            <div class="text-xs text-gray-500"><?php echo e($reporte->fecha_generacion->format('H:i')); ?></div>
                                        <?php else: ?>
                                            <div class="text-sm text-gray-500">No disponible</div>
                                        <?php endif; ?>
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            ✓ <?php echo e(ucfirst($reporte->estado)); ?>

                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-center text-sm text-gray-900">
                                        <?php echo e($reporte->descargas); ?>

                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <div class="flex gap-2 justify-center">
                                            <?php
                                                $rutaResumen = match($reporte->tipo) {
                                                    'compromiso1' => route('ver-resumen-compromiso1'),
                                                    'compromiso2' => route('ver-resumen-compromiso2'),
                                                    'compromiso3' => route('ver-resumen-compromiso3'),
                                                    'evaluaciones' => route('ver-resumen-evaluaciones1'),
                                                    'evaluaciones2' => route('ver-resumen-evaluaciones2'),
                                                    default => '#'
                                                };
                                            ?>
                                            <a href="<?php echo e($rutaResumen); ?>" 
                                               target="_blank"
                                               onClick="window.open(this.href, 'resumen', 'width=1200,height=800'); return false;"
                                               class="inline-flex items-center px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold rounded transition">
                                                👁️ Ver Resumen
                                            </a>
                                            
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                    </table>
                </div>
            </div>
        <?php else: ?>
            <!-- Mensaje cuando no hay reportes PDF -->
            <div class="bg-blue-50 border-l-4 border-blue-600 rounded-lg p-8 mb-8">
                <div class="flex items-center gap-4">
                    <div class="text-4xl">📋</div>
                    <div>
                        <p class="font-bold text-lg text-blue-900">No hay reportes generados aún</p>
                        <p class="text-blue-700 text-sm mt-1">Completa el diagnóstico y realiza el pago para generar tus reportes PDF automáticamente.</p>
                    </div>
                </div>
            </div>
        <?php endif; ?>

        <?php if(count($pagosCompletados) > 0): ?>
            <!-- Tabla de Diagnósticos -->
            <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-8">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gradient-to-r from-blue-600 to-blue-900 text-white">
                            <tr>
                                <th class="px-6 py-4 text-left text-sm font-semibold">Institución Educativa</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold">Fecha de Diagnóstico</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold">Método de Pago</th>
                                <th class="px-6 py-4 text-center text-sm font-semibold">Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <?php $__currentLoopData = $pagosCompletados; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pago): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr class="hover:bg-blue-50 transition">
                                    <td class="px-6 py-4">
                                        <div class="text-sm font-semibold text-gray-900"><?php echo e($pago->nombre_ie); ?></div>
                                        <div class="text-xs text-gray-500 mt-1">Código: <?php echo e($pago->codigo_local); ?></div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm font-semibold text-gray-900"><?php echo e($pago->created_at->format('d/m/Y')); ?></div>
                                        <div class="text-xs text-gray-500"><?php echo e($pago->created_at->format('H:i A')); ?></div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                            <?php switch($pago->metodo_pago):
                                                case ('tarjeta'): ?>
                                                    💳 Tarjeta
                                                    <?php break; ?>
                                                <?php case ('yape'): ?>
                                                    📱 Yape
                                                    <?php break; ?>
                                                <?php case ('plin'): ?>
                                                    📲 Plin
                                                    <?php break; ?>
                                                <?php default: ?>
                                                    <?php echo e(ucfirst($pago->metodo_pago)); ?>

                                            <?php endswitch; ?>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <span class="inline-flex items-center justify-center px-4 py-2 bg-green-600 text-white text-sm font-semibold rounded-lg shadow-sm">
                                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                            </svg>
                                            Estado Procesado
                                        </span>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                    </table>
                </div>
            </div>
        <?php endif; ?>

        <!-- Botón volver al dashboard -->
        <div class="mt-12 text-center">
            <a href="/dashboard" class="inline-flex items-center px-6 py-3 border-2 border-gray-300 hover:border-blue-600 text-gray-700 hover:text-blue-600 font-semibold rounded-lg transition">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                </svg>
                Volver al Dashboard
            </a>
        </div>
    </main>
</body>
</html>
<?php /**PATH D:\proyecto-web\diagnostika\src\resources\views/reportes.blade.php ENDPATH**/ ?>