<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>MagangTime - Login</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css" rel="stylesheet"/>
</head>
<body class="bg-light min-vh-100">
  <div class="d-flex align-items-center justify-content-center min-vh-100">
    <div class="bg-white rounded-4 shadow-lg overflow-hidden row gx-0 mx-3" style="max-width: 900px;">
      
      <!-- LEFT: FORM -->
      <div class="col-md-6 d-flex flex-column align-items-center justify-content-center p-4">
        <div class="text-center mb-4">
          <h2 class="text-success text-opacity-75 fw-bold fs-2 mb-3">SELAMAT DATANG!</h2>
          <p class="text-muted fs-5">Pantau dan catat kehadiran magang Anda</p>
        </div>

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

        <form method="POST" action="{{ route('login') }}" class="w-100" style="max-width: 350px;">
          @csrf

          <div class="mb-3">
            <input
              type="text"
              name="username"
              class="form-control form-control-lg rounded-pill px-4"
              placeholder="Username"
              required
            />
          </div>

          <div class="mb-4 position-relative">
            <input
              type="password"
              id="password"
              name="password"
              class="form-control form-control-lg rounded-pill px-4 pe-5"
              placeholder="Password"
              required
            />
            <button
              type="button"
              class="btn position-absolute top-50 end-0 translate-middle-y me-2 p-0 border-0 bg-transparent"
              onclick="togglePassword()"
            >
              <i id="toggleIcon" class="bi bi-eye text-muted fs-4 me-2"></i>
            </button>
          </div>

          <button
            type="submit"
            class="btn btn-success bg-opacity-75 btn-lg w-100 rounded-pill fw-semibold"
          >
            LOGIN
          </button>
        </form>
      </div>

      
     <!-- RIGHT: ILLUSTRATION -->
      <div class="col-md-6 d-flex flex-column align-items-center justify-content-center p-4" 
     style="background: linear-gradient(135deg, #28a745, #20c997);">
  <img
    src="{{ asset('images/girl.png') }}"
    alt="Girl"
    class="img-fluid mb-3"
    style="max-width: 90%;"
  />
  <p class="text-center text-white">
    Tingkatkan keteraturan dan kemudahan pencatatan presensi Anda. 
    Manajemen kehadiran jadi lebih mudah dengan <strong>Aplikasi MagangTime</strong>.
  </p>
</div>

  <script>
  function togglePassword() {
    const pwd = document.getElementById('password');
    const icon = document.getElementById('toggleIcon');

    if (pwd.type === 'password') {
      pwd.type = 'text';
      icon.className = 'bi bi-eye-slash text-muted fs-4 me-2';
    } else {
      pwd.type = 'password';
      icon.className = 'bi bi-eye text-muted fs-4 me-2';
    }
  }
</script>

</body>
</html>