@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">Student 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-pink-500"></span>
                Welcome back, {{ auth()->user()->name }}
            </p>
        </div>
        <span class="px-4 py-1.5 rounded-full bg-pink-50 text-pink-600 border border-pink-100 text-xs font-bold uppercase tracking-wider">
            Student
        </span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- Credit Overview Card -->
        <div class="stat-card p-6 bg-gradient-to-br from-brand-primary/5 to-brand-primary/10 border border-brand-primary/20">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-brand-primary/10 rounded-xl flex items-center justify-center">
                    <span class="material-icons-round text-brand-primary">school</span>
                </div>
                <div>
                    <p class="text-xs font-black text-slate-500 uppercase tracking-widest">Total Credits</p>
                    <p class="text-2xl font-black text-slate-800">{{ $user->getTotalCreditsUsed() }}<span class="text-sm text-slate-400"> / {{ $user->total_credit_limit }}</span></p>
                </div>
            </div>
            <div class="w-full bg-slate-200 rounded-full h-2">
                <div class="bg-brand-primary rounded-full h-2 transition-all" style="width: {{ ($user->getTotalCreditsUsed() / $user->total_credit_limit) * 100 }}%"></div>
            </div>
        </div>

        <!-- Semester Credits Card -->
        <div class="stat-card p-6 bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-200">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center">
                    <span class="material-icons-round text-emerald-600">event_note</span>
                </div>
                <div>
                    <p class="text-xs font-black text-slate-500 uppercase tracking-widest">Semester Credits</p>
                    <p class="text-2xl font-black text-slate-800">{{ $user->getCurrentSemesterCredits() }}<span class="text-sm text-slate-400"> / {{ $user->semester_credit_max }}</span></p>
                </div>
            </div>
            <p class="text-xs text-slate-600">Range: {{ $user->semester_credit_min }} - {{ $user->semester_credit_max }} credits</p>
        </div>

        <!-- Remaining Credits Card -->
        <div class="stat-card p-6 bg-gradient-to-br from-purple-50 to-pink-50 border border-purple-200">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
                    <span class="material-icons-round text-purple-600">trending_up</span>
                </div>
                <div>
                    <p class="text-xs font-black text-slate-500 uppercase tracking-widest">Remaining</p>
                    <p class="text-2xl font-black text-slate-800">{{ $user->getRemainingCredits() }}</p>
                </div>
            </div>
            <p class="text-xs text-slate-600">Credits available for future semesters</p>
        </div>
    </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-pink-50/50 rounded-full blur-3xl group-hover:bg-pink-100/50 transition-all duration-500"></div>
            
            <div class="relative z-10">
                <div class="w-16 h-16 bg-pink-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <span class="material-icons-round text-pink-600 text-3xl">event_available</span>
                </div>
                <h3 class="text-2xl font-black text-slate-800 mb-2">Subject & Faculty Selection</h3>
                <p class="text-slate-500 mb-8 max-w-sm">Select your subjects and preferred faculty members for this semester.</p>
                
                <div class="bg-pink-50/50 border border-pink-100/50 p-6 rounded-2xl mb-8 space-y-3">
                     <div class="flex justify-between items-center pb-2 border-b border-pink-100/30">
                         <span class="text-xs font-bold text-pink-400 uppercase tracking-widest">Department</span>
                         <span class="text-sm font-bold text-slate-700">{{ $user->department->name ?? 'N/A' }}</span>
                     </div>
                     <div class="flex justify-between items-center pb-2 border-b border-pink-100/30">
                         <span class="text-xs font-bold text-pink-400 uppercase tracking-widest">Semester</span>
                         <span class="text-sm font-bold text-slate-700">{{ $user->semester->name ?? 'N/A' }}</span>
                     </div>
                     <div class="flex justify-between items-center">
                         <span class="text-xs font-bold text-pink-400 uppercase tracking-widest">Status</span>
                         <span class="text-sm font-bold {{ $isAllocationComplete ? 'text-emerald-600' : 'text-amber-600' }}">
                             {{ $isAllocationComplete ? 'Allocations Complete' : 'Pending Selection' }}
                         </span>
                     </div>
                </div>

                <a href="{{ route('student.allocations.index') }}" class="btn-primary inline-flex items-center justify-center gap-2 w-full sm:w-auto">
                    {{ $isAllocationComplete ? 'Update Selections' : 'Start Selection' }} <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">My History</h3>
                <p class="text-slate-500 mb-8 max-w-sm">Review your previous semester records and successful consultation bookings.</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-pink-500 transition-colors">
                                    <span class="material-icons-round text-sm">check_circle</span>
                                </div>
                                <div>
                                    <p class="font-bold text-slate-700">{{ $alloc->subject->name }}</p>
                                    <p class="text-[10px] font-bold text-emerald-500 uppercase tracking-widest">Booked</p>
                                </div>
                            </div>
                            <span class="material-icons-round text-slate-300 group-hover/item:text-pink-500 transition-colors">chevron_right</span>
                        </div>
                    @empty
                        <div class="p-6 text-center text-slate-400 border border-dashed rounded-2xl bg-slate-50/30">
                            No recent bookings found.
                        </div>
                    @endforelse
                </div>

                <a href="{{ route('student.allocations.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 Full History
                </a>
            </div>
        </div>
    </div>
</div>
@endsection