<?php 
ob_start();
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
include("../config/theconfig.php");

$logininfo = '';

if (isset($_REQUEST['error'])) {
    if ($_REQUEST['error'] == 'nologin') {
        $logininfo = "Please Sign In to Continue";
    } elseif ($_REQUEST['error'] == 'forgetpass') {
        $logininfo = "Please contact the nearest branch";
    }
}

// Default values (in case no rows exist in system_settings)
$cur         = '$';
$sbank       = 'Default Bank';
$sphone      = '+1 620 222 9952';
$semail      = 'support@defaultbank.com';
$brand_logo = 'assets/images/brand/logo_1758475458.png';

// system settings
$query = "SELECT * FROM system_settings";
$result = mysqli_query($con, $query);

while ($row = mysqli_fetch_array($result)) {
    $cur         = !empty($row['currency']) ? $row['currency'] : $cur;
    $sbank       = !empty($row['bank_name']) ? $row['bank_name'] : $sbank;
    $semail      = !empty($row['email']) ? $row['email'] : $semail;
    $sphone      = !empty($row['phone']) ? $row['phone'] : $semail;
    $brand_logo = !empty($row['brand_logo']) ? $row['brand_logo'] : $brand_logo;
}


// Redirect if already logged in
if (isset($_SESSION['customerid'])) {
    $otp_query = "SELECT otp_enabled FROM general_settings WHERE id = 1";
    $otp_result = mysqli_query($con, $otp_query);
    $otp_row = mysqli_fetch_assoc($otp_result);

    if ($otp_row['otp_enabled'] == 1) {
        header("Location: otp.php");
        exit();
    } else {
        header("Location: dashboard.php");
        exit();
    }
}

