<x-guest-layout>

  <x-auth-session-status class="mb-4" :status="session('status')" />

  @if (session('show_verify_msg'))
    <div class="mb-4 p-4 bg-blue-50 border-l-4 border-blue-500 text-blue-700 rounded-r-lg shadow-sm flex items-center gap-3">
      <i class="fas fa-info-circle text-lg"></i>
      <p class="text-sm font-medium">{{ session('show_verify_msg') }}</p>
    </div>
  @endif

  <form method="POST" action="{{ route('login') }}">
    @csrf

    <div>
      <label for="email" class="block text-sm font-medium text-gray-700">
        Email
      </label>

      <input id="email" type="email" name="email" value="{{ old('email') }}" required
        class="mt-1 w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#7ebc12] focus:border-[#7ebc12] focus:outline-none">

      <x-input-error :messages="$errors->get('email')" class="mt-2" />
    </div>

    <div class="mt-4">
      <div class="flex items-center justify-between">
          <label for="password" class="block text-sm font-medium text-gray-700">
              Password
          </label>
          @if (Route::has('password.request'))
              <a class="text-xs text-gray-500 hover:text-gray-800 transition" href="{{ route('password.request') }}">
                  Lupa Password?
              </a>
          @endif
      </div>

      <div class="relative mt-1">
        <input id="password" type="password" name="password" required
          class="w-full px-3 py-2 pr-10 border rounded-lg focus:ring-2 focus:ring-[#7ebc12] focus:border-[#7ebc12] focus:outline-none">
        
        <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 focus:outline-none">
          <i class="fas fa-eye" id="eyeIcon"></i>
        </button>
      </div>

      <x-input-error :messages="$errors->get('password')" class="mt-2" />
    </div>

    <div class="flex items-center justify-end mt-4">
      <button type="submit"
        class="w-full bg-[#7ebc12] text-white py-2 px-4 rounded-lg font-semibold hover:bg-[#6aa010] transition shadow-md">
        Masuk
      </button>
    </div>

    <div class="mt-4 text-center">
      <p class="text-sm text-gray-600">Belum punya akun? 
        <a href="{{ route('register') }}" class="text-[#7ebc12] font-semibold hover:underline">Daftar Sekarang</a>
      </p>
    </div>

    <div class="mt-6 border-t pt-4 text-center">
      <a href="{{ url('/') }}" class="text-sm text-gray-500 hover:text-gray-800 transition flex items-center justify-center gap-2">
        <i class="fas fa-arrow-left text-xs"></i> Kembali ke Landing-Page
      </a>
    </div>

  </form>

  @if (session('verified_success'))
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        Swal.fire({
          icon: 'success',
          title: 'Email Berhasil Diverifikasi!',
          text: 'Akun Anda telah aktif. Mengalihkan ke Dashboard dalam 3 detik...',
          showConfirmButton: false,
          timer: 3000,
          timerProgressBar: true,
          allowOutsideClick: false,
          didOpen: () => {
            const userRole = "{{ auth()->user() ? auth()->user()->role : '' }}";
            const targetUrl = userRole === 'admin' ? "{{ route('admin.dashboard') }}" : "{{ route('user.dashboard') }}";

            setTimeout(() => {
              window.location.href = targetUrl;
            }, 3000);
          }
        });
      });
    </script>
  @endif

  @if (session('reset_success'))
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        Swal.fire({
          icon: 'success',
          title: 'Update Berhasil!',
          text: "{{ session('reset_success') }}",
          confirmButtonColor: '#7ebc12',
          confirmButtonText: 'Kembali Ke Login'
        });
      });
    </script>
  @endif

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const passwordInput = document.getElementById("password");
      const toggleButton = document.getElementById("togglePassword");
      const eyeIcon = document.getElementById("eyeIcon");

      toggleButton.addEventListener("click", function () {
        if (passwordInput.type === "password") {
          passwordInput.type = "text";
          eyeIcon.classList.remove("fa-eye");
          eyeIcon.classList.add("fa-eye-slash");
        } else {
          passwordInput.type = "password";
          eyeIcon.classList.remove("fa-eye-slash");
          eyeIcon.classList.add("fa-eye");
        }
      });
    });
  </script>

</x-guest-layout>