<x-guest-layout>
    @if ($errors->has('forbidden'))
        <div class="alert alert-danger d-flex align-items-center" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            <div>{{ $errors->first('forbidden') }}</div>
        </div>
    @endif

    <form method="POST" action="{{ route('login') }}">
        @csrf
        <input type="hidden" name="role" value="{{ $role }}">

        <div class="text-center mb-4">
            {{-- Judul dinamis --}}
            <h3 class="fw-bold text-primary">Login {{ Str::title($role) }}</h3>
            <p class="text-muted">
                @if ($role == 'siswa')
                    Masukan NISN dan kata sandi Anda.
                @else
                    Masukan NIP dan kata sandi Anda.
                @endif
            </p>
        </div>

        {{-- Form dinamis --}}
        @if ($role == 'siswa')
            <div class="mb-3">
                <label for="nisn" class="form-label">Nomor Induk Siswa Nasional (NISN)</label>
                <input id="nisn" class="form-control" type="text" name="nisn" required autofocus />
                <x-input-error :messages="$errors->get('nisn')" class="mt-2" /> 
            </div> 
        @else
            <div class="mb-3">
                <label for="nip" class="form-label">Nomor Induk Pegawai (NIP)</label>
                <input id="nip" class="form-control" type="text" name="nip" required autofocus />
                <x-input-error :messages="$errors->get('nip')" class="mt-2" /> 
            </div>
        @endif

        <div class="mb-3">
            <label for="password" class="form-label">Kata Sandi</label>
            <div class="input-group">
                <input id="password" class="form-control" type="password" name="password" required />
                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                    <i class="bi bi-eye-slash-fill"></i>
                </button>
            </div>
        </div>

        <div class="d-grid mt-4">
            <button type="submit" class="btn btn-primary">Masuk</button>
        </div>

        {{-- Link href untuk ke Register --}}
        <p class="mt-4 text-center text-muted small">
            @if ($role == 'siswa')
                Belum punya akun? 
                <a href="{{ route('register', ['role' => 'siswa']) }}" class="fw-semibold text-decoration-none">Daftar sebagai Siswa</a>
            @else
                Belum punya akun? 
                <a href="{{ route('register', ['role' => 'guru']) }}" class="fw-semibold text-decoration-none">Daftar sebagai Guru</a>
            @endif
        </p>

        <p class="mt-3 text-center text-muted small">
            Kembali ke <a href="/" class="fw-semibold text-decoration-none">halaman utama</a>.
        </p>
    </form>
</x-guest-layout>