<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Login - Ghana Anaesthesiologists Society</title>
    <link href="<?= $baseUrl ?>/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/sb-admin-2.min.css" rel="stylesheet">
    <link href="<?= $baseUrl ?>/css/glass.css" rel="stylesheet">
</head>
<body class="auth-wrapper">
    <div class="auth-card">
        <div class="auth-logo">
            <?php if ($companyLogo): ?>
                <img src="<?= $baseUrl . '/' . ltrim($companyLogo, '/') ?>" alt="<?= htmlspecialchars($companyName) ?>" style="max-height: 80px; margin-bottom: 0.5rem;">
            <?php else: ?>
                <i class="fas fa-stethoscope"></i>
            <?php endif; ?>
            <h2>Welcome Back</h2>
            <p><?= htmlspecialchars($companyName) ?></p>
        </div>

        <?php if (isset($_SESSION['success'])): ?>
            <div class="alert alert-success glass-alert"><?= $_SESSION['success']; unset($_SESSION['success']); ?></div>
        <?php endif; ?>
        <?php if (isset($_SESSION['error'])): ?>
            <div class="alert alert-danger glass-alert"><?= $_SESSION['error']; unset($_SESSION['error']); ?></div>
        <?php endif; ?>

        <form method="POST" action="<?= $baseUrl ?>/login">
            <input type="hidden" name="redirect" value="<?= htmlspecialchars($_GET['redirect'] ?? '') ?>">
            <div class="form-group">
                <label style="color: rgba(255,255,255,0.7);">Email Address</label>
                <input type="email" name="email" class="form-control glass-input" placeholder="Enter your email" required>
            </div>
            <div class="form-group position-relative">
                <label style="color: rgba(255,255,255,0.7);">Password</label>
                <input type="password" name="password" id="loginPassword" class="form-control glass-input" placeholder="Enter your password" required>
                <span class="show-password-toggle" onclick="toggleLoginPassword()" style="position:absolute; right:12px; top:38px; cursor:pointer; color:rgba(255,255,255,0.5);" title="Show/Hide password"><i class="fas fa-eye"></i></span>
            </div>
            <div class="form-group d-flex justify-content-between align-items-center">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="remember">
                    <label class="custom-control-label" for="remember" style="color: rgba(255,255,255,0.7);">Remember me</label>
                </div>
                <a href="<?= $baseUrl ?>/forgot-password" style="font-size: 0.85rem;">Forgot Password?</a>
            </div>
            <button type="submit" class="glass-btn glass-btn-primary btn-block btn-lg">Sign In</button>
        </form>

        <hr style="border-color: rgba(255,255,255,0.1);">
        <div class="text-center">
            <p style="color: rgba(255,255,255,0.7);">Don't have an account? <a href="<?= $baseUrl ?>/register">Register here</a></p>
            <a href="<?= $baseUrl ?>/" style="font-size: 0.85rem;"><i class="fas fa-arrow-left mr-1"></i>Back to Home</a>
        </div>
    </div>
    <script src="<?= $baseUrl ?>/vendor/jquery/jquery.min.js"></script>
    <script src="<?= $baseUrl ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script>
    function toggleLoginPassword() {
        const input = document.getElementById('loginPassword');
        const icon = document.querySelector('.show-password-toggle i');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }
    </script>
</body>
</html>
