<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hojas Resumen del Diagnóstico</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gray-100">
    <!-- Header Navigation -->
    <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">
                <img src="<?php echo e(asset('images/logo.gif')); ?>" alt="DIAGNOSTIKA Logo" class="h-16" />
            </div>
            <div class="flex items-center space-x-4">
                <h1 class="text-white font-bold text-lg">Hojas Resumen del Diagnóstico</h1>
                <a href="<?php echo e(url()->previous()); ?>" class="text-white border border-white px-4 py-2 rounded hover:bg-blue-800 transition">
                    ← Atrás
                </a>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-6 py-12">
        <div class="mb-8">
            <h2 class="text-3xl font-bold text-gray-900"><?php echo e($user->name); ?></h2>
            <p class="text-gray-600 mt-2"><?php echo e($user->email); ?></p>
        </div>

        <!-- Grid de Hojas Resumen -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Compromiso 1 -->
            <div class="bg-white rounded-lg shadow-lg p-8 hover:shadow-xl transition transform hover:scale-105">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-file-alt text-2xl text-blue-600"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Compromiso 1</h3>
                <p class="text-gray-600 text-sm mb-6">Gestión de las Condiciones Operativas</p>
                <a href="<?php echo e(route('resumen-compromiso1')); ?>?userId=<?php echo e($user->id); ?>" target="_blank" class="inline-flex items-center px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition">
                    <i class="fas fa-eye mr-2"></i>
                    Ver Hoja Resumen
                </a>
            </div>

            <!-- Compromiso 2 -->
            <div class="bg-white rounded-lg shadow-lg p-8 hover:shadow-xl transition transform hover:scale-105">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-file-alt text-2xl text-green-600"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Compromiso 2</h3>
                <p class="text-gray-600 text-sm mb-6">Práctica Pedagógica</p>
                <a href="<?php echo e(route('resumen-compromiso2')); ?>?userId=<?php echo e($user->id); ?>" target="_blank" class="inline-flex items-center px-6 py-2 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition">
                    <i class="fas fa-eye mr-2"></i>
                    Ver Hoja Resumen
                </a>
            </div>

            <!-- Compromiso 3 -->
            <div class="bg-white rounded-lg shadow-lg p-8 hover:shadow-xl transition transform hover:scale-105">
                <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-file-alt text-2xl text-purple-600"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Compromiso 3</h3>
                <p class="text-gray-600 text-sm mb-6">Convivencia y Buen Trato</p>
                <a href="<?php echo e(route('resumen-compromiso3')); ?>?userId=<?php echo e($user->id); ?>" target="_blank" class="inline-flex items-center px-6 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition">
                    <i class="fas fa-eye mr-2"></i>
                    Ver Hoja Resumen
                </a>
            </div>

            <!-- Evaluaciones Institucionales 1 -->
            <div class="bg-white rounded-lg shadow-lg p-8 hover:shadow-xl transition transform hover:scale-105">
                <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-chart-bar text-2xl text-orange-600"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Evaluaciones 1</h3>
                <p class="text-gray-600 text-sm mb-6">Evaluaciones Institucionales</p>
                <a href="<?php echo e(route('resumen-evaluaciones-institucionales')); ?>?userId=<?php echo e($user->id); ?>" target="_blank" class="inline-flex items-center px-6 py-2 bg-orange-600 text-white font-medium rounded-lg hover:bg-orange-700 transition">
                    <i class="fas fa-eye mr-2"></i>
                    Ver Hoja Resumen
                </a>
            </div>

            <!-- Evaluaciones Institucionales 2 -->
            <div class="bg-white rounded-lg shadow-lg p-8 hover:shadow-xl transition transform hover:scale-105">
                <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-chart-bar text-2xl text-red-600"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Evaluaciones 2</h3>
                <p class="text-gray-600 text-sm mb-6">Resultados Académicos</p>
                <a href="<?php echo e(route('resumen-evaluaciones-institucionales2')); ?>?userId=<?php echo e($user->id); ?>" target="_blank" class="inline-flex items-center px-6 py-2 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition">
                    <i class="fas fa-eye mr-2"></i>
                    Ver Hoja Resumen
                </a>
            </div>
        </div>

        <!-- Información -->
        <div class="mt-12 bg-blue-50 border-l-4 border-blue-600 p-6 rounded">
            <h3 class="font-bold text-blue-900 mb-2">Información</h3>
            <p class="text-blue-800">Estas son las 5 hojas de resumen del diagnóstico completado por el usuario. Cada hoja contiene los datos y respuestas del diagnóstico que necesitas para generar los documentos <strong>(PEI, PAT, PCI, RI, OTROS)</strong>.</p>
        </div>
    </main>
</body>
</html>
<?php /**PATH D:\proyecto-web\diagnostika\src\resources\views/hojas-resumen.blade.php ENDPATH**/ ?>