@extends('layouts.auth')

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

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

  {{-- Tombol Back ke Landing Page --}}
  <a href="{{ url('/') }}" class="btn btn-outline-secondary mb-3">
    ← Kembali ke Landing Page
  </a>
  
  <form method="POST" action="{{ route('login.siswa') }}">
    @csrf
    <div class="mb-3">
      <label class="form-label">NISN</label>
      <input type="text" name="nisn" class="form-control" required>
    </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" required>
        <button type="button" class="btn btn-outline-secondary" id="togglePassword">
          👁️
        </button>
      </div>
    </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