@extends('layouts.auth')

@section('title', 'Login Siswa — E-Learning RPL')

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

<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
<div class="shape shape-5"></div>
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>

<div class="page-wrap">

  {{-- LEFT --}}
  <div class="left-panel">
    <div class="left-logo">
      <img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo SMK">
    </div>
    <div class="school-tag">SMK Negeri 1 Tapen</div>
    <div class="left-welcome">
      Selamat<br>Datang!
      <span>Rekayasa Perangkat Lunak</span>
    </div>
    <div class="left-divider"></div>
    <p class="left-desc">
      Akses materi, kumpulkan tugas, ikuti challenge, dan bersaing di leaderboard kelas.
    </p>
    <a href="{{ route('landing-page') }}" class="btn-learn">Pelajari Platform</a>
  </div>

  {{-- RIGHT: Form Card --}}
  <div>
    <div class="form-card">

      <div class="card-title-wrap">
        <div class="role-badge"><span class="badge-dot"></span>Portal Siswa</div>
        <div class="card-title">Sign In</div>
        <div class="title-underline"></div>
      </div>

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

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

        <div class="field-group">
          <label class="field-label">NISN</label>
          <input type="text" name="nisn" id="field-identity" class="field-input"
            placeholder="Masukkan NISN" required
            value="{{ old('nisn') }}" autocomplete="username">
        </div>

        <div class="field-group">
          <label class="field-label">Password</label>
          <div class="field-wrap">
            <input type="password" name="password" class="field-input password-input"
              placeholder="Masukkan password" required autocomplete="current-password">
            <button type="button" class="toggle-password" aria-label="Lihat password">
              <img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
            </button>
          </div>
        </div>

        <div class="remember-row">
          <input type="checkbox" class="remember-check" name="remember" id="remember"
            {{ old('remember') ? 'checked' : '' }}>
          <label class="remember-text" for="remember">Ingat saya</label>
        </div>

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

      <hr class="card-divider">

      <div class="other-portals">
        <span>Login sebagai</span>
        <a href="{{ route('guru.login') }}">Guru</a>
        <span>·</span>
        <a href="{{ route('admin.login') }}">Admin</a>
      </div>

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

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const identityInput = document.getElementById('field-identity');
  const rememberCheck = document.getElementById('remember');
  const form          = document.getElementById('login-form');
  const toggleBtn     = document.querySelector('.toggle-password');
  const passwordInput = document.querySelector('.password-input');
  const eyeIcon       = toggleBtn?.querySelector('img');
  const STORAGE_KEY   = 'remember_nisn';

  // Auto-fill dari localStorage jika tidak ada old() value
  if (!identityInput.value) {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
      identityInput.value = saved;
      rememberCheck.checked = true;
    }
  }

  // Simpan / hapus saat submit
  form.addEventListener('submit', function () {
    if (rememberCheck.checked) {
      localStorage.setItem(STORAGE_KEY, identityInput.value);
    } else {
      localStorage.removeItem(STORAGE_KEY);
    }
  });

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

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