<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Login</title>

  
  <link rel="icon" type="image/png" href="http://localhost/beekoder/public/images/logo_dgTdpIzpsf.PNG">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Poppins', sans-serif;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 22px;
      background:
        radial-gradient(1200px 700px at 15% 15%, rgba(34,197,94,.10), transparent 60%),
        radial-gradient(900px 600px at 85% 35%, rgba(59,130,246,.08), transparent 55%),
        linear-gradient(135deg, #050814 0%, #090f1f 55%, #050814 100%);
      color: #e5e7eb;
    }

    /* ✅ ONLY ONE CARD */
    .auth-card {
      width: min(1120px, 100%);
      height: 680px;
      border-radius: 22px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.6fr 1fr;
      background: #0b1220;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 30px 90px rgba(0,0,0,.65);
    }

    /* LEFT BANNER */
    .banner {
      position: relative;
      padding: 40px;
      display: flex;
      align-items: stretch;
      justify-content: stretch;
      background:
        radial-gradient(800px 520px at 40% 40%, rgba(34,197,94,.22), transparent 62%),
        radial-gradient(700px 450px at 72% 65%, rgba(245,158,11,.14), transparent 60%),
        linear-gradient(135deg, #061018 0%, #073a2b 60%, #061018 100%);
    }

    .banner::before{
      content:"";
      position:absolute; inset:0;
      opacity:.18;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.26'%3E%3Cpath d='M18 28h44v44H18z'/%3E%3Cpath d='M118 28h44v44h-44z'/%3E%3Cpath d='M218 28h44v44h-44z'/%3E%3Cpath d='M18 128h44v44H18z'/%3E%3Cpath d='M118 128h44v44h-44z'/%3E%3Cpath d='M218 128h44v44h-44z'/%3E%3Cpath d='M18 228h44v44H18z'/%3E%3Cpath d='M118 228h44v44h-44z'/%3E%3Cpath d='M218 228h44v44h-44z'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.12'%3E%3Ccircle cx='86' cy='86' r='6'/%3E%3Ccircle cx='176' cy='176' r='6'/%3E%3Ccircle cx='86' cy='176' r='4'/%3E%3Ccircle cx='176' cy='86' r='4'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 280px 280px;
      pointer-events:none;
    }

    .banner::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(65% 70% at 35% 40%, transparent 0%, rgba(0,0,0,.55) 86%);
      pointer-events:none;
    }

    .banner-inner{
      position: relative;
      z-index: 2;
      width: 100%;
      border-radius: 18px;
      padding: 26px;
      display:flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .banner h2{
      font-size: 2.4rem;
      font-weight: 800;
      letter-spacing: -0.6px;
      line-height: 1.1;
      margin-bottom: 14px;
      color: #f59e0b;
      text-shadow: 0 14px 35px rgba(0,0,0,.6);
    }

    .banner p{
      max-width: 460px;
      color: rgba(229,231,235,.92);
      line-height: 1.55;
      font-size: 1.03rem;
    }

    .banner .bottom{
      font-weight: 700;
      color: rgba(245,158,11,.95);
      font-size: 1.15rem;
      text-shadow: 0 14px 35px rgba(0,0,0,.6);
    }

    /* RIGHT FORM */
    .panel{
      padding: 44px 40px;
      background: #0b1220;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-left: 1px solid rgba(255,255,255,.08);
    }

    .brand-row{
      display:flex;
      align-items:center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .logo{
      width: 52px;
      height: 52px;
      border-radius: 14px;
      object-fit: contain;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      padding: 8px;
    }

    .head h1{
      font-size: 2rem;
      font-weight: 800;
      margin: 0;
      color: #fff;
      letter-spacing: -0.4px;
    }

    .head p{
      margin: 6px 0 0;
      color: #9ca3af;
      font-size: .95rem;
    }

    .divider{
      display: flex;
      align-items: center;
      gap: 12px;
      color: rgba(156,163,175,.9);
      font-size: .85rem;
      margin: 8px 0 16px;
    }
    .divider::before,
    .divider::after{
      content:"";
      height: 1px;
      flex: 1;
      background: rgba(255,255,255,.10);
    }

    .msg{
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      border: 1px solid;
      animation: slideIn .25s ease;
    }
    .msg.success{
      background: rgba(34,197,94,.10);
      border-color: rgba(34,197,94,.22);
      color: #22c55e;
    }
    .msg.error{
      background: rgba(239,68,68,.10);
      border-color: rgba(239,68,68,.22);
      color: #ef4444;
    }
    .msg span{
      color: inherit;
      font-size: .88rem;
      font-weight: 600;
      flex: 1;
    }
    .close-btn{
      background: none;
      border: none;
      color: inherit;
      opacity: .75;
      cursor: pointer;
      padding: 2px 4px;
    }
    .close-btn:hover{ opacity: 1; }

    .form-group{ margin-bottom: 16px; }
    .label{
      display:block;
      margin-bottom: 8px;
      color: #e5e7eb;
      font-weight: 700;
      font-size: .88rem;
    }

    .field{
      position: relative;
    }

    .field i.left{
      position:absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(229,231,235,.55);
      pointer-events: none;
    }

    .input{
      width: 100%;
      border-radius: 12px;
      padding: 13px 14px 13px 44px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(17,24,39,.55);
      color: #fff;
      font-size: .95rem;
      transition: .2s;
      font-family: 'Poppins', sans-serif;
    }
    .input:focus{
      outline: none;
      border-color: rgba(34,197,94,.55);
      box-shadow: 0 0 0 4px rgba(34,197,94,.10);
      background: rgba(17,24,39,.72);
    }
    .input::placeholder{ color: #6b7280; }

    .toggle{
      position:absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: rgba(229,231,235,.6);
      cursor:pointer;
      padding: 6px;
    }
    .toggle:hover{ color: #fff; }

    .forgot{
      display:flex;
      justify-content: flex-end;
      margin-top: 6px;
    }
    .forgot a{
      font-size: .85rem;
      color: rgba(229,231,235,.75);
      text-decoration:none;
    }
    .forgot a:hover{ color: #22c55e; text-decoration: underline; }

    .btn-submit{
      margin-top: 14px;
      width: 100%;
      border-radius: 12px;
      padding: 13px;
      border: none;
      font-weight: 800;
      color: #fff;
      cursor: pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      background: linear-gradient(90deg, rgba(6,95,70,1) 0%, rgba(2,6,23,1) 100%);
      box-shadow: 0 18px 45px rgba(0,0,0,.45);
      transition: .2s;
    }
    .btn-submit:hover{ transform: translateY(-2px); box-shadow: 0 22px 55px rgba(0,0,0,.55); }
    .btn-submit:active{ transform: translateY(0); }

    .spinner{
      display:none;
      width:16px;height:16px;
      border:2px solid rgba(255,255,255,.35);
      border-top-color:#fff;
      border-radius:50%;
      animation: spin .8s linear infinite;
    }

    @keyframes slideIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
    @keyframes spin { to{ transform: rotate(360deg) } }

    @media (max-width: 992px){
      .auth-card{
        height: auto;
        grid-template-columns: 1fr;
      }
      .panel{
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.08);
      }
      .banner{ padding: 18px; min-height: 260px; }
      .banner h2{ font-size: 1.9rem; }
    }
  </style>
</head>

<body>

  <div class="auth-card">

    <!-- LEFT -->
    <div class="banner">
      <div class="banner-inner">
        <div>
          <h2>Unlock Your Potential!</h2>
          <p>Join our community to advance your skills, explore new opportunities, and connect with experts.</p>
        </div>
        <div class="bottom">Start Your Journey!</div>
      </div>
    </div>

    <!-- RIGHT -->
    <div class="panel">

      <div class="head">
        <div class="brand-row">
          <img src="http://localhost/beekoder/public/images/logo_dgTdpIzpsf.PNG" alt="Tesly Logo" class="logo">
          <div>
            <h1>Welcome Back</h1>
            <p>Login to your account</p>
          </div>
        </div>
      </div>

      <div class="divider">or continue with email</div>

      
      
              <div class="msg error" id="errorMessage">
          <i class="fas fa-exclamation-circle"></i>
          <span id="passwordErrorText">Please login first.</span>
          <button class="close-btn" type="button" onclick="hideMessage('errorMessage')"><i class="fas fa-times"></i></button>
        </div>
      
      <form action="http://localhost/beekoder/public/student/login" method="POST" id="loginForm">
        <input type="hidden" name="_token" value="RYiqaZR8yVLU4QH6f395CxwWJltssy1f5xbxTOSB" autocomplete="off">
        <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

        <div class="form-group">
          <label class="label">Email</label>
          <div class="field">
            <i class="fa-regular fa-envelope left"></i>
            <input
              type="email"
              name="email"
              id="email"
              class="input"
              placeholder="Enter your email"
              value=""
              required
            >
          </div>

                  </div>

        <div class="form-group">
          <label class="label">Password</label>
          <div class="field">
            <i class="fa-solid fa-key left"></i>
            <input
              type="password"
              name="password"
              id="password"
              class="input"
              placeholder="Enter your password"
              required
            >
            <button type="button" class="toggle" id="togglePassword" aria-label="Toggle password visibility">
              <i class="fas fa-eye"></i>
            </button>
          </div>

                  </div>

        <button type="submit" class="btn-submit" id="submitBtn">
          <span id="btnText">Sign In</span>
          <div class="spinner" id="spinner"></div>
          <i class="fa-solid fa-arrow-right-to-bracket"></i>
        </button>
      </form>

    </div>
  </div>

  <!-- Google reCAPTCHA Enterprise Script -->
  <script src="https://www.google.com/recaptcha/enterprise.js?render=6LendDQsAAAAAEt9Vyr9Hp5SpO80RMD2Cn-tVPov"></script>

  <script>
  document.addEventListener('DOMContentLoaded', function () {
    /* =========================================================
       1) PASSWORD VISIBILITY TOGGLE
    ========================================================= */
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput  = document.getElementById('password');

    if (togglePassword && passwordInput) {
      togglePassword.addEventListener('click', function () {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);

        const icon = this.querySelector('i');
        if (icon) {
          icon.className = (type === 'password') ? 'fas fa-eye' : 'fas fa-eye-slash';
        }
      });
    }

    /* =========================================================
       2) reCAPTCHA INIT + REFRESH
    ========================================================= */
    function initializeRecaptcha() {
      if (!window.grecaptcha || !grecaptcha.enterprise) return;

      grecaptcha.enterprise.ready(() => {
        grecaptcha.enterprise
          .execute('6LendDQsAAAAAEt9Vyr9Hp5SpO80RMD2Cn-tVPov', { action: 'login' })
          .then(token => {
            const el = document.getElementById('g-recaptcha-response');
            if (el) el.value = token;
          });
      });
    }

    function refreshRecaptchaToken() {
      return new Promise((resolve) => {
        if (!window.grecaptcha || !grecaptcha.enterprise) return resolve();

        grecaptcha.enterprise.ready(() => {
          grecaptcha.enterprise
            .execute('6LendDQsAAAAAEt9Vyr9Hp5SpO80RMD2Cn-tVPov', { action: 'login' })
            .then(token => {
              const el = document.getElementById('g-recaptcha-response');
              if (el) el.value = token;
              resolve();
            });
        });
      });
    }

    initializeRecaptcha();
    setInterval(refreshRecaptchaToken, 120000);

    /* =========================================================
       3) AUTO HIDE TOP MESSAGES
    ========================================================= */
    window.hideMessage = function (elementId) {
      const element = document.getElementById(elementId);
      if (element) {
        element.style.opacity = '0';
        element.style.transform = 'translateY(-10px)';
        setTimeout(() => { element.style.display = 'none'; }, 300);
      }
    }

    const successMsg = document.getElementById('successMessage');
    const errorMsg   = document.getElementById('errorMessage');
    const passMsg    = document.getElementById('passwordChangeMessage');

    if (successMsg) setTimeout(() => hideMessage('successMessage'), 5000);
    if (errorMsg)   setTimeout(() => hideMessage('errorMessage'), 5000);
    if (passMsg)    setTimeout(() => hideMessage('passwordChangeMessage'), 5000);

    /* =========================================================
       4) LOGIN LOCK (5 attempts => 180 sec) + COUNTDOWN
          - disables email/password/button
          - reverse countdown
          - enables when reaches 0
          - persists across refresh (localStorage)
          - blocks submit BEFORE other listeners (capture phase)
          ✅ FIXED: uses getStorageKey()
    ========================================================= */
    const errorText    = document.getElementById('passwordErrorText');
    const emailInput   = document.getElementById('email');
    const submitBtn    = document.getElementById('submitBtn');
    const loginForm    = document.getElementById('loginForm');
    const btnText      = document.getElementById('btnText');
    const spinner      = document.getElementById('spinner');

    const getStorageKey = () => {
      const email = (emailInput?.value || '').trim().toLowerCase();
      return 'student_login_lock_until:' + (email ? btoa(email) : 'noemail');
    };

    let countdownTimer = null;

    const lockUI = () => {
      if (submitBtn) submitBtn.disabled = true;
      if (emailInput) emailInput.disabled = true;
      if (passwordInput) passwordInput.disabled = true;
    };

    const unlockUI = () => {
      if (submitBtn) submitBtn.disabled = false;
      if (emailInput) emailInput.disabled = false;
      if (passwordInput) passwordInput.disabled = false;
    };

    const setErrorMsg = (msg) => {
      if (errorText) errorText.textContent = msg;
    };

    const setLockForSeconds = (sec) => {
      const until = Date.now() + (sec * 1000);
      localStorage.setItem(getStorageKey(), String(until));
      runCountdown();
    };

    const clearLock = () => {
      localStorage.removeItem(getStorageKey());
      if (countdownTimer) {
        clearInterval(countdownTimer);
        countdownTimer = null;
      }
    };

    const runCountdown = () => {
      if (countdownTimer) {
        clearInterval(countdownTimer);
        countdownTimer = null;
      }

      const raw = localStorage.getItem(getStorageKey());
      if (!raw) {
        unlockUI();
        return;
      }

      const until = parseInt(raw, 10);
      if (!Number.isFinite(until)) {
        clearLock();
        unlockUI();
        return;
      }

      const tick = () => {
        const diff = until - Date.now();
        const secLeft = Math.max(0, Math.ceil(diff / 1000));

        if (secLeft <= 0) {
          clearLock();
          unlockUI();
          setErrorMsg('You can login now.');
          return;
        }

        lockUI();
        setErrorMsg(`Too many login attempts. Try again in ${secLeft} seconds.`);
      };

      tick();
      countdownTimer = setInterval(tick, 1000);
    };

    // If server error already has "Try again in N seconds", start/persist lock
    if (errorText) {
      const m = errorText.textContent.match(/try again in\\s+(\\d+)\\s+seconds/i);
      if (m) {
        const sec = parseInt(m[1], 10);
        if (Number.isFinite(sec) && sec > 0) {
          setLockForSeconds(sec);
        }
      }
    }

    // Continue countdown on refresh if lock exists
    runCountdown();

    // If user changes email, run countdown for that email key
    if (emailInput) {
      emailInput.addEventListener('input', function () {
        runCountdown();
      });
    }

    // Block submit while locked (capture phase)
    if (loginForm) {
      loginForm.addEventListener('submit', function (e) {
        const raw = localStorage.getItem(getStorageKey());
        if (!raw) return;

        const until = parseInt(raw, 10);
        if (!Number.isFinite(until)) return;

        if (Date.now() < until) {
          e.preventDefault();
          e.stopImmediatePropagation();
          lockUI();
        }
      }, true);
    }

    /* =========================================================
       5) FORM SUBMIT LOADING + reCAPTCHA
          - does nothing if locked
    ========================================================= */
    if (loginForm && submitBtn && btnText && spinner) {
      loginForm.addEventListener('submit', async function (e) {
        if (localStorage.getItem(getStorageKey())) {
          return;
        }

        e.preventDefault();

        btnText.textContent = 'Signing In...';
        spinner.style.display = 'block';
        submitBtn.disabled = true;

        await refreshRecaptchaToken();

        this.submit();
      });
    }
  });
  </script>
</body>
</html>
