<?php
require_once 'config.php';
?>
<!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">

    <!-- Favicons -->
    <link href="<?= $site_url ?>/<?= $website_settings['favicon'] ?>" rel="icon">
    <link href="<?= $site_url ?>/<?= $website_settings['favicon'] ?>" rel="apple-touch-icon">

    <title><?= $website_settings['title'] ?></title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&display=swap" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- reCAPTCHA -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

    <!-- Google Sign-In -->
    <script src="https://accounts.google.com/gsi/client" async defer></script>

    <style>
      :root {
        --blue: #1971ff;
        --maroon: #8b1538;
        --ink: #0a0c14;
      }

      * { box-sizing: border-box; }

      body {
        font-family: 'DM Sans', sans-serif;
        background: var(--ink);
        color: #e7e9ee;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        margin: 0;
      }

      a { text-decoration: none !important; }

      .back-home {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #cfd4de;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 26px;
      }
      .back-home:hover { color: #fff; }

      .auth-wrap { flex: 1; display: flex; align-items: center; padding: 48px 0; }

      .auth-grid {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 40px;
        align-items: center;
      }

      /* Left: brand/visual panel, reuses the same mockup language as the
         homepage hero -- same product, same look, no more Lottie file. */
      .auth-visual { padding: 10px 10px 10px 0; }
      .auth-visual h1 {
        font-size: 34px;
        font-weight: 800;
        color: #fff;
        line-height: 1.25;
        margin-bottom: 14px;
      }
      .auth-visual h1 span {
        background-image: linear-gradient(115deg, var(--blue) 30%, #ffa37b 100%);
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
      }
      .auth-visual > p { color: #9aa4b2; font-size: 15px; margin-bottom: 26px; max-width: 460px; }
      .auth-feature-list { list-style: none; padding: 0; margin: 0 0 30px; }
      .auth-feature-list li { display: flex; align-items: center; gap: 10px; color: #cfd4de; font-size: 14.5px; margin-bottom: 12px; }
      .auth-feature-list svg { width: 18px; height: 18px; flex: none; color: #3ddb92; }

      .mockup-scene { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; }
      .mockup-glow { position: absolute; border-radius: 50%; filter: blur(85px); z-index: 0; pointer-events: none; }
      .mockup-glow-a { width: 280px; height: 280px; background: #1971ff4d; top: -10px; right: 30px; }
      .mockup-glow-b { width: 220px; height: 220px; background: #8b15384d; bottom: -10px; left: 10px; }
      .mockup-dots {
        position: absolute; inset: 0;
        background-image: radial-gradient(rgba(255,255,255,0.16) 1.5px, transparent 1.5px);
        background-size: 22px 22px;
        -webkit-mask-image: radial-gradient(circle at center, #000 40%, transparent 75%);
        mask-image: radial-gradient(circle at center, #000 40%, transparent 75%);
        z-index: 0; pointer-events: none;
      }
      .phone-mockup { position: relative; z-index: 1; width: 220px; background: #0d1117; border: 6px solid #1b2230; border-radius: 32px; box-shadow: 0 30px 70px rgba(0,0,0,0.55); overflow: hidden; }
      .phone-notch { width: 76px; height: 16px; background: #1b2230; border-radius: 0 0 14px 14px; margin: 0 auto; }
      .phone-screen { background: #fff; padding: 18px 16px 22px; }
      .phone-app-header { text-align: center; font-weight: 700; color: #14161c; font-size: 13px; margin-bottom: 12px; }
      .qr-block { background: #f3f5fb; border-radius: 12px; padding: 12px; display: flex; justify-content: center; margin-bottom: 12px; }
      .qr-block svg { width: 96px; height: 96px; }
      .phone-amount { text-align: center; font-size: 17px; font-weight: 800; color: #14161c; margin-bottom: 10px; }
      .phone-status { display: flex; align-items: center; justify-content: center; gap: 6px; background: #e7faf0; color: #17a463; font-weight: 600; font-size: 12px; padding: 8px; border-radius: 10px; }
      .phone-status svg { width: 14px; height: 14px; flex: none; }
      .floating-badge {
        position: absolute; z-index: 2; right: -4px; top: 6px;
        display: flex; align-items: center; gap: 6px;
        background: var(--maroon); color: #fff; font-size: 11.5px; font-weight: 600;
        padding: 8px 13px; border-radius: 30px; box-shadow: 0 15px 35px rgba(139,21,56,0.45);
        white-space: nowrap;
      }
      .floating-badge svg { width: 13px; height: 13px; flex: none; }

      /* Right: the actual auth card -- kept light so form fields, Google's
         sign-in button, and the reCAPTCHA widget all stay fully readable. */
      .auth-card {
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 30px 80px rgba(0,0,0,0.45);
        padding: 38px 36px;
        color: #1c2230;
      }
      .auth-card h3 {
        font-weight: 800;
        font-size: 22px;
        margin-bottom: 6px;
        color: #14161c;
      }
      .auth-card .auth-sub { color: #7c8494; font-size: 14px; margin-bottom: 24px; }

      .form-label { font-size: 13.5px; font-weight: 600; color: #3d4453; }
      .form-control {
        height: 46px;
        border-radius: 12px !important;
        border: 1.5px solid #e6e9f0;
        background: #f8f9fc;
      }
      .form-control:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 4px rgba(25, 113, 255, 0.14);
        background: #fff;
      }

      .btn-primary {
        background-color: var(--blue);
        border-color: var(--blue);
        padding: 12px;
        font-weight: 700;
        border-radius: 12px !important;
        letter-spacing: 0.3px;
      }
      .btn-primary:hover, .btn-primary:focus {
        background-color: var(--maroon);
        border-color: var(--maroon);
      }

      #otpformbox { display: none; }
      .otp-inputs { display: flex; justify-content: center; margin-bottom: 22px; gap: 9px; }
      .otp-input { width: 44px; height: 50px; font-size: 18px; font-weight: 700; text-align: center; border: 1.5px solid #e6e9f0; border-radius: 10px !important; background: #f8f9fc; }
      .otp-input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 4px rgba(25, 113, 255, 0.14); background: #fff; }

      .stay-signed { display: flex; align-items: center; justify-content: space-between; }
      .stay-signed a { color: var(--blue); font-size: 13.5px; font-weight: 600; }
      .stay-signed a:hover { color: var(--maroon); }

      .auth-divider { display: flex; align-items: center; gap: 12px; color: #b0b6c0; font-size: 12.5px; margin: 18px 0; }
      .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #ecefF5; }

      .resend-otp { color: #7c8494; font-size: 13.5px; }
      #resendOtpBtn { cursor: pointer; font-weight: 700; color: var(--blue); }
      #resendOtpBtn.disabled { color: #b0b6c0 !important; cursor: not-allowed; }

      .simple-spinner { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
      .simple-spinner span { display: block; width: 60px; height: 60px; border: 3px solid transparent; border-radius: 50%; border-right-color: rgba(255,255,255,0.8); animation: spinner-anim 0.8s linear infinite; }
      @keyframes spinner-anim { from { transform: rotate(0); } to { transform: rotate(360deg); } }
      #loading_ajax { display: none; background: rgba(0,0,0,0.5); position: fixed; inset: 0; z-index: 9998; }

      .auth-footer { padding: 22px 0; text-align: center; }
      .auth-footer p { margin: 0; color: #7a8194; font-size: 12.5px; }

      @media (max-width: 991px) {
        .auth-grid { grid-template-columns: 1fr; }
        .auth-visual { text-align: center; padding: 0; }
        .auth-visual > p { margin-left: auto; margin-right: auto; }
        .auth-feature-list { display: inline-block; text-align: left; }
        .mockup-scene { min-height: 260px; margin-bottom: 10px; }
      }
      @media (max-width: 480px) {
        .auth-card { padding: 28px 22px; }
        .otp-input { width: 38px; height: 46px; }
      }
    </style>
  </head>

  <body>
    <div id="loading_ajax">
      <div class="simple-spinner"><span></span></div>
    </div>

    <div class="container auth-wrap">
      <div class="auth-grid" style="width:100%">
        <div>
          <a class="back-home" href="<?= $site_url ?>/"><i class="fas fa-arrow-left"></i>Back to Home</a>

          <div class="auth-visual">
            <h1>Fastest API for <span>UPI Payments</span></h1>
            <p>Sign in to manage your integration, track transactions, and keep your UPI and crypto payments running.</p>
            <ul class="auth-feature-list">
              <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg> 0% transaction fees</li>
              <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg> UPI + Crypto payments, one dashboard</li>
              <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg> Signed, verifiable webhooks</li>
            </ul>

            <div class="mockup-scene">
              <div class="mockup-glow mockup-glow-a"></div>
              <div class="mockup-glow mockup-glow-b"></div>
              <div class="mockup-dots"></div>
              <div class="phone-mockup">
                <div class="phone-notch"></div>
                <div class="phone-screen">
                  <div class="phone-app-header">Scan &amp; Pay</div>
                  <div class="qr-block">
                    <svg viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
                      <rect x="0" y="0" width="7" height="7" fill="#14161c"/><rect x="1" y="1" width="5" height="5" fill="#fff"/><rect x="2" y="2" width="3" height="3" fill="#14161c"/>
                      <rect x="22" y="0" width="7" height="7" fill="#14161c"/><rect x="23" y="1" width="5" height="5" fill="#fff"/><rect x="24" y="2" width="3" height="3" fill="#14161c"/>
                      <rect x="0" y="22" width="7" height="7" fill="#14161c"/><rect x="1" y="23" width="5" height="5" fill="#fff"/><rect x="2" y="24" width="3" height="3" fill="#14161c"/>
                      <path fill="#14161c" d="M9 9h1v1h-1zM12 9h1v1h-1zM15 9h1v1h-1zM19 9h1v1h-1zM23 9h1v1h-1zM26 9h1v1h-1zM10 12h1v1h-1zM14 12h1v1h-1zM17 12h1v1h-1zM21 12h1v1h-1zM25 12h1v1h-1zM1 15h1v1h-1zM4 15h1v1h-1zM9 15h1v1h-1zM13 15h1v1h-1zM17 15h1v1h-1zM21 15h1v1h-1zM25 15h1v1h-1zM10 18h1v1h-1zM14 18h1v1h-1zM18 18h1v1h-1zM22 18h1v1h-1zM26 18h1v1h-1zM9 21h1v1h-1zM13 21h1v1h-1zM17 21h1v1h-1zM21 21h1v1h-1zM25 21h1v1h-1zM10 24h1v1h-1zM14 24h1v1h-1zM19 24h1v1h-1zM23 24h1v1h-1zM27 24h1v1h-1zM12 27h1v1h-1zM16 27h1v1h-1zM20 27h1v1h-1zM24 27h1v1h-1z"/>
                    </svg>
                  </div>
                  <div class="phone-amount">₹499.00</div>
                  <div class="phone-status">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#17a463" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                    Payment Successful
                  </div>
                </div>
              </div>
              <div class="floating-badge">
                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6z"/><path d="M9 12l2 2 4-4"/></svg>
                Signed &amp; Verified
              </div>
            </div>
          </div>
        </div>

        <div>
          <div class="auth-card">
            <!-- Login Form -->
            <div id="loginformbox">
              <form method="POST" id="login_form">
                <h3>Sign In</h3>
                <p class="auth-sub">Welcome back &mdash; enter your details to continue.</p>

                <div class="mb-3">
                  <label for="mobile" class="form-label">Mobile Number</label>
                  <input class="form-control" id="mobile" name="username" type="number"
                         placeholder="Enter 10-digit mobile number" minlength="10" maxlength="10"
                         oninput="this.value = this.value.replace(/[^0-9]/g, '');" required>
                </div>

                <div class="mb-3">
                  <label for="passwordlogin" class="form-label">Password</label>
                  <input class="form-control" type="password" id="passwordlogin"
                         name="password" placeholder="Enter your password" required>
                </div>

                <div class="mb-3 stay-signed">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="staySigned">
                    <label class="form-check-label" for="staySigned">Stay Signed in</label>
                  </div>
                  <a href="forgotpassword">Forgot Password?</a>
                </div>

                <!-- Google reCAPTCHA -->
                <div class="g-recaptcha mb-3" data-sitekey="<?= $website_settings['recaptcha_site_key'] ?>"></div>

                <button class="btn btn-primary w-100 mb-2" type="submit" name="submit">
                  Sign In
                </button>

                <div class="auth-divider">OR</div>

                <div id="g_id_onload"
                     data-client_id="<?= htmlspecialchars(getenv('GOOGLE_CLIENT_ID') ?: '') ?>"
                     data-callback="handleGoogleCredentialResponse">
                </div>
                <div class="g_id_signin d-flex justify-content-center mb-3"
                     data-type="standard" data-width="330"></div>

                <div class="text-center pt-2">
                  <p class="mb-0" style="font-size:14px;color:#7c8494;">Don't have an account? <a href="register" style="color:var(--blue);font-weight:600;">Register</a></p>
                </div>
              </form>
            </div>

            <!-- OTP Form -->
            <div id="otpformbox">
              <form method="POST" id="loginotpform">
                <input type="hidden" name="useridmodal" id="useridmodal">
                <h3>Verify Your Account</h3>
                <p class="auth-sub">We've sent a verification code to your mobile. Enter it below to continue.</p>

                <div class="otp-inputs">
                  <input type="text" maxlength="1" class="otp-input form-control" id="otp1" autocomplete="off">
                  <input type="text" maxlength="1" class="otp-input form-control" id="otp2" autocomplete="off">
                  <input type="text" maxlength="1" class="otp-input form-control" id="otp3" autocomplete="off">
                  <input type="text" maxlength="1" class="otp-input form-control" id="otp4" autocomplete="off">
                  <input type="text" maxlength="1" class="otp-input form-control" id="otp5" autocomplete="off">
                  <input type="text" maxlength="1" class="otp-input form-control" id="otp6" autocomplete="off">
                </div>

                <button class="btn btn-primary w-100 mb-3" type="submit" name="submit">
                  Verify OTP
                </button>

                <p class="text-center resend-otp pt-2">
                  Didn't receive the code?
                  <span id="resendOtpBtn" class="disabled">Resend OTP</span>
                  in <span id="timer">30</span>s
                </p>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer class="auth-footer">
      <p>© <?= date('Y') ?> <?= $website_settings['title'] ?>. All rights reserved.</p>
    </footer>

    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/login.js"></script>

    <!-- OTP input auto-focus + resend timer (kept identical to before) -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        const otpInputs = document.querySelectorAll('.otp-input');
        otpInputs.forEach((input, index) => {
          input.addEventListener('input', (e) => {
            if (e.target.value.length === 1 && index < otpInputs.length - 1) {
              otpInputs[index + 1].focus();
            }
          });
          input.addEventListener('keydown', (e) => {
            if (e.key === 'Backspace' && index > 0 && !e.target.value) {
              otpInputs[index - 1].focus();
            }
          });
        });

        let timeLeft = 30;
        const timerElement = document.getElementById('timer');
        const resendBtn = document.getElementById('resendOtpBtn');

        const timer = setInterval(() => {
          timeLeft--;
          timerElement.textContent = timeLeft;
          if (timeLeft <= 0) {
            clearInterval(timer);
            resendBtn.classList.remove('disabled');
            timerElement.style.display = 'none';
          }
        }, 1000);

        resendBtn.addEventListener('click', function() {
          if (!this.classList.contains('disabled')) {
            timeLeft = 30;
            timerElement.textContent = timeLeft;
            timerElement.style.display = 'inline';
            this.classList.add('disabled');

            Swal.fire({
              icon: 'success',
              title: 'OTP Resent',
              text: 'A new OTP has been sent to your mobile number',
              timer: 2000,
              showConfirmButton: false
            });

            const newTimer = setInterval(() => {
              timeLeft--;
              timerElement.textContent = timeLeft;
              if (timeLeft <= 0) {
                clearInterval(newTimer);
                resendBtn.classList.remove('disabled');
                timerElement.style.display = 'none';
              }
            }, 1000);
          }
        });
      });
    </script>
  </body>
</html>
