<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= APP_NAME ?> - Login</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="<?= APP_URL ?>/public/assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= APP_URL ?>/public/assets/favicon/favicon-16x16.png">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --nis-primary: #006747;
            --nis-secondary: #00843D;
            --nis-accent: #FFD100;
            --nis-dark: #004225;
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        /* Background Image - NO OVERLAY, just the image */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('<?= APP_URL ?>/public/assets/images/tech_building.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: -2;
        }
        
        /* Smaller, more compact login card - with subtle shadow to make it "float" */
        .login-card {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(8px);
            border-radius: 15px;
            padding: 25px 30px;
            width: 100%;
            max-width: 380px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
            animation: slideUp 0.5s ease;
            border: 1px solid rgba(255,255,255,0.3);
            margin: 15px;
            position: relative;
            z-index: 10;
        }
        
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 20px;
        }
        
        /* Smaller logo */
        .nis-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 10px;
        }
        
        .nis-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .login-header h2 {
            color: var(--nis-primary);
            font-size: 18px;
            font-weight: 600;
            margin: 5px 0;
            line-height: 1.3;
        }
        
        /* Username field styling */
        .input-group {
            position: relative;
            margin-bottom: 15px;
        }
        
        .input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--nis-primary);
            z-index: 10;
            font-size: 16px;
        }
        
        .input-group .form-control {
            height: 42px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding-left: 45px;
            font-size: 14px;
            background: white;
            width: 100%;
        }
        
        /* Password field with eye icon inside */
        .password-field {
            position: relative;
            margin-bottom: 15px;
        }
        
        .password-field .form-control {
            height: 42px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding-left: 45px;
            padding-right: 45px;
            font-size: 14px;
            background: white;
            width: 100%;
        }
        
        .password-field .form-control:focus {
            border-color: var(--nis-primary);
            box-shadow: 0 0 0 0.2rem rgba(0,103,71,0.25);
        }
        
        .password-field i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 16px;
        }
        
        .password-field .lock-icon {
            left: 15px;
            color: var(--nis-primary);
            z-index: 10;
        }
        
        .password-field .toggle-password {
            right: 15px;
            color: #6c757d;
            cursor: pointer;
            z-index: 20;
            transition: color 0.3s;
        }
        
        .password-field .toggle-password:hover {
            color: var(--nis-primary);
        }
        
        .btn-login {
            background: linear-gradient(135deg, var(--nis-primary), var(--nis-dark));
            color: white;
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s;
            cursor: pointer;
            margin-top: 5px;
        }
        
        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,103,71,0.3);
        }
        
        .footer {
            text-align: center;
            margin-top: 15px;
            color: #495057;
            font-size: 11px;
        }
        
        .footer img {
            height: 16px;
            margin: 0 3px;
            opacity: 0.7;
        }
        
        .alert {
            border-radius: 8px;
            border: none;
            padding: 10px 12px;
            margin-bottom: 15px;
            font-size: 13px;
        }
        
        .alert i {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="login-card">
        <div class="login-header">
            <div class="nis-logo">
                <img src="<?= APP_URL ?>/public/assets/images/nis-logo.png" 
                     alt="NIS Logo"
                     onerror="this.onerror=null; this.src='https://via.placeholder.com/80x80?text=NIS';">
            </div>
            <h2>MIGRANT e-REGISTRATION PORTAL</h2>
        </div>
        
        <?php if (isset($error)): ?>
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i>
                <?= $error ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert" style="font-size: 12px;"></button>
            </div>
        <?php endif; ?>
        
        <form method="POST" action="<?= APP_URL ?>/login">
            <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
            
            <!-- Username field -->
            <div class="input-group">
                <i class="fas fa-user"></i>
                <input type="text" class="form-control" name="username" placeholder="Username" required autofocus>
            </div>
            
            <!-- Password field with eye icon inside -->
            <div class="password-field">
                <i class="fas fa-lock lock-icon"></i>
                <input type="password" class="form-control" id="password-field" name="password" placeholder="Password" required>
                <i class="far fa-eye toggle-password" id="togglePasswordIcon" onclick="togglePasswordVisibility()"></i>
            </div>
            
            <button type="submit" name="login" class="btn-login">
                <i class="fas fa-sign-in-alt me-2"></i> Login
            </button>
        </form>
        
        <div class="footer">
            <p>&copy; <?= date('Y') ?> Nigeria Immigration Service. All rights reserved.</p>
            <p class="small">
                <img src="<?= APP_URL ?>/public/assets/images/nis-logo.png" 
                     alt="NIS"
                     onerror="this.style.display='none'">
                For authorized personnel only
            </p>
        </div>
    </div>
    
    <script>
        function togglePasswordVisibility() {
            const passwordField = document.getElementById('password-field');
            const toggleIcon = document.getElementById('togglePasswordIcon');
            
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                toggleIcon.classList.remove('fa-eye');
                toggleIcon.classList.add('fa-eye-slash');
            } else {
                passwordField.type = 'password';
                toggleIcon.classList.remove('fa-eye-slash');
                toggleIcon.classList.add('fa-eye');
            }
        }
        
        // Also allow Enter key to submit form
        document.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const form = document.querySelector('form');
                if (form) {
                    form.submit();
                }
            }
        });
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>