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

<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />

  <title>Login</title>

  <!-- Google Fonts -->
  <link href="https://fonts.gstatic.com" rel="preconnect" />
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet" />

  <!-- Vendor CSS -->
  <link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet" />

  <style>
    body {
      font-family: 'Nunito', sans-serif;
      background: #f8f9fa;
    }

    .login-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .login-card {
      width: 100%;
      max-width: 400px;
      border-radius: 10px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
      background-color: #ffffff;
    }

    @media (max-width: 576px) {
      .login-card {
        padding: 1rem;
      }

      .login-card h5 {
        font-size: 1.25rem;
      }

      .login-card p {
        font-size: 0.875rem;
      }
    }
  </style>
</head>

<body>

  <main>
    <div class="container-fluid login-container">
      <div class="login-card p-4">

        <div class="text-center mb-4">
          <h5 class="card-title text-primary fw-bold mb-2">Login to Your Account</h5>
          <p class="text-muted small">Enter your email & password to login</p>
        </div>

        @if(session('error'))
        <div class="alert alert-danger">
          {{ session('error') }}
        </div>
        @endif

        <form method="POST" action="{{ route('login.post') }}" class="needs-validation" novalidate>
          @csrf

          <div class="mb-3">
            <label for="yourEmail" class="form-label">Email</label>
            <input type="email" name="email" class="form-control" id="yourEmail" required>
            <div class="invalid-feedback">Please enter your email.</div>
          </div>

          <div class="mb-3">
            <label for="yourPassword" class="form-label">Password</label>
            <input type="password" name="password" class="form-control" id="yourPassword" required>
            <div class="invalid-feedback">Please enter your password!</div>
          </div>

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

          <div class="text-center">
            <p class="small">Don't have an account? <a href="{{ route('register') }}">Create one</a></p>
          </div>
        </form>

      </div>
    </div>
  </main>

  <!-- Back to Top -->
  <a href="#" class="back-to-top d-flex align-items-center justify-content-center">
    <i class="bi bi-arrow-up-short"></i>
  </a>

  <!-- Vendor JS -->
  <script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
  <script>
    // Bootstrap validation script
    (() => {
      'use strict'
      const forms = document.querySelectorAll('.needs-validation')
      Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
    })()
  </script>
</body>

</html>
