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

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

        {{-- HEADER LOGIN --}}
        <div class="text-center mb-4">
            <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
                style="width: 70px; height: 70px;">
                <i class="bi bi-shield-lock-fill fs-1"></i>
            </div>
            <h3 class="fw-bold text-dark">Login {{ Str::title($role) }}</h3>
            <p class="text-muted small">
                @if ($role == 'siswa')
                Silakan masukkan <b>NISN</b> dan kata sandi.
                @else
                Silakan masukkan <b>NIP/NIK</b> dan kata sandi.
                @endif
            </p>
        </div>

        {{-- INPUT USERNAME (NISN/NIP) --}}
        <div class="mb-3">
            <label for="{{ $role == 'siswa' ? 'nisn' : 'nip' }}" class="form-label fw-semibold small">
                {{ $role == 'siswa' ? 'Nomor Induk Siswa Nasional (NISN)' : 'NIP/NIK' }}
            </label>
            <div class="input-group">
                @if ($role == 'siswa')
                <input id="nisn" class="form-control" type="text" name="nisn" placeholder="Masukan NISN" required autofocus />
                @else
                <input id="nip" class="form-control" type="text" name="nip" placeholder="Masukan NIP/NIK" required autofocus />
                @endif
            </div>
            {{-- Error Message --}}
            @if ($role == 'siswa')
            <x-input-error :messages="$errors->get('nisn')" class="mt-1 small text-danger" />
            @else
            <x-input-error :messages="$errors->get('nip')" class="mt-1 small text-danger" />
            @endif
        </div>

        {{-- INPUT PASSWORD --}}
        <div class="mb-4">
            <div class="d-flex justify-content-between align-items-center">
                <label for="password" class="form-label fw-semibold small">Kata Sandi</label>
            </div>
            <div class="input-group">
                <input id="password" class="form-control border-end-0" type="password"
                    name="password" placeholder="Masukan kata sandi" required />
                <button class="btn btn-light border border-start-0 text-muted" type="button" id="togglePassword">
                    <i class="bi bi-eye-slash-fill"></i>
                </button>
            </div>
            <x-input-error :messages="$errors->get('password')" class="mt-1 small text-danger" />
        </div>

        {{-- TOMBOL LOGIN --}}
        <div class="d-grid mb-4">
            <button type="submit" class="btn btn-primary py-2 fw-medium shadow-sm">
                Masuk
            </button>
        </div>

        {{-- BANTUAN / LUPA PASSWORD --}}
        <div class="bg-light p-3 rounded-3 text-center border border-dashed">
            <p class="text-muted small mb-1">Mengalami kendala login?</p>
            <a href="https://wa.me/6281234567890?text=Halo%20Admin,%20saya%20lupa%20kata%20sandi%20akun%20saya."
                target="_blank" class="text-decoration-none fw-bold text-success d-inline-flex align-items-center">
                <i class="bi bi-whatsapp me-1"></i> Hubungi Petugas via WA
            </a>
        </div>

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

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const togglePassword = document.querySelector('#togglePassword');
            const password = document.querySelector('#password');
            const icon = togglePassword.querySelector('i');

            if (togglePassword && password) {
                togglePassword.addEventListener('click', function(e) {
                    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                    password.setAttribute('type', type);

                    if (type === 'password') {
                        icon.classList.remove('bi-eye-fill');
                        icon.classList.add('bi-eye-slash-fill');
                    } else {
                        icon.classList.remove('bi-eye-slash-fill');
                        icon.classList.add('bi-eye-fill');
                    }
                });
            }
        });
    </script>
</x-guest-layout>