<x-guest-layout>
    <div class="mb-4 text-center">
        <h4 class="fw-bold text-primary">Daftar Akun {{ ucfirst($role) }}</h4>
        <p class="text-muted small">
            Silakan isi data diri lengkap untuk mendaftar.
        </p>
    </div>

    <form method="POST" action="{{ route('register') }}">
        @csrf

        <input type="hidden" name="role" value="{{ $role }}">

        <div class="mb-3">
            <label class="form-label">Nama Lengkap</label>
            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                value="{{ old('name') }}" required autofocus placeholder="Nama sesuai absen">
            @error('name')
            <div class="invalid-feedback fw-semibold">
                <i class="bi bi-exclamation-circle-fill me-1"></i>
                {{ $message }}
            </div>
            @enderror
        </div>

        <div class="mb-3">
            <label class="form-label">
                @if ($role == 'siswa')
                NISN (Nomor Induk Siswa)
                @else
                NIP / NIK Sekolah
                @endif
            </label>

            <input type="number" name="{{ $role == 'siswa' ? 'nisn' : 'nip' }}"
                class="form-control @error($role == 'siswa' ? 'nisn' : 'nip') is-invalid @enderror"
                value="{{ old($role == 'siswa' ? 'nisn' : 'nip') }}" required placeholder="Cth: 1234567890">

            @error($role == 'siswa' ? 'nisn' : 'nip')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label class="form-label">Email Aktif</label>
            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                value="{{ old('email') }}" required placeholder="contoh@gmail.com">

            <div class="form-text text-muted small">
                <i class="bi bi-bell me-1"></i>
                Notifikasi denda & peminjaman akan dikirim ke email ini.
            </div>

            @error('email')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <div class="input-group">
                <input id="password" class="form-control bg-body-tertiary @error('password') is-invalid @enderror"
                    type="password" name="password" required autocomplete="new-password" />
                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                    <i class="bi bi-eye-slash-fill"></i>
                </button>
            </div>
            @error('password')
            <div class="invalid-feedback fw-semibold">
                <i class="bi bi-exclamation-circle-fill me-1"></i>
                {{ $message }}
            </div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="password_confirmation" class="form-label">Konfirmasi Password</label>
            <div class="input-group">
                <input id="password_confirmation" class="form-control bg-body-tertiary" type="password"
                    name="password_confirmation" required autocomplete="new-password" />
                <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">
                Daftar
            </button>
        </div>

        {{-- Link Login dinamis --}}
        <p class="mt-4 text-center text-muted small">
            Sudah punya akun?
            <a href="{{ route('login', ['role' => $role]) }}" class="fw-semibold text-decoration-none">Masuk di
                sini</a>
        </p>
    </form>
</x-guest-layout>