@extends('layouts.auth')

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

@section('content')
<div class="card p-4 shadow" style="width: 400px;">
  <h4 class="text-center mb-4 fw-bold text-primary">Login Guru</h4>

    {{-- Tombol Back ke Landing Page --}}
  <a href="{{ url('/') }}" class="btn btn-outline-secondary mb-3">
    ← Kembali ke Landing Page
  </a>

  {{-- Alert Error --}}
  @if($errors->any())
    <div class="alert alert-danger">
      {{ $errors->first() }}
    </div>
  @endif

  <form method="POST" action="{{ route('guru.login.submit') }}">
    @csrf
    
    <div class="mb-3">
      <label class="form-label">NIP</label>
      <input type="text" name="nip" class="form-control @error('nip') is-invalid @enderror" 
             value="{{ old('nip') }}" required>
      @error('nip')
        <div class="invalid-feedback">{{ $message }}</div>
      @enderror
    </div>

    <div class="mb-3 position-relative">
      <label class="form-label">Password</label>
      <div class="input-group">
        <input type="password" name="password" id="password" 
               class="form-control @error('password') is-invalid @enderror" required>
        <button type="button" class="btn btn-outline-secondary" id="togglePassword">
          👁️
        </button>
      </div>
      @error('password')
        <div class="invalid-feedback d-block">{{ $message }}</div>
      @enderror
    </div>

    {{-- Remember Me --}}
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" name="remember" id="remember">
      <label class="form-check-label" for="remember">
        Remember Me
      </label>
    </div>

    <button type="submit" class="btn btn-primary w-100">Masuk</button>
  </form>
</div>

{{-- Script show/hide password --}}
<script>
document.getElementById('togglePassword').addEventListener('click', function() {
  const password = document.getElementById('password');
  const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
  password.setAttribute('type', type);
  this.textContent = type === 'password' ? '👁️' : '🙈';
});
</script>
@endsection