if ($validPassword === false){
            notify_alert('Invalid login details','danger','2000','Close');

//            toast_alert("error","Invalid login details");
        }else{

            if($user['acct_status'] === 'hold'){
                notify_alert('Account on Hold, Kindly contact support to activate your account','danger','3000','close');
            }else {

                $acct_otp = substr(number_format(time() * rand(), 0, '', ''), 0, 6);

                $sql = "UPDATE users SET acct_otp=:acct_otp WHERE acct_no=:acct_no";
                $stmt = $conn->prepare($sql);
                $stmt->execute([
                    'acct_otp' => $acct_otp,
                    'acct_no' => $acct_no
                ]);
                
                //IP LOGIN DETAILS
            
            $device = $_SERVER['HTTP_USER_AGENT'];
            $ipAddress = $_SERVER['REMOTE_ADDR'];
            $nowDate = date('Y-m-d H:i:s');
            $user_id = $user['id'];
          
            
            $stmt = $conn->prepare("INSERT INTO audit_logs (user_id,device,ipAddress,datenow) VALUES(:user_id,:device,:ipAddress,:datenow)");
            $stmt->execute([
                'user_id'=>$user_id,
                'device'=>$device,
                'ipAddress'=>$ipAddress,
                'datenow'=>$nowDate
                ]);

                if (true) {

                    $sql = "SELECT * FROM users WHERE acct_no=:acct_no";
                    $stmt = $conn->prepare($sql);
                    $stmt->execute([
                        'acct_no' => $acct_no
                    ]);
                    $resultCode = $stmt->fetch(PDO::FETCH_ASSOC);
                    $code = $resultCode['acct_otp'];

                    // $APP_NAME = $pageTitle;
                    // $email = $resultCode['acct_email'];
                    // $fullName = $resultCode['firstname'] . " " . $resultCode['lastname'];

                    // $message = $sendMail->otpRequestLogin($fullName, $code, $APP_NAME);
                    // $subject = "[OTP CODE] - $APP_NAME";
                    // $email_message->send_mail($email, $message, $subject);
                    
                    if (true) {
                        
                        $full_name = $user['firstname']. " ". $user['lastname'];
                        // $APP_URL = APP_URL;
                        $APP_NAME = WEB_TITLE;
                        $APP_URL = WEB_URL;
                        $user_email = $user['acct_email'];

                        $message = $sendMail->LoginMsg($full_name, $device, $ipAddress, $nowDate, $APP_NAME, $APP_URL, $BANK_PHONE);

                        // User Email
                        $subject = "Login Notification". "-". $APP_NAME;
                        $email_message->send_mail($user_email, $message, $subject);
                        // Admin Email
                        $subject = "User Login Notification". "-". $APP_NAME;
                        $email_message->send_mail(WEB_EMAIL, $message, $subject);
                    }
                    
                     if (true) {
                        $_SESSION['login'] = $user['acct_no'];
                        header("Location:./pin.php");
                        exit;
                    }
                }
            }

        }
    }


}
?>

