@extends('layouts.auth')

@section('title', 'Login Guru')

@section('content')
<link rel="stylesheet" href="{{ asset('css/login-admin.css') }}">

<section id="signin" class="signin-section">
  <div class="signin-container">
    <h1 class="signin-title">SIGN IN GURU</h1>

    @if ($errors->any())
      <div id="toast-error" class="toast-error">
        {{ $errors->first() }}
      </div>
    @endif

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

      <div class="form-card">

        {{-- NIP --}}
        <div class="input-group">
          <img src="{{ asset('icons/username.svg') }}" class="input-icon">
          <input type="text" name="nip"
                 class="form-input"
                 placeholder="NIP"
                 value="{{ old('nip') }}"
                 required>
        </div>

        {{-- Password --}}
        <div class="input-group password-wrapper">
          <img src="{{ asset('icons/password.svg') }}" class="input-icon">

          <input type="password"
                 name="password"
                 class="form-input password-input"
                 placeholder="Password"
                 required>

          <button type="button" class="toggle-password">
            <img src="{{ asset('icons/show.svg') }}" class="eye-icon">
          </button>
        </div>

        {{-- Remember --}}
        <div class="remember-wrapper">
          <label class="remember-label">
            <input type="checkbox" name="remember">
            <span>Remember me</span>
          </label>
        </div>

      </div>

      <button type="submit" class="submit-btn">
        SIGN IN
      </button>
    </form>

    <a href="{{ route('landing-page') }}" class="back-link">
      ← Kembali ke Landing Page
    </a>

  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const toggleBtn = document.querySelector('.toggle-password');
  const passwordInput = document.querySelector('.password-input');
  const eyeIcon = toggleBtn.querySelector('img');

  toggleBtn.addEventListener('click', () => {
    const isVisible = passwordInput.type === 'text';
    passwordInput.type = isVisible ? 'password' : 'text';
    eyeIcon.src = isVisible
      ? "{{ asset('icons/show.svg') }}"
      : "{{ asset('icons/hide.svg') }}";
  });

  const toast = document.getElementById('toast-error');
  if (toast) {
    setTimeout(() => toast.remove(), 4000);
  }
});
</script>

@endsection