<!-- Pastikan Tailwind dan Flowbite sudah di-load -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Login Form</title>
    <!-- External scripts and styles -->
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <!-- Vite for CSS compilation -->
    @vite('resources/css/app.css')
    
    <title>Home</title>
    
    <!-- Font Import -->
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
    
    <!-- Alpine.js for interactivity -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    
    <section class="bg-cover bg-center min-h-screen flex items-center justify-center" style="background-image: url('/assets/img/illustrations/how-it-works.png');">
  <div class="bg-white/90 backdrop-blur-md p-8 rounded-2xl shadow-md w-full max-w-md">
    <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Login Sistem SPK</h2>

    <form action="{{ route('login') }}" method="POST" class="space-y-5">
      @csrf
      <!-- Username -->
      <div>
        <label for="username" class="block mb-1 text-sm text-gray-600">Username</label>
        <input type="text" id="username" name="username" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#56B56D]" required>
      </div>

      <!-- Password -->
      <div>
        <label for="password" class="block mb-1 text-sm text-gray-600">Password</label>
        <div class="relative">
          <input type="password" id="password" name="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#56B56D]" required>
          <button type="button" onclick="togglePassword()" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-600">
            <svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Tombol Login -->
      <div>
        <button type="submit" class="w-full bg-[#56B56D] hover:bg-[#4aa35f] text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
          Login
        </button>
      </div>
    </form>
    <!-- Tombol Kembali -->
    <div class="mt-4 text-left">
      <a href="{{ url('/') }}" class="inline-block px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition duration-200">
        ← Kembali
      </a>
    </div>
  </div>
</section>

<!-- Script untuk Toggle Password -->
<script>
  function togglePassword() {
    const passwordInput = document.getElementById("password");
    const eyeIcon = document.getElementById("eyeIcon");
    const isHidden = passwordInput.type === "password";

    passwordInput.type = isHidden ? "text" : "password";

    // Opsional: Ubah ikon jika ingin visual berbeda
    eyeIcon.innerHTML = isHidden
      ? `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.477 0-8.268-2.943-9.542-7a10.05 10.05 0 011.662-2.747M3 3l18 18" />
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 01-3 3 3 3 0 01-3-3 3 3 0 013-3 3 3 0 013 3z" />`
      : `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />`;
  }
</script>



</body>
</html>

