<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    <?= $title ?? 'Admin Login' ?>
  </title>

  <!-- Google Fonts & Font Awesome -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
 /* :root{
    --bg-dark: #0b0b0b;
    --panel-dark: #111111;
    --accent-green: #22c55e; 
    --muted-green: rgba(34,197,94,0.12);
    --glass: rgba(255,255,255,0.03);
    --shadow: rgba(0,0,0,0.6);
    --radius: 14px;
  } */
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: 'Roboto', sans-serif;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }
    .login-card {
      position: relative;
      z-index: 1;
      /* background: transparent url(assets/login-bg-1.png)
		repeat; */
          background:
      /* green diagonal stripes (pattern) */ repeating-linear-gradient(135deg, rgb(204 20 20 / 66%) 0px, rgba(34, 197, 94, 0.06) 8px, transparent 8px, #000000 16px), linear-gradient(180deg, rgb(240 0 0 / 2%), rgb(119 16 16 / 8%)), var(--panel-dark);
      border-radius: 12px;
      padding: 40px 35px;
      width: 380px;
      box-shadow: 2px 2px 10px rgb(255 255 255 / 50%), inset 2px 2px 2px rgb(255 255 255 / 50%);
      text-align: center;
    }

    /* .login-card {
      position: relative;
      z-index: 1; 
          background:  repeating-linear-gradient(135deg, rgb(204 20 20 / 66%) 0px, rgba(34, 197, 94, 0.06) 8px, transparent 8px, #000000 16px), linear-gradient(180deg, rgb(240 0 0 / 2%), rgb(119 16 16 / 8%)), var(--panel-dark);
      border-radius: 12px;
      padding: 40px 35px;
      width: 380px;
      box-shadow: 2px 2px 10px rgb(255 255 255 / 50%), inset 2px 2px 2px rgb(255 255 255 / 50%);
      text-align: center;
    } */

    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Arial', sans-serif;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgb(0 0 0), rgb(0 0 0), rgba(255, 255, 0, 0.2));
      background-size: 400% 400%;
      animation: gradientShift 15s ease infinite;
      position: relative;
      overflow: hidden;
    }

    body::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(rgb(255 255 255) 1px, #000000 2px), radial-gradient(rgb(255 255 255) 1px, #000000 1px);
      background-size: 40px 40px;
      z-index: 0;
      pointer-events: none;
    }



    .login-card h2 {
      margin-bottom: 25px;
      font-size: 28px;
      color: #ffffffff;
      letter-spacing: 1px;
    }

    .input-group {
      position: relative;
      margin-bottom: 20px;
    }

    .input-group input {
      width: 100%;
      padding: 12px 40px 12px 15px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 16px;
      transition: all 0.3s ease;
    }

    .input-group input:focus {
      border-color: #2575fc;
      box-shadow: 0 0 5px rgba(37, 117, 252, 0.5);
      outline: none;
    }

    .input-group i {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      font-size: 18px;
    }

    button {
      width: 100%;
      padding: 12px;
      border-radius: 8px;
      border: none;
      background: #fc2525;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    button:hover {
      background: #c51515ff;
    }

    .error {
      color: #ff4d4f;
      margin-bottom: 15px;
      font-weight: bold;
      background: #ffe5e5;
      padding: 10px;
      border-radius: 6px;
      text-align: left;
    }



    @media (max-width: 400px) {
      .login-card {
        width: 90%;
        padding: 30px 20px;
      }
    }

    .input-group i {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      font-size: 18px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>

  <div class="login-card">
    <h2>Admin Login</h2>
    <?php if (!empty($error)): ?>
    <div class="error">
      <?= $error ?>
    </div>
    <?php endif; ?>
    <form action="<?= BASE_URL ?>/login/submit" method="POST">
      <div class="input-group">
        <input type="text" name="username" placeholder="Username" required>
        <i class="fas fa-user"></i>
      </div>
      <div class="input-group">
        <input type="password" name="password" id="password" placeholder="Password" required>
        <i class="fas fa-eye" id="togglePassword" style="cursor: pointer;"></i>
      </div>

      <button type="submit">Login</button>
    </form>
  </div>

  <script>
    // Password toggle
    document.getElementById('togglePassword').addEventListener('click', function () {
      const passwordInput = document.getElementById('password');
      const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
      passwordInput.setAttribute('type', type);

      // Toggle eye / eye-slash icon
      this.classList.toggle('fa-eye');
      this.classList.toggle('fa-eye-slash');
    });

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let particlesArray;
    const mouse = {
      x: null,
      y: null,
      radius: (canvas.height / 80) * (canvas.width / 80)
    };

    window.addEventListener('mousemove', function (event) {
      mouse.x = event.x;
      mouse.y = event.y;
    });

    const colors = ['#ff4d4d', '#4dff4d', '#4d4dff', '#ffeb4d', '#ff4dff'];

    class Particle {
      constructor(x, y, directionX, directionY, size, color) {
        this.x = x;
        this.y = y;
        this.directionX = directionX;
        this.directionY = directionY;
        this.size = size;
        this.color = color;
      }

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
        ctx.fillStyle = this.color;
        ctx.fill();
      }

      update() {
        if (this.x > canvas.width || this.x < 0) this.directionX = -this.directionX;
        if (this.y > canvas.height || this.y < 0) this.directionY = -this.directionY;

        let dx = mouse.x - this.x;
        let dy = mouse.y - this.y;
        let distance = Math.sqrt(dx * dx + dy * dy);
        if (distance < mouse.radius + this.size) {
          if (mouse.x < this.x && this.x < canvas.width - this.size * 10) this.x += 10;
          if (mouse.x > this.x && this.x > this.size * 10) this.x -= 10;
          if (mouse.y < this.y && this.y < canvas.height - this.size * 10) this.y += 10;
          if (mouse.y > this.y && this.y > this.size * 10) this.y -= 10;
        }

        this.x += this.directionX;
        this.y += this.directionY;
        this.draw();
      }
    }

    function init() {
      particlesArray = [];
      let numberOfParticles = (canvas.height * canvas.width) / 9000;
      for (let i = 0; i < numberOfParticles; i++) {
        let size = (Math.random() * 5) + 1;
        let x = (Math.random() * (innerWidth - size * 2)) + size;
        let y = (Math.random() * (innerHeight - size * 2)) + size;
        let directionX = (Math.random() * 2) - 1;
        let directionY = (Math.random() * 2) - 1;
        let color = colors[Math.floor(Math.random() * colors.length)];
        particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
      }
    }

    function connect() {
      let opacityValue = 1;
      for (let a = 0; a < particlesArray.length; a++) {
        for (let b = a; b < particlesArray.length; b++) {
          let distance = ((particlesArray[a].x - particlesArray[b].x) ** 2) +
            ((particlesArray[a].y - particlesArray[b].y) ** 2);
          if (distance < (canvas.width / 7) * (canvas.height / 7)) {
            opacityValue = 1 - (distance / 20000);
            ctx.strokeStyle = 'rgba(255,255,255,' + opacityValue + ')';
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(particlesArray[a].x, particlesArray[a].y);
            ctx.lineTo(particlesArray[b].x, particlesArray[b].y);
            ctx.stroke();
          }
        }
      }
    }

    function animate() {
      requestAnimationFrame(animate);
      ctx.clearRect(0, 0, innerWidth, innerHeight);
      for (let i = 0; i < particlesArray.length; i++) {
        particlesArray[i].update();
      }

      connect();
    }

    // Initialize and animate
    init();
    animate();

    // Re-initialize on window resize
    window.addEventListener('resize', function () {
      canvas.width = innerWidth;
      canvas.height = innerHeight;
      mouse.radius = ((canvas.height / 80) * (canvas.width / 80));
      init();
    });

    // Mouse out event
    window.addEventListener('mouseout', function () {
      mouse.x = undefined;
      mouse.y = undefined;
    });
  </script>
</body>

</html>