<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>OctalTrade Admin Login</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    body {
      background-color: #0c0c0c;
      color: #fff;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Preloader Overlay */
    #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--color-navy);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
    }

    /* Loader Circles */
    .loader {
    display: flex;
    gap: 10px;
    }

    .loader span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4e00ff, #09afff);
    animation: bounce 1.4s infinite ease-in-out;
    }

    .loader span:nth-child(2) {
    animation-delay: 0.2s;
    }
    .loader span:nth-child(3) {
    animation-delay: 0.4s;
    }

    @keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.3);
        opacity: 1;
    }
    }

    /* Hide on load */
    .loaded #preloader {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    .login-card {
      background-color: #1a1a1a;
      border: 1px solid #333;
      padding: 2rem;
      border-radius: 1rem;
      width: 100%;
      max-width: 400px;
      box-shadow: 0 0 20px rgba(0,0,0,0.6);
    }
    .form-control {
      background-color: #111;
      border: 1px solid #444;
      color: #fff;
    }
    .form-control:focus {
      border-color: #0d6efd;
      box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
    }
    .btn-primary {
      background-color: #0d6efd;
      border-color: #0d6efd;
    }
    .btn-primary:hover {
      background-color: #0b5ed7;
    }
  </style>
</head>
<body>

    <div id="preloader">
        <div class="loader">
            <span></span>
            <span></span>
            <span></span>
        </div>  
    </div>

  <div class="login-card">
    <h4 class="mb-4 text-center">OctalTrade Admin Login</h4>

    <form id="adminLoginForm" method="POST" action="includes/admin_login.php">
      <div class="mb-3">
        <label for="adminEmail" class="form-label">Email address</label>
        <input type="email" class="form-control" id="adminEmail" name="email" required>
      </div>

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

      <div id="loginAlert" class="alert alert-danger d-none" role="alert"></div>
      <div id="loginSuccessAlert" class="alert alert-success d-none" role="alert"></div>

      <div class="d-grid">
        <button type="submit" class="btn btn-primary">Login</button>
      </div>
    </form>
  </div>

  <script>
    window.addEventListener("load", () => {
        document.body.classList.add("loaded");
    });
    const form = document.getElementById('adminLoginForm');
    const alertBox = document.getElementById('loginAlert');
    const alertSuccessBox = document.getElementById('loginSuccessAlert');

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      const formData = new FormData(form);

      fetch('/admin_login.php', {
        method: 'POST',
        body: formData
      })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
            alertSuccessBox.textContent = data.message || 'Authentication Successful!!';
            alertSuccessBox.classList.remove('d-none');

            setTimeout(()=> {
                window.location.href = '/admin-dashboard';
            }, 1500)
        } else {
          alertBox.textContent = data.message || 'Login failed';
          alertBox.classList.remove('d-none');
        }
      })
      .catch(() => {
        alertBox.textContent = 'Something went wrong.';
        alertBox.classList.remove('d-none');
      });
    });
  </script>

</body>
</html>
