<!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>Seleccionar Método de Pago - 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; ?>

        <style>
            /* Estilos responsivos para botones */
            .button-group {
                display: flex;
                gap: 1rem;
                justify-content: space-between;
                flex-wrap: wrap;
            }

            /* Estilos para botón de continuar */
            #btnContinuar {
                transition: all 0.3s ease;
            }

            #btnContinuar:not(:disabled) {
                background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
                box-shadow: 0 8px 16px rgba(22, 163, 74, 0.3);
                transform: translateY(0);
            }

            #btnContinuar:not(:disabled):hover {
                box-shadow: 0 12px 24px rgba(22, 163, 74, 0.4);
                transform: translateY(-2px);
            }

            #btnContinuar:not(:disabled):active {
                transform: translateY(0);
            }

            #btnContinuar:disabled {
                background-color: #a0aec0;
                cursor: not-allowed;
                opacity: 0.6;
            }

            @media (max-width: 640px) {
                .button-group {
                    flex-direction: column;
                    gap: 0.75rem;
                }

                .button-group button,
                .button-group a {
                    width: 100%;
                    padding-left: 1rem !important;
                    padding-right: 1rem !important;
                    font-size: 0.95rem !important;
                    white-space: normal;
                }
            }

            /* Header responsivo */
            @media (max-width: 640px) {
                header {
                    padding-left: 1rem !important;
                    padding-right: 1rem !important;
                }

                header .h-16 {
                    height: 2.5rem !important;
                }

                header .flex.items-center.space-x-3 {
                    gap: 0.5rem !important;
                }

                header .flex.items-center.space-x-3 span {
                    display: none;
                }
            }

            /* Main content */
            @media (max-width: 640px) {
                main {
                    padding-left: 1rem !important;
                    padding-right: 1rem !important;
                    margin-top: 0 !important;
                }

                main h1 {
                    font-size: 1.75rem !important;
                    margin-bottom: 1.5rem !important;
                }
            }
        </style>
    </head>
    <body class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 font-sans">
        <!-- 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">
                <!-- Logo -->
                <div class="flex items-center">
                    <img src="<?php echo e(asset('images/logo.gif')); ?>" alt="DIAGNOSTIKA Logo" class="h-16" />
                </div>
                
                <!-- Navigation Buttons -->
                <nav class="flex items-center space-x-3">
                    <span class="text-white font-semibold">Hola, <?php echo e(Auth::user()->name ?? 'Usuario'); ?></span>
                    <form method="POST" action="<?php echo e(route('logout')); ?>" style="display:inline;">
                        <?php echo csrf_field(); ?>
                        <button type="submit" class="text-white border border-white px-4 py-2 rounded hover:bg-red-600 hover:border-red-600 transition">
                            Cerrar Sesión
                        </button>
                    </form>
                </nav>
            </div>
        </header>

        <!-- Main Content -->
        <main class="max-w-6xl mx-auto px-6 py-12">
            <!-- Banner Informativo -->
            <div class="bg-blue-600 text-white rounded-lg p-6 mb-8 shadow-lg">
                <div class="flex items-center gap-4">
                    <div class="text-4xl">✅</div>
                    <div>
                        <p class="font-bold text-lg">Diagnóstico Completado</p>
                        <p class="text-blue-100">Tu evaluación ha sido registrada. Ahora selecciona tu método de pago se generá tu resumen de tu evaluación.</p>
                    </div>
                </div>
            </div>

            <!-- Title Section -->
            <div class="text-center mb-12">
                <h1 class="text-4xl font-bold text-gray-900 mb-4">💳 Selecciona tu Método de Pago</h1>
                <p class="text-xl text-gray-600 mb-4">Elige la opción que mejor se adapte a ti</p>
                
                <!-- Resumen de Pago -->
                <div class="bg-white rounded-lg shadow-md p-6 max-w-3xl mx-auto mb-8">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <p class="text-gray-600 text-sm font-medium">Institución</p>
                            <p class="text-lg font-bold text-gray-900"><?php echo e($pago->nombre_ie); ?></p>
                        </div>
                        <div>
                            <p class="text-gray-600 text-sm font-medium">Monto a Pagar</p>
                            <p class="text-3xl font-bold text-green-600">S/ <?php echo e(number_format($pago->monto, 2)); ?></p>
                        </div>
                        <div>
                            <p class="text-gray-600 text-sm font-medium">Email</p>
                            <p class="text-lg font-bold text-gray-900"><?php echo e($pago->email); ?></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Carrusel de Métodos de Pago -->
            <div class="mb-12">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    
                    <!-- Tarjeta de Crédito/Débito -->
                    

                    <!-- Transferencia Bancaria -->
                    <div class="metodo-pago-card cursor-pointer transition" data-metodo="transferencia" onclick="seleccionarMetodo('transferencia')">
                        <div class="bg-white rounded-xl shadow-lg hover:shadow-2xl transition transform hover:scale-105 h-full p-8 text-center">
                            <div class="text-6xl mb-4">🏦</div>
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Transferencia Bancaria</h3>
                            <p class="text-gray-600 text-sm mb-4">
                                Transferencia directa desde tu cuenta bancaria
                            </p>
                            <div class="bg-purple-100 text-purple-800 px-3 py-2 rounded-lg text-sm font-semibold">
                                Dentro de 24h 🕐
                            </div>
                        </div>
                    </div>

                    <!-- Yape -->
                    <div class="metodo-pago-card cursor-pointer transition" data-metodo="yape" onclick="seleccionarMetodo('yape')">
                        <div class="bg-white rounded-xl shadow-lg hover:shadow-2xl transition transform hover:scale-105 h-full p-8 text-center">
                            <img src="<?php echo e(asset('images/yape.png')); ?>" alt="Yape" style="width:64px;height:64px;object-fit:contain;margin:0 auto 1rem auto;" class="mb-4" />
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Yape o Plin</h3>
                            <p class="text-gray-600 text-sm mb-4">
                                Transferencia rápida usando la app Yape o Plin
                            </p>
                            <div class="bg-green-100 text-green-800 px-3 py-2 rounded-lg text-sm font-semibold">
                                Pago Inmediato ⚡
                            </div>
                        </div>
                    </div>

                    <!-- Plin -->
                    

                </div>
            </div>

            <!-- Información de Seguridad -->
            <div class="bg-green-50 border-l-4 border-green-600 rounded-lg p-8 mb-8">
                <div class="flex items-start gap-4">
                    <div class="text-4xl">🔒</div>
                    <div>
                        <h3 class="text-xl font-bold text-green-900 mb-2">Pago Seguro Garantizado</h3>
                        <p class="text-green-800 mb-3">
                            Todos nuestros pagos están protegidos con encriptación SSL de 256 bits. Tu información financiera está completamente segura.
                        </p>
                        <ul class="space-y-2 text-sm text-green-700">
                            <li>✓ Certificado de seguridad SSL válido</li>
                            <li>✓ Cumplimiento de normas PCI DSS</li>
                            <li>✓ Protección de datos personales</li>
                            <li>✓ Soporte 24/7 disponible</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Footer Buttons -->
            <div class="button-group">
                <a href="<?php echo e(route('info-institucion')); ?>" class="px-6 sm:px-8 py-3 border border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-100 transition text-center">
                    ← Atrás
                </a>
                <button 
                    id="btnContinuar"
                    onclick="continuarConPago()"
                    disabled
                    class="px-6 sm:px-12 py-4 bg-gray-400 text-white rounded-lg font-bold text-lg text-center shadow-lg"
                >
                    ✅ Ir a Confirmación de Pago
                </button>
            </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; <?php echo e(date('Y')); ?> DIAGNOSTIKA. Herramienta de Evaluación Educativa</p>
            </div>
        </footer>

        <!-- Form para enviar el método seleccionado -->
        <form id="formMetodoPago" method="POST" action="<?php echo e(route('pago.guardarMetodo', ['pago_id' => $pago->id])); ?>" style="display: none;">
            <?php echo csrf_field(); ?>
            <input type="hidden" id="metodoPagoInput" name="metodo_pago" value="">
        </form>

        <script>
            let metodoSeleccionado = null;

            function seleccionarMetodo(metodo) {
                // Remover selección anterior de todas las tarjetas
                document.querySelectorAll('.metodo-pago-card').forEach(card => {
                    const innerDiv = card.querySelector('div');
                    if (innerDiv) {
                        innerDiv.classList.remove('ring-4', 'ring-blue-500');
                        card.style.opacity = '1';
                    }
                });

                // Encontrar la tarjeta seleccionada
                const cardSeleccionada = document.querySelector(`[data-metodo="${metodo}"]`);
                if (cardSeleccionada) {
                    const innerDiv = cardSeleccionada.querySelector('div');
                    
                    // Agregar estilos de selección
                    if (innerDiv) {
                        innerDiv.classList.add('ring-4', 'ring-blue-500');
                    }

                    // Guardar la selección
                    metodoSeleccionado = metodo;

                    // Habilitar botón continuar
                    const btnContinuar = document.getElementById('btnContinuar');
                    if (btnContinuar) {
                        btnContinuar.disabled = false;
                        btnContinuar.classList.remove('disabled:opacity-50', 'disabled:cursor-not-allowed');
                    }

                    // Mostrar animación
                    cardSeleccionada.style.transform = 'scale(1.02)';
                    setTimeout(() => {
                        cardSeleccionada.style.transform = 'scale(1)';
                    }, 200);
                }
            }

            function continuarConPago() {
                if (!metodoSeleccionado) {
                    alert('Por favor selecciona un método de pago');
                    return;
                }

                // Guardar método seleccionado en el input hidden
                document.getElementById('metodoPagoInput').value = metodoSeleccionado;
                
                // Enviar el formulario
                document.getElementById('formMetodoPago').submit();
            }

            // Agregar estilos CSS dinámicos para las tarjetas
            function inicializarTarjetas() {
                document.querySelectorAll('.metodo-pago-card').forEach(card => {
                    card.style.cursor = 'pointer';
                    card.style.transition = 'all 0.3s ease';
                    card.addEventListener('mouseenter', function() {
                        if (this.querySelector('div').classList.contains('ring-4')) {
                            // Ya está seleccionada
                        } else {
                            this.style.opacity = '0.8';
                        }
                    });
                    card.addEventListener('mouseleave', function() {
                        if (!this.querySelector('div').classList.contains('ring-4')) {
                            this.style.opacity = '1';
                        }
                    });
                });
            }

            // Inicializar cuando el documento carga
            document.addEventListener('DOMContentLoaded', inicializarTarjetas);
        </script>
    </body>
</html>
<?php /**PATH D:\proyecto-web\diagnostika\src\resources\views/pago-seleccionar-metodo.blade.php ENDPATH**/ ?>