@extends('layouts.app')

@section('content')
    <div class="flex items-center justify-center min-h-[85vh]">
        <div class="w-full max-w-md relative">
            <div
                class="glass-panel p-8 md:p-10 rounded-3xl relative z-10 border border-white/50 shadow-xl shadow-brand-primary/10">
                <div class="text-center mb-8">
                    <div
                        class="w-16 h-16 bg-gradient-to-br from-brand-primary to-brand-secondary rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-brand-primary/20 transition-all hover:scale-105">
                        <span class="material-icons-round text-white text-3xl">badge</span>
                    </div>
                    <h3 class="text-[10px] font-black uppercase tracking-[0.2em] text-brand-primary mb-2">Faculty Management
                        Portal</h3>
                    <h2 class="text-3xl font-black text-slate-800 mb-1 tracking-tight">Staff Login</h2>
                </div>

                <form method="POST" action="{{ route('staff.login') }}" class="space-y-5">
                    @csrf
                    <div>
                        <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Staff
                            ID</label>
                        <div class="relative group">
                            <span
                                class="absolute left-4 top-3.5 text-slate-400 group-focus-within:text-brand-primary transition-colors">
                                <span class="material-icons-round text-sm">badge</span>
                            </span>
                            <input type="text" name="staff_id"
                                class="form-input pl-10 bg-white border-slate-200 focus:border-brand-primary focus:ring-brand-primary/10 text-slate-800"
                                placeholder="STF001" required autofocus>
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Date of
                            Birth</label>
                        <div class="relative group">
                            <span
                                class="absolute left-4 top-3.5 text-slate-400 group-focus-within:text-brand-primary transition-colors">
                                <span class="material-icons-round text-sm">calendar_today</span>
                            </span>
                            <input type="date" name="dob"
                                class="form-input pl-10 bg-white border-slate-200 focus:border-brand-primary focus:ring-brand-primary/10 text-slate-500"
                                required>
                        </div>
                        @error('staff_id') <span class="text-red-500 text-xs mt-1 block">Credentials do not match our
                        records.</span> @enderror
                    </div>

                    <div class="flex justify-center">
                        <button type="submit" class="btn-primary w-full md:w-auto py-4 px-12 text-base">
                            Access Dashboard
                        </button>
                    </div>
                    <div class="mt-8 pt-6 border-t border-slate-100 flex flex-col items-center gap-4">
                        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">Confused about the workflow?
                        </p>
                        <a href="{{ route('demo') }}"
                            class="flex items-center gap-2 text-sm font-black text-brand-primary hover:text-brand-secondary transition-colors underline decoration-2 underline-offset-4">
                            <span class="material-icons-round text-lg">play_circle</span>
                            View Workflow Guide
                        </a>
                    </div>
                </form>

                <div class="mt-8 text-center border-t border-slate-100 pt-6">
                    <a href="{{ url('/') }}"
                        class="inline-flex items-center text-sm font-bold text-slate-400 hover:text-brand-primary transition-colors group">
                        <span
                            class="material-icons-round text-sm mr-2 group-hover:-translate-x-1 transition-transform">arrow_back</span>
                        Back to Portal Home
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection