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

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

  <!-- FontAwesome for icons -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

  <style>
    body {
      background-color: #007080; /* Teal blue background */
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .login-box {
      background-color: #fff;
      padding: 30px 20px;
      border-radius: 10px;
      width: 100%;
      max-width: 400px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      text-align: center;
    }

    .login-box img.logo {
      max-width: 180px;
      margin-bottom: 15px;
    }

    .form-control {
      border-radius: 5px;
    }

    .input-group-text {
      background-color: #f1f1f1;
    }

    .btn-primary, .btn-secondary {
      width: 100%;
      margin-top: 10px;
    }

    .register-link {
      margin-top: 15px;
      font-size: 0.9rem;
    }

    .register-link a {
      font-weight: bold;
      color: #000;
      text-decoration: none;
      background-color: yellow;
      padding: 3px 6px;
      border-radius: 3px;
    }

    .footer-text {
      font-size: 0.8rem;
      margin-top: 10px;
      color: #777;
    }
  </style>
</head>
<body>

<div class="login-box">
  <!-- Logo -->
  <img src="{{asset('/')}}images/new-img/logo.png" alt="Jeet Ka Adda Logo" class="logo">
   @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger mb-3">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
  <!-- Login Form -->
  <form method="POST" action="{{ route('login.store') }}">
        @csrf
    <!-- Username -->
    <div class="input-group mb-3">
      <span class="input-group-text"><i class="fa fa-user"></i></span>
      <input type="text" name="username" class="form-control" placeholder="Username" value="{{ old('username') }}">
    </div>

    <!-- Password -->
    <div class="input-group mb-3">
      <span class="input-group-text"><i class="fa fa-key"></i></span>
      <input type="password" name="password" class="form-control" placeholder="Password">
    </div>

    <!-- Buttons -->
    <button type="submit" class="btn btn-primary"><i class="fa fa-sign-in-alt"></i> Login</button>
    <button type="button" class="btn btn-secondary"><i class="fa fa-id-card"></i> Login with demo ID</button>

    <!-- Register -->
    <div class="register-link">
      DON'T HAVE AN ACCOUNT? <a href="{{url('/sign-up')}}">REGISTER NOW</a>
    </div>

    <!-- Footer -->
    <div class="footer-text mt-3">
      This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
    </div>
  </form>
</div>
<script>
    setTimeout(function () {
        let alerts = document.querySelectorAll('.alert');
        alerts.forEach(function(alert) {
            alert.style.transition = "opacity 0.5s ease";
            alert.style.opacity = "0";
            setTimeout(() => alert.remove(), 500);
        });
    }, 5000);
</script>
</body>
</html>
