<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iniciar Sesion - VelMox</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'] },
                }
            }
        }
    </script>
    <style>
        @keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .animated-bg {
            background: linear-gradient(-45deg, #044A52, #033A40, #066A73, #02252A);
            background-size: 400% 400%;
            animation: gradient-shift 15s ease infinite;
        }
        .login-card {
            backdrop-filter: blur(20px);
        }
        .input-icon {
            transition: all 0.2s ease;
        }
        .input-group:focus-within .input-icon {
            color: #033A40;
        }
        .btn-primary {
            background: linear-gradient(135deg, #033A40, #066A73);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #02252A, #033A40);
            transform: translateY(-1px);
            box-shadow: 0 8px 30px rgba(3,58,64,0.3);
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center animated-bg p-4 font-sans antialiased relative overflow-hidden">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PHBhdGggZD0iTTM2IDE4YzEuNjU3IDAgMy0xLjM0MyAzLTNzLTEuMzQzLTMtMy0zLTMgMS4zNDMtMyAzIDEuMzQzIDMgMyAzem0tMTIgMGMxLjY1NyAwIDMtMS4zNDMgMy0zcy0xLjM0My0zLTMtMy0zIDEuMzQzLTMgMyAxLjM0MyAzIDMgM3oiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-30"></div>

    <div class="w-full max-w-md relative z-10">
        <div class="bg-teal-100/95 login-card rounded-3xl shadow-2xl p-8 md:p-10">
            <div class="text-center mb-8">
                <div class="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-[#033A40] to-teal-600 p-0.5 mb-4 shadow-lg shadow-teal-800">
                    <img src="<?= base_url('assets/img/logo.png') ?>" alt="VelMox" class="w-full h-full rounded-full object-cover border-2 border-white">
                </div>
                <h2 class="text-2xl font-bold text-gray-900 tracking-tight">VelMox</h2>
                <p class="text-gray-500 text-sm mt-1">Sistema de Control de Ventas</p>
            </div>

            <div class="relative mb-8">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-100"></div>
                </div>
                <div class="relative flex justify-center">
                    <span class="bg-teal-200 px-4 text-xs text-gray-600 uppercase tracking-widest font-medium">Acceso al sistema</span>
                </div>
            </div>

            <?php if (session()->getFlashdata('success')): ?>
                <div id="flash-success" data-message="<?= addslashes(session()->getFlashdata('success')) ?>"></div>
            <?php endif; ?>
            <?php if (session()->getFlashdata('error')): ?>
                <div id="flash-error" data-message="<?= addslashes(session()->getFlashdata('error')) ?>"></div>
            <?php endif; ?>

            <form method="post" action="<?= site_url('login') ?>">
                <?= csrf_field() ?>
                <div class="mb-5">
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">Correo electronico</label>
                    <div class="input-group flex items-center border border-gray-200 rounded-xl overflow-hidden focus-within:ring-2 focus-within:ring-teal-500 focus-within:border-teal-500 transition-all bg-teal-100 shadow-sm">
                        <span class="input-icon px-3.5 text-gray-400"><i class="bi bi-envelope"></i></span>
                        <input type="email" name="email" id="email" class="w-full py-3 pr-3 outline-none text-sm bg-transparent placeholder:text-gray-400" placeholder="ejemplo@correo.com" required autofocus>
                    </div>
                </div>
                <div class="mb-6">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">Contrasena</label>
                    <div class="input-group flex items-center border border-gray-200 rounded-xl overflow-hidden focus-within:ring-2 focus-within:ring-teal-500 focus-within:border-teal-500 transition-all bg-teal-100 shadow-sm">
                        <span class="input-icon px-3.5 text-gray-400"><i class="bi bi-lock"></i></span>
                        <input type="password" name="password" id="password" class="w-full py-3 pr-3 outline-none text-sm bg-transparent placeholder:text-gray-400" placeholder="Ingrese su contrasena" required>
                    </div>
                </div>
                <button type="submit" class="btn-primary w-full text-white font-semibold py-3 rounded-xl flex items-center justify-center gap-2 text-sm cursor-pointer border-0">
                    <i class="bi bi-box-arrow-in-right"></i> Ingresar
                </button>
            </form>
        </div>
        <p class="text-center text-white/40 text-xs mt-6">&copy; <?= date('Y') ?> VelMox. Todos los derechos reservados.</p>
    </div>

    <script>
    <?php if (session()->getFlashdata('success')): ?>
    Swal.fire({ icon: 'success', title: 'Éxito', text: document.getElementById('flash-success').dataset.message, timer: 3000, showConfirmButton: false, toast: true, position: 'top-end' });
    <?php endif; ?>
    <?php if (session()->getFlashdata('error')): ?>
    Swal.fire({ icon: 'error', title: 'Error', text: document.getElementById('flash-error').dataset.message, timer: 5000, showConfirmButton: false, toast: true, position: 'top-end' });
    <?php endif; ?>
    </script>
</body>
</html>
