@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto space-y-8">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h2 class="text-3xl font-black text-slate-800 tracking-tight">Staff Dashboard</h2>
            <p class="text-slate-500 mt-1 flex items-center gap-2">
                <span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span>
                Welcome back, {{ auth()->user()->name }}
            </p>
        </div>
        <span class="px-4 py-1.5 rounded-full bg-indigo-50 text-indigo-600 border border-indigo-100 text-xs font-bold uppercase tracking-wider">
            Faculty Member
        </span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- New Section -->
        <div class="stat-card p-10 bg-white group">
            <div class="absolute -right-12 -top-12 w-48 h-48 bg-indigo-50/50 rounded-full blur-3xl group-hover:bg-indigo-100/50 transition-all duration-500"></div>
            
            <div class="relative z-10">
                <div class="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <span class="material-icons-round text-indigo-600 text-3xl">auto_stories</span>
                </div>
                <h3 class="text-2xl font-black text-slate-800 mb-2">Subject Allocation</h3>
                <p class="text-slate-500 mb-8 max-w-sm">Select your preferred subjects for the upcoming academic semester allocations.</p>
                
                <div class="bg-indigo-50/50 border border-indigo-100/50 p-6 rounded-2xl mb-8">
                    @if($isSelectionComplete)
                        <div class="flex items-center gap-3 mb-2">
                            <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                            <h4 class="font-bold text-emerald-900">Status: Selection Complete</h4>
                        </div>
                        <p class="text-sm text-emerald-600/80">You have already selected your subjects for this semester.</p>
                    @else
                        <div class="flex items-center gap-3 mb-2">
                            <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
                            <h4 class="font-bold text-amber-900">Status: Pending Selection</h4>
                        </div>
                        <p class="text-sm text-amber-600/80">Please complete your subject selection as soon as possible.</p>
                    @endif
                </div>

                <a href="{{ route('staff.subjects.index') }}" class="btn-primary inline-flex items-center justify-center gap-2 w-full sm:w-auto">
                    {{ $isSelectionComplete ? 'Modify Subjects' : 'Select Subjects' }} <span class="material-icons-round text-sm">east</span>
                </a>
            </div>
        </div>

        <!-- History Section -->
        <div class="stat-card p-10 bg-white group">
             <div class="absolute -right-12 -top-12 w-48 h-48 bg-slate-50 rounded-full blur-3xl group-hover:bg-slate-100/50 transition-all duration-500"></div>
            
            <div class="relative z-10">
                <div class="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <span class="material-icons-round text-slate-600 text-3xl">history</span>
                </div>
                <h3 class="text-2xl font-black text-slate-800 mb-2">Academic Records</h3>
                <p class="text-slate-500 mb-8 max-w-sm">Access your recent student allocations and historical records.</p>

                <div class="space-y-3 mb-8">
                    @forelse($recentAllocations as $alloc)
                        <div class="flex items-center justify-between p-4 bg-slate-50/50 border border-slate-100 rounded-2xl hover:bg-white hover:shadow-md transition-all group/item">
                            <div class="flex items-center gap-4">
                                <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-slate-400 group-hover/item:text-indigo-500 transition-colors">
                                    <span class="material-icons-round text-sm">person</span>
                                </div>
                                <div>
                                    <p class="font-bold text-slate-700">{{ $alloc->student->name }}</p>
                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ $alloc->subject->code }}</p>
                                </div>
                            </div>
                            <span class="text-xs text-slate-400">{{ $alloc->created_at->diffForHumans() }}</span>
                        </div>
                    @empty
                        <div class="p-6 text-center text-slate-400 border border-dashed rounded-2xl bg-slate-50/30">
                            No recent records found.
                        </div>
                    @endforelse
                </div>

                <a href="{{ route('staff.subjects.previous') }}" class="w-full sm:w-auto px-8 py-3 bg-white border border-slate-200 text-slate-600 font-bold rounded-2xl hover:bg-slate-50 transition-all inline-block text-center no-underline">
                    View All Records
                </a>
            </div>
        </div>
    </div>
</div>
@endsection