@extends('layouts.guest-siswa')

@section('content')

<div class="w-full max-w-md bg-white rounded-2xl shadow-2xl p-8">

    <!-- LOGO -->
    <div class="flex justify-center mb-4">
        <img
            src="{{ asset('images/logo_smk8.png') }}"
            alt="Logo SMK Negeri 8 Medan"
            class="h-20 object-contain"
            onerror="this.style.display='none'"
        >
    </div>

    <!-- HEADER -->
    <div class="text-center mb-6">
        <h1 class="text-2xl font-bold text-slate-800">
            Login Siswa
        </h1>
        <p class="text-sm text-slate-500 mt-1">
            LMS SMK Negeri 8 Medan
        </p>
    </div>

    <!-- ERROR -->
    @if ($errors->any())
        <div class="mb-4 p-3 rounded-lg
                    bg-red-50 border border-red-200
                    text-sm text-red-700">
            {{ $errors->first() }}
        </div>
    @endif

    <!-- FORM -->
    <form method="POST"
          action="{{ route('login') }}"
          class="space-y-4">
        @csrf

        <!-- NISN -->
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">
                NISN
            </label>
            <input
                type="text"
                name="identifier"
                value="{{ old('identifier') }}"
                required
                autofocus
                placeholder="Masukkan NISN"
                class="w-full rounded-lg border-slate-300
                       focus:border-slate-500 focus:ring
                       focus:ring-slate-200"
            >
        </div>

        <!-- PASSWORD -->
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">
                Password
            </label>
            <input
                type="password"
                name="password"
                required
                placeholder="Masukkan password"
                class="w-full rounded-lg border-slate-300
                       focus:border-slate-500 focus:ring
                       focus:ring-slate-200"
            >
        </div>

        <!-- REMEMBER -->
        <div class="flex items-center text-sm">
            <input
                id="remember_me"
                type="checkbox"
                name="remember"
                class="rounded border-gray-300 text-slate-800"
            >
            <label for="remember_me" class="ml-2 text-slate-600">
                Ingat saya
            </label>
        </div>

        <!-- BUTTON -->
        <button
            type="submit"
            class="w-full mt-2
                   bg-slate-900 text-white
                   py-2.5 rounded-lg
                   font-semibold tracking-wide
                   hover:bg-slate-800 transition">
            MASUK
        </button>
    </form>

    <!-- FOOTER -->
    <div class="mt-6 text-center text-xs text-slate-400">
        © {{ date('Y') }} SMK Negeri 8 Medan
    </div>

</div>

@endsection