<!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>Reset Password - 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">
            <i class="fas fa-lock"></i>
            <h2>Reset Password</h2>
            <p><?= $otp ? 'Enter your new password (OTP verified)' : 'Enter your new password' ?></p>
        </div>
        <?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 ?>/reset-password">
            <?php if ($otp): ?>
            <input type="hidden" name="otp" value="<?= htmlspecialchars($otp) ?>">
            <input type="hidden" name="reset_id" value="<?= htmlspecialchars($resetId) ?>">
            <?php else: ?>
            <input type="hidden" name="token" value="<?= htmlspecialchars($token) ?>">
            <?php endif; ?>
            <div class="form-group position-relative">
                <label style="color: rgba(255,255,255,0.7);">New Password</label>
                <input type="password" name="password" id="resetPassword" class="form-control glass-input" placeholder="New password" required minlength="8">
                <span class="show-password-toggle" onclick="toggleResetPassword('resetPassword')" 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 position-relative">
                <label style="color: rgba(255,255,255,0.7);">Confirm Password</label>
                <input type="password" name="password_confirm" id="resetPasswordConfirm" class="form-control glass-input" placeholder="Confirm password" required minlength="8">
                <span class="show-password-toggle" onclick="toggleResetPassword('resetPasswordConfirm')" 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>
            <button type="submit" class="glass-btn glass-btn-primary btn-block btn-lg">Reset Password</button>
        </form>
    </div>
    <script src="<?= $baseUrl ?>/vendor/jquery/jquery.min.js"></script>
    <script src="<?= $baseUrl ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script>
    function toggleResetPassword(inputId) {
        const input = document.getElementById(inputId);
        const icon = input.nextElementSibling.querySelector('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>
