@extends('public.layouts.public')

@section('title', 'Login Tracer Study - Universitas Cenderawasih')

@section('content')
<div class="max-w-md mx-auto px-4 py-12">
    <div class="max-w-md w-full bg-slate-900 border border-slate-800 rounded-3xl p-8 shadow-2xl space-y-6">
        
        <!-- Header -->
        <div class="text-center space-y-2">
            <img src="{{ asset('assets/images/uncen.ico') }}" alt="Logo UNCEN" class="w-16 h-16 mx-auto object-contain drop-shadow mb-2">
            <h2 class="text-2xl font-black text-white tracking-tight">Tracer Study Alumni</h2>
            <p class="text-slate-400 text-xs">Pusat Karir & Tracer Study — Universitas Cenderawasih</p>
        </div>

        @if ($errors->has('error'))
            <div class="alert alert-danger mb-4 p-4 rounded-2xl bg-rose-500/10 border border-rose-500/30 text-rose-400 text-xs font-semibold">
                <i class="fas fa-exclamation-circle me-1"></i> {{ $errors->first('error') }}
            </div>
        @endif

        @if ($errors->any() && !$errors->has('error'))
            <div class="alert alert-danger mb-4 p-4 rounded-2xl bg-rose-500/10 border border-rose-500/30 text-rose-400 text-xs font-semibold">
                <i class="fas fa-exclamation-circle me-1"></i> {{ $errors->first() }}
            </div>
        @endif

        <form action="{{ route('public.tracer.auth') }}" method="POST" class="space-y-5">
            @csrf

            <div>
                <label for="nim" class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-2">
                    <i class="fas fa-id-card text-indigo-400 me-1"></i> NIM / No. Alumni
                </label>
                <input type="text" id="nim" name="nim" value="{{ old('nim', $nim ?? '') }}" required autofocus placeholder="Masukkan NIM Anda (Contoh: 20181011016004)" class="w-full px-4 py-3.5 rounded-2xl bg-slate-950 border border-slate-800 text-white placeholder-slate-500 text-sm focus:outline-none focus:border-indigo-500 transition-all font-mono">
                <small class="text-slate-500 text-[11px] mt-1 block">Masukkan NIM saat terdaftar sebagai mahasiswa UNCEN.</small>
            </div>

            <div>
                <label for="tanggal_lahir" class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-2">
                    <i class="fas fa-calendar-alt text-indigo-400 me-1"></i> Tanggal Lahir (Password Verifikasi)
                </label>
                <input type="date" id="tanggal_lahir" name="tanggal_lahir" value="{{ old('tanggal_lahir') }}" required class="w-full px-4 py-3.5 rounded-2xl bg-slate-950 border border-slate-800 text-white placeholder-slate-500 text-sm focus:outline-none focus:border-indigo-500 transition-all" style="color-scheme: dark;">
                <small class="text-slate-500 text-[11px] mt-1 block">Format: Tanggal / Bulan / Tahun Kelahiran Anda.</small>
            </div>

            <button type="submit" class="w-full py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-extrabold text-sm transition-all shadow-xl shadow-indigo-600/30 flex items-center justify-center gap-2 cursor-pointer">
                <i class="fas fa-sign-in-alt"></i> Verifikasi & Mulai Isi Tracer
            </button>
        </form>

        <div class="mt-6 pt-6 border-t border-slate-800 text-center">
            <a href="{{ route('public.home') }}" class="text-xs text-slate-400 hover:text-white transition-all">
                <i class="fas fa-arrow-left me-1"></i> Kembali ke Halaman Utama
            </a>
        </div>
    </div>
</div>
@endsection