// Handle login form submission
if (isset($_REQUEST['login']) && isset($_REQUEST['password'])) {
    $password = mysqli_real_escape_string($con, $_REQUEST['password']);
    $logid = mysqli_real_escape_string($con, $_REQUEST['login']);
    
    $stmt = mysqli_prepare($con, "SELECT * FROM customers WHERE email=? AND accpassword=?");
    mysqli_stmt_bind_param($stmt, "ss", $logid, $password);
    mysqli_stmt_execute($stmt);
    $res = mysqli_stmt_get_result($stmt);

    if (mysqli_num_rows($res) == 1) {
        while ($recarr = mysqli_fetch_array($res)) {
            $status = $recarr['accstatus'];
            
            
            $customer_full_name = htmlspecialchars($recarr['firstname'] . " " . $recarr['lastname']);

            if ($status == 'onreview') {
                
               $logininfo = 'Hello <strong>' . $customer_full_name . '</strong>, your account is currently under review.';
            } elseif ($status == 'blocked') {
                
                $logininfo = 'Hello <strong>' . $customer_full_name . '</strong>, your account is temporarily disabled. Please contact support.';
            } else {
                $_SESSION['customerid'] = $recarr['customerid'];
                $_SESSION['ifsccode'] = $recarr['ifsccode'];
                $_SESSION['customername'] = $customer_full_name;
                $_SESSION['loginid'] = $recarr['loginid'];
                $_SESSION['accstatus'] = $recarr['accstatus'];
                $_SESSION['accopendate'] = $recarr['accopendate'];
                $_SESSION['lastlogin'] = $recarr['lastlogin'];
                $_SESSION['card_long_digit'] = $recarr['card_long_digit'];
                $_SESSION['valid_thru'] = $recarr['valid_thru'];
                $_SESSION["loginid"] = $_POST["login"];

                $otp_query = "SELECT otp_enabled FROM general_settings WHERE id = 1";
                $otp_result = mysqli_query($con, $otp_query);
                $otp_row = mysqli_fetch_assoc($otp_result);

                if ($otp_row['otp_enabled'] == 1) {
                    header("Location: otp.php");
                    exit();
                } else {
                    header("Location: dashboard.php");
                    exit();
                }
            }

            // Send login alert email
            $to_email = $recarr["email"];
            $date = date('m/d/Y h:i:s a', time());
            
            $subject = $sbank . ' ONLINE LOGIN ALERT ON ' . $date;
            $message = "There was a login attempt on your account on " . $date . ".\n\n"
                        . "If you did not login to your " . $sbank . " account, kindly contact " . $sbank . " Online (24/7 Customer Service) at " . $sphone . " or email " . $semail . ".\n\n"
                        . "Thank you for banking with us.\n\n"
                        . "© 2025 " . $sbank . " Bank (RC796975). All rights reserved.\n"
                        . "This message and its attachments are for designated recipient(s) only. If received in error, please delete it immediately.";
            
            $headers = "From: " . $sbank . " <" . $semail . ">" . "\r\n";
            mail($to_email, $subject, $message, $headers);
        }
    } else {
        $logininfo = "Invalid Username or password entered";
    }

    mysqli_stmt_close($stmt);
}
?>

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>Login - <?php echo $sbank; ?></title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta content="Login to your account" name="description" />
      
      <link rel="shortcut icon" href="assets/images/favicon.ico">
      <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
      <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
      <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
      <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
      <style>
    :root {
        /* --- UPDATED TO BLUE THEME --- */
        --primary-purple: #003399; 
        --dark-purple: #005D9D;
        --soft-purple-bg: #e6efff; /* Light Blue background */
        --bg-body: #f8fafc;
        --text-main: #0f172a;
        --text-secondary: #64748b;
    }
    
    body {
        background: var(--bg-body);
        font-family: 'Plus Jakarta Sans', sans-serif;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .login-container {
        width: 100%;
        max-width: 1100px;
        padding: 20px;
    }
    
    .login-card {
        border: none;
        border-radius: 24px;
        box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
        overflow: hidden;
        background: white;
        display: flex;
        flex-direction: column;
    }
    
    @media (min-width: 992px) {
        .login-card { flex-direction: row; min-height: 600px; }
    }
    
    .login-left {
        /* Updated Gradient to Blue */
        background: linear-gradient(135deg, var(--primary-purple) 0%, var(--dark-purple) 100%);
        color: white;
        padding: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    
    @media (min-width: 992px) { .login-left { width: 45%; } }

    /* Hide Informational content on mobile devices */
    @media (max-width: 991px) {
        .login-left {
            display: none !important;
        }
    }

    .login-left::before {
        content: '';
        position: absolute;
        top: -50px; left: -50px; width: 300px; height: 300px;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        border-radius: 50%;
    }
    
    .login-right {
        padding: 50px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    @media (min-width: 992px) { .login-right { width: 55%; } }
    
    .welcome-text h1 { font-size: 2rem; font-weight: 800; margin-bottom: 10px; color:white; }
    .welcome-text p { font-size: 1rem; opacity: 0.9; margin-bottom: 30px; }
    
    .security-item { display: flex; align-items: center; margin-bottom: 20px; }
    .security-icon {
        width: 40px; height: 40px; border-radius: 12px;
        background: rgba(255, 255, 255, 0.2);
        display: flex; align-items: center; justify-content: center;
        margin-right: 15px; font-size: 18px; color: white;
    }
    .security-text h4 { font-size: 0.95rem; margin-bottom: 2px; color:white; font-weight: 600; }
    .security-text p { font-size: 0.8rem; opacity: 0.8; margin: 0; }
    
    .form-header h2 { font-size: 1.8rem; font-weight: 700; color: var(--text-main); margin-bottom: 5px; }
    .form-header p { color: var(--text-secondary); margin-bottom: 30px; }
    
    .form-label { font-weight: 600; color: var(--text-main); font-size: 0.9rem; }
    .form-control {
        border-radius: 12px;
        padding: 12px 16px;
        border: 1px solid #e2e8f0;
        transition: all 0.3s ease;
        height: 50px;
        font-size: 0.95rem;
        color: var(--text-main);
    }
    .form-control:focus {
        border-color: var(--primary-purple);
        box-shadow: 0 0 0 4px var(--soft-purple-bg);
    }
    
    .btn-login {
        background: var(--primary-purple);
        border: none;
        font-weight: 700;
        border-radius: 12px;
        padding: 14px;
        width: 100%;
        font-size: 1rem;
        color: white;
        transition: all 0.3s ease;
        margin-top: 20px;
        /* Updated Shadow to Blue */
        box-shadow: 0 4px 12px rgba(0, 51, 153, 0.3);
    }
    .btn-login:hover {
        background: var(--dark-purple);
        transform: translateY(-2px);
    }
    
    .password-field { position: relative; }
    .password-toggle {
        position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
        background: none; border: none; color: #94a3b8; cursor: pointer;
    }
    .password-toggle:hover { color: var(--primary-purple); }
    
    .login-link { color: var(--primary-purple); font-weight: 600; text-decoration: none; font-size: 0.9rem; }
    .login-link:hover { color: var(--dark-purple); text-decoration: underline; }
    
    /* Step Indicator */
    .step-indicator { display: flex; justify-content: center; margin-bottom: 30px; gap: 10px; align-items: center; }
    .step { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
    .step.active { background: var(--primary-purple); color: white; }
    .step.inactive { background: #e2e8f0; color: #94a3b8; }
    .step-line { width: 50px; height: 3px; background: #e2e8f0; border-radius: 2px; }
    .step-line.active { background: var(--primary-purple); }
    
    /* Alert Section */
    .alert-section { background: #eff6ff; border: 1px solid #dbeafe; border-radius: 12px; padding: 15px; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 25px; }
    .alert-section i { color: #2563eb; font-size: 1.2rem; margin-top: 2px; }
    .alert-text { font-size: 0.85rem; color: #1e40af; line-height: 1.5; }
</style>
   </head>
   <body>
      <div class="login-container">
         <div class="login-card">
            
            <div class="login-left">
               <div style="margin-bottom: 40px;">
                   <img src="../<?php echo $brand_logo ?>" alt="" height="50" style="filter: brightness(0) invert(1);">
               </div>
               
               <div class="welcome-text">
                  <h1>Welcome Back</h1>
                  <p>Securely manage your finances with ease.</p>
               </div>
               
               <div class="security-features">
                  <div class="security-item">
                     <div class="security-icon"><i class="fas fa-shield-alt"></i></div>
                     <div class="security-text">
                        <h4>Bank-Level Security</h4>
                        <p>256-bit encryption active</p>
                     </div>
                  </div>
                  <div class="security-item">
                     <div class="security-icon"><i class="fas fa-lock"></i></div>
                     <div class="security-text">
                        <h4>Secure Login</h4>
                        <p>Protected authentication</p>
                     </div>
                  </div>
                  <div class="security-item">
                     <div class="security-icon"><i class="fas fa-clock"></i></div>
                     <div class="security-text">
                        <h4>24/7 Access</h4>
                        <p>Banking anytime, anywhere</p>
                     </div>
                  </div>
               </div>
            </div>

            <div class="login-right">
               <div class="form-header">
                  <h2>Sign In</h2>
                  <p>Enter your details to access your account.</p>
               </div>
               
               <?php if ($logininfo): ?>
               <script>
                  Swal.fire({
                      icon: 'error',
                      title: 'Access Denied',
                      html: '<?php echo $logininfo; ?>', 
                      confirmButtonColor: '#7c3aed'
                  });
               </script>
               <?php endif; ?>
               
               <div class="step-indicator">
                  <div class="step active" id="step1-indicator">1</div>
                  <div class="step-line" id="step1-line"></div>
                  <div class="step inactive" id="step2-indicator">2</div>
               </div>
               
               <div class="alert-section">
                  <i class="fas fa-info-circle"></i>
                  <div class="alert-text">
                     Please enter your email address to begin. If you've forgotten your login details, please contact support.
                  </div>
               </div>
               
               <form id="multiStepForm" method="POST">
                  <div id="step1">
                     <div class="mb-3">
                        <label for="email-1" class="form-label">Email Address</label>
                        <input type="text" class="form-control" id="email-1" name="login" placeholder="name@example.com" required>
                        <div class="invalid-feedback">Please enter a valid email address.</div>
                     </div>
                     <div class="form-check mb-4">
                        <input type="checkbox" class="form-check-input" id="rememberMe">
                        <label class="form-check-label text-secondary small" for="rememberMe">Remember my device</label>
                     </div>
                     <button type="button" class="btn-login" onclick="validateEmail()">Continue <i class="fas fa-arrow-right ms-2"></i></button>
                  </div>
                  
                  <div id="step2" style="display: none;">
                     <div class="mb-3">
                        <label for="password-1" class="form-label">Password</label>
                        <div class="password-field">
                           <input type="password" class="form-control" name="password" id="password-1" placeholder="Enter your password" required>
                           <button type="button" class="password-toggle" id="password-toggle">
                              <i class="far fa-eye"></i>
                           </button>
                        </div>
                     </div>
                     <button name="go" id="go" class="btn-login" type="submit">Access Account</button>
                     <button type="button" class="btn btn-link text-secondary w-100 mt-2 text-decoration-none small" onclick="goBack()">Back to Email</button>
                  </div>
               </form>
               
               <div class="mt-4 text-center">
                  <p class="small text-secondary mb-2">
                     <a href="#" class="login-link contactLink">Forgot Password?</a>
                  </p>
                  <p class="small text-secondary">
                     New here? <a href="register.php" class="login-link">Create an Account</a>
                  </p>
               </div>
               
            </div>
         </div>
         
         <div class="text-center mt-4">
             <a href="../index.php" class="text-decoration-none text-secondary small fw-bold"><i class="fas fa-arrow-left me-1"></i> Back to Home</a>
             <div class="mt-2 small text-muted">&copy; <?php echo date("Y"); ?> <?php echo $sbank ?>. All rights reserved.</div>
         </div>
      </div>
      
      <script src="assets/libs/jquery/jquery.min.js"></script>
      <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
      <script src="assets/libs/simplebar/simplebar.min.js"></script>
      <script src="assets/libs/node-waves/waves.min.js"></script>
      
      <script>
         function validateEmail() {
             var emailField = document.getElementById('email-1');
             var emailVal = emailField.value.trim();
             var emailRegex = /\S+@\S+\.\S+/;
             
             if (emailVal !== '' && emailRegex.test(emailVal)) {
                 document.getElementById('step1').style.display = 'none';
                 document.getElementById('step2').style.display = 'block';
                 
                 // Update indicators
                 document.getElementById('step1-indicator').classList.remove('active');
                 document.getElementById('step1-indicator').classList.add('inactive');
                 document.getElementById('step1-line').classList.add('active');
                 document.getElementById('step2-indicator').classList.remove('inactive');
                 document.getElementById('step2-indicator').classList.add('active');
                 
                 emailField.classList.remove('is-invalid');
             } else {
                 emailField.classList.add('is-invalid');
                 // Optional: Show quick toast/alert
                 Swal.fire({
                    toast: true, position: 'top-end', icon: 'warning', 
                    title: 'Please enter a valid email', showConfirmButton: false, timer: 3000
                 });
             }
         }
         
         function goBack() {
             document.getElementById('step2').style.display = 'none';
             document.getElementById('step1').style.display = 'block';
             
             document.getElementById('step2-indicator').classList.remove('active');
             document.getElementById('step2-indicator').classList.add('inactive');
             document.getElementById('step1-line').classList.remove('active');
             document.getElementById('step1-indicator').classList.add('active');
         }
         
         document.addEventListener('DOMContentLoaded', function() {
             // Contact Alert
             document.querySelectorAll('.contactLink').forEach(function(link) {
                 link.addEventListener('click', function(event) {
                     event.preventDefault();
                     Swal.fire({
                         title: 'Support',
                         text: 'Please contact us via email for account recovery.',
                         icon: 'info',
                         confirmButtonColor: '#7c3aed'
                     });
                 });
             });
             
             // Password Toggle
             const passwordToggle = document.getElementById('password-toggle');
             const passwordField = document.getElementById('password-1');
             
             if (passwordToggle) {
                 passwordToggle.addEventListener('click', function() {
                     const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
                     passwordField.setAttribute('type', type);
                     this.querySelector('i').classList.toggle('fa-eye');
                     this.querySelector('i').classList.toggle('fa-eye-slash');
                 });
             }
         });
      </script>
   </body>
</html>