@extends('layouts.auth')

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

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

<div class="page-wrap">

  {{-- LEFT: Info Panel --}}
  <div class="left-panel">
    <div class="left-accent"></div>

    <div class="school-logo">
      <img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo SMK">
    </div>

    <div class="left-tag">SMK Negeri 1 Tapen</div>

    <h1 class="left-title">
      Platform<br>
      <em>E-Learning</em><br>
      RPL
    </h1>

    <div class="left-school">Rekayasa Perangkat Lunak</div>

    <p class="left-desc">
      Akses materi, kumpulkan tugas, ikuti challenge, dan bersaing di leaderboard kelas.
    </p>

    <div class="stats-row">
      <div class="stat-item">
        <div class="stat-num">3</div>
        <div class="stat-label">Kelas RPL</div>
      </div>
      <div class="stat-item">
        <div class="stat-num">EXP</div>
        <div class="stat-label">Sistem Poin</div>
      </div>
      <div class="stat-item">
        <div class="stat-num">#1</div>
        <div class="stat-label">Leaderboard</div>
      </div>
    </div>
  </div>

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

        <div class="role-badge">
          <span class="badge-dot"></span>
          Portal Siswa
        </div>

        <div class="form-title">Masuk ke Akun</div>
        <div class="form-sub">Gunakan NISN kamu untuk login</div>

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

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

          <div class="field-group">
            <label class="field-label">NISN</label>
            <div class="field-wrap">
              <img src="{{ asset('icons/username.svg') }}" class="field-icon" alt="">
              <input type="text" name="nisn" class="field-input"
                placeholder="Masukkan NISN" required
                value="{{ old('nisn') }}" autocomplete="username">
            </div>
          </div>

          <div class="field-group">
            <label class="field-label">Password</label>
            <div class="field-wrap">
              <img src="{{ asset('icons/password.svg') }}" class="field-icon" alt="">
              <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 ke Dashboard</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>

</div>

<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