<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title><?php echo htmlspecialchars($settings['site_name']); ?> Admin</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 20px;
            position: relative;
            background-size: 400% 400%;
        }
        
        body.light-mode {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            color: #333;
        }
        
        #login-container {
            background-color: #fff;
            border-radius: 20px;
            padding: 50px 40px 40px;
            width: 100%;
            max-width: 420px;
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.1),
                0 1px 3px rgba(0, 0, 0, 0.05);
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        #login-container:hover {
            transform: translateY(-4px);
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.15),
                0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        h2 {
            text-align: center;
            margin-bottom: 24px;
            color: #333;
            font-weight: 700;
            font-size: 24px;
        }
        
        .input-container {
            position: relative;
            margin: 16px 0;
        }
        
        .input-container input {
            width: 100%;
            padding: 16px 16px 16px 48px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            font-size: 16px;
            background-color: #f8fafc;
            transition: all 0.3s ease;
            color: #333;
            font-weight: 500;
        }
        
        .input-container input:focus {
            border-color: #0069d9;
            background-color: #fff;
            box-shadow: 0 0 0 3px rgba(0, 105, 217, 0.15);
            outline: none;
        }
        
        .input-container input::placeholder {
            color: #94a3b8;
            font-weight: 400;
        }
        
        .input-container .input-icon {
            position: absolute;
            top: 50%;
            left: 16px;
            transform: translateY(-50%);
            color: #64748b;
            font-size: 18px;
            transition: color 0.3s ease;
        }
        
        .input-container input:focus + .input-icon {
            color: #0069d9;
        }
        
        .form-check-label {
            font-size: 14px;
            color: #64748b;
            font-weight: 500;
        }
        
        .form-check-input:checked {
            background-color: #0069d9;
            border-color: #0069d9;
        }
        
        .login-form-btn {
            width: 100%;
            background: linear-gradient(145deg, #0069d9, #0056b3);
            margin: 24px 0;
            color: #ffffff;
            padding: 16px 28px;
            font-size: 16px;
            font-weight: 600;
            border: none;
            border-radius: 12px;
            box-shadow: 
                0 8px 24px rgba(0, 105, 217, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .login-form-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }
        
        .login-form-btn:hover::before {
            left: 100%;
        }
        
        .login-form-btn:hover {
            background: linear-gradient(145deg, #0056b3, #004494);
            transform: translateY(-2px);
            box-shadow: 
                0 12px 32px rgba(0, 105, 217, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
        
        .text a {
            color: #0069d9;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .text a:hover {
            color: #004494;
            text-decoration: underline;
        }
        
        .ic-account {
            width: 80px;
            height: 80px;
            background: linear-gradient(145deg, #0069d9, #0056b3);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 8px 24px rgba(0, 105, 217, 0.3);
            border: 4px solid #fff;
            transition: all 0.3s ease;
        }
        
        .ic-account:hover {
            transform: translateX(-50%) scale(1.05);
            box-shadow: 0 12px 32px rgba(0, 105, 217, 0.4);
        }
        
        .ic-account i {
            font-size: 32px;
            color: #fff;
        }
        
        .toggle-container {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        
        .toggle-container button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 18px;
            color: inherit;
        }
        
        .password-container {
            position: relative;
        }
        
        .password-container input {
            width: 100%;
            padding-right: 48px;
        }
        
        .password-container .toggle-password {
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
            cursor: pointer;
            color: #64748b;
            transition: color 0.3s ease;
            font-size: 18px;
        }
        
        .password-container .toggle-password:hover {
            color: #0069d9;
        }
        
        .alert {
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 20px;
            font-weight: 500;
            border: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .alert-success {
            background-color: #ecfdf5;
            color: #047857;
            border-left: 4px solid #10b981;
        }
        
        .alert-danger {
            background-color: #fef2f2;
            color: #b91c1c;
            border-left: 4px solid #ef4444;
        }
        
        .form-check {
            margin-top: 16px;
            display: flex;
            align-items: center;
        }
        
        .form-check-input {
            width: 18px;
            height: 18px;
            margin-right: 8px;
            cursor: pointer;
        }
        
        .divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
            margin: 24px 0;
            border: none;
        }
        
        .google-signin-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .g_id_signin {
            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
            transition: all 0.3s ease;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .g_id_signin:hover {
            transform: translateY(-2px);
            filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.15));
        }
        
        /* Enhanced Google Sign-in styling */
        .g_id_signin div {
            border-radius: 8px !important;
        }
        
        .g_id_signin div span {
            font-family: 'Inter', sans-serif !important;
            font-weight: 500 !important;
        }
        
        /* Animation for page load */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        #login-container {
            animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Responsive Design */
        @media (max-width: 480px) {
            #login-container {
                padding: 40px 24px 30px;
                margin: 16px;
                border-radius: 16px;
            }
            
            .ic-account {
                width: 70px;
                height: 70px;
                top: -35px;
            }
            
            .ic-account i {
                font-size: 28px;
            }
            
            .input-container input {
                padding: 14px 14px 14px 42px;
                font-size: 15px;
            }
            
            .login-form-btn {
                padding: 14px 24px;
                font-size: 15px;
            }
        }
    </style>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <script>
        function handleCredentialResponse(response) {
            const responsePayload = decodeJwtResponse(response.credential);
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '<?= $rentaladmin ?>';
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'google_token';
            input.value = response.credential;
            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
        }

        function decodeJwtResponse(token) {
            const base64Url = token.split('.')[1];
            const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
            const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
            }).join(''));
            return JSON.parse(jsonPayload);
        }
    </script>
</head>
<body class="light-mode">
    <div id="login-container">
        <div class="ic-account">
            <i class="fas fa-user"></i>
        </div>
        
        <?php if ($success): ?>
            <div class="alert alert-success"><?php echo $successText; ?></div>
        <?php endif; ?>
        
        <?php if ($error): ?>
            <div class="alert alert-danger"><?php echo $errorText; ?></div>
        <?php endif; ?>
        
       
        
        <form name="login-form" action="#" method="post">
            <div class="input-container">
                <input class="login-form-input" type="email" name="email" placeholder="Email" required>
                <i class="fas fa-envelope input-icon"></i>
            </div>
            
            <div class="input-container password-container">
                <input class="login-form-input" type="password" name="password" placeholder="Password" required>
                <i class="fas fa-lock input-icon"></i>
                <i class="fas fa-eye toggle-password"></i>
            </div>
            
            <div class="input-container">
                <input class="login-form-input" type="number" name="two_factor_code" placeholder="Enter 2FA Code (If Setup)">
                <i class="fas fa-key input-icon"></i>
            </div>
            
            <div class="form-check">
                <input type="checkbox" class="form-check-input" name="remember" id="remember-me">
                <label class="form-check-label" for="remember-me">Remember Me</label>
            </div>
            
            <button class="login-form-btn" type="submit" name="submit">
                <span>Login</span>
            </button>
        </form>
        
        
        
        <div class="d-flex justify-content-center">
            <div id="g_id_onload"
                 data-client_id="<?php echo htmlspecialchars($google_client_id); ?>"
                 data-callback="handleCredentialResponse">
            </div>
            <div class="g_id_signin" data-type="standard"></div>
        </div>
    </div>
    
    <script>
        const togglePassword = document.querySelector('.toggle-password');
        const passwordInput = document.querySelector('input[name="password"]');
        
        togglePassword.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            togglePassword.classList.toggle('fa-eye');
            togglePassword.classList.toggle('fa-eye-slash');
        });
    </script>
</body>
</html>