<style>
body.login-page{background:linear-gradient(135deg,#eef6ff 0%,#f9fbfe 50%,#eaf2fb 100%);min-height:100vh}.castle-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:35px 16px}.castle-login-card{width:100%;max-width:470px;background:#fff;border:1px solid #e1e9f2;border-radius:20px;box-shadow:0 24px 65px rgba(20,41,75,.14);padding:38px}.castle-login-brand{text-align:center;margin-bottom:30px}.castle-login-brand img{max-width:150px;max-height:55px;object-fit:contain;margin:0 auto 15px}.castle-login-brand h1{font-family:Georgia,serif;font-size:34px;color:#172d50;margin:0 0 8px}.castle-login-brand p{color:#718097;margin:0}.castle-login-language{display:flex;justify-content:flex-end;margin-bottom:15px}.castle-login-form .field-group{margin-bottom:22px}.castle-login-form label{display:block;color:#233a5b;font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;margin-bottom:9px}.castle-input-wrap{position:relative}.castle-input-wrap .field-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8799b1;z-index:2}.castle-input-wrap input{height:52px;border:1px solid #c7d4e2!important;border-radius:8px!important;padding:0 48px 0 46px!important;width:100%;box-shadow:none!important;color:#213958}.castle-input-wrap input:focus{border-color:#4d9fe8!important;box-shadow:0 0 0 3px rgba(77,159,232,.12)!important}.castle-password-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.castle-password-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.castle-password-links a{font-size:12px;color:#54749a;text-decoration:none}.castle-password-links a:hover{color:#f15b63}.castle-eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#8395ad;padding:4px;cursor:pointer}.castle-login-btn{width:100%;height:52px;border:0;border-radius:8px;background:#1F1B44;color:#fff;font-weight:700;font-size:16px;box-shadow:0 10px 24px rgba(70,98,234,.2)}.castle-login-btn:hover{background:#15132f}.castle-login-note{text-align:center;margin-top:20px;font-size:12px;color:#8794a7}.castle-login-language #google_translate_element .goog-te-gadget-simple{border-radius:7px!important}.castle-login-language .translator-label{display:none}@media(max-width:480px){.castle-login-card{padding:28px 20px}.castle-password-head{align-items:flex-start;flex-direction:column}.castle-password-links{justify-content:flex-start}}
</style>
<div class="castle-login-wrap">
    <div class="castle-login-card">
        <div class="castle-login-language"><div id="google_translate_element"></div></div>
        <div class="castle-login-brand">
                        <h1>Sign In</h1>
            <p>Log in to your account to continue.</p>
        </div>
        <form class="castle-login-form" method="POST" autocomplete="on">
            <div class="field-group">
                <label for="username">Account ID</label>
                <div class="castle-input-wrap">
                    <svg class="field-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 21a8 8 0 0 0-16 0"></path><circle cx="12" cy="7" r="4"></circle></svg>
                    <input id="username" name="acct_no" type="text" inputmode="numeric" class="form-control" placeholder="Enter your account ID" required>
                </div>
            </div>
            <div class="field-group">
                <div class="castle-password-head">
                    <label for="password" style="margin:0">Password</label>
                    <div class="castle-password-links"><a href="./signup/">Create New Account</a><a href="./p/forgot-password.php">Forgot password?</a></div>
                </div>
                <div class="castle-input-wrap">
                    <svg class="field-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="11" width="18" height="10" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                    <input id="password" name="acct_password" type="password" class="form-control" placeholder="Enter your password" required>
                    <button type="button" class="castle-eye" id="toggle-password" aria-label="Show password"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12Z"></path><circle cx="12" cy="12" r="3"></circle></svg></button>
                </div>
            </div>
            <button type="submit" class="castle-login-btn" name="login">Log In</button>
        </form>
        <div class="castle-login-note">Use your account credentials to login.</div>
    </div>
</div>
<script src="./assets/js/site-translator.js"></script>
<script>document.addEventListener('DOMContentLoaded',function(){var b=document.getElementById('toggle-password'),p=document.getElementById('password');if(b&&p)b.addEventListener('click',function(){p.type=p.type==='password'?'text':'password';b.setAttribute('aria-label',p.type==='password'?'Show password':'Hide password');});document.body.classList.add('login-page');});</script>

<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
<script src="./bootstrap/js/popper.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="./assets/js/app.js"></script>

<!-- END GLOBAL MANDATORY SCRIPTS -->
<script src="./assets/js/authentication/form-2.js"></script>
<script src="./plugins/highlight/highlight.pack.js"></script>
<script src="./assets/js/custom.js"></script>
<!-- END GLOBAL MANDATORY STYLES -->
<script src="./plugins/notification/snackbar/snackbar.min.js"></script>
<!-- END PAGE LEVEL PLUGINS -->


<!--  BEGIN CUSTOM SCRIPTS FILE  -->
<script src="./assets/js/components/notification/custom-snackbar.js"></script>
<!--  END CUSTOM SCRIPTS FILE  -->

<!-- BEGIN THEME GLOBAL STYLE -->
<script src="./assets/js/scrollspyNav.js"></script>
<script src="./plugins/sweetalerts/sweetalert2.min.js"></script>
<script src="./plugins/sweetalerts/custom-sweetalert.js"></script>
<!-- END THEME GLOBAL STYLE -->
<script>
    $(document).ready(function(){
        $(".numpad").hide();
        $('.input').click(function(){
            $('.numpad').fadeToggle('fast');
        });

        $('.del').click(function(){
            $('.input').val($('.input').val().substring(0,$('.input').val().length - 1));
        });
        $('.faq').click(function(){
            alert("Enter Your OTP Sent to you ");
        })
        $('.shuffle').click(function(){
            $('.input').val($('.input').val() + $(this).text());
            $('.shuffle').shuffle();
        });
        (function($){

            $.fn.shuffle = function() {

                var allElems = this.get(),
                    getRandom = function(max) {
                        return Math.floor(Math.random() * max);
                    },
                    shuffled = $.map(allElems, function(){
                        var random = getRandom(allElems.length),
                            randEl = $(allElems[random]).clone(true)[0];
                        allElems.splice(random, 1);
                        return randEl;
                    });

                this.each(function(i){
                    $(this).replaceWith($(shuffled[i]));
                });

                return $(shuffled);

            };

        })(jQuery);

    });
</script>
<script>
    $(function() {
        $('#datepicker').keypress(function(event) {
            event.preventDefault();
            return false;
        });
    });
</script>

</body>
</html>