@extends('layouts.app')

@section('content')
    <div class="space-y-6">
        <!-- Header with Back Button -->
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
                <a href="{{ route('admin.students.index') }}" class="btn-icon-slate">
                    <span class="material-icons-round">arrow_back</span>
                </a>
                <div>
                    <h1 class="text-3xl font-black text-slate-900">Student Profile</h1>
                    <p class="text-slate-500 mt-1">Detailed academic and personal information</p>
                </div>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('admin.students.edit', $student) }}" class="btn-primary">
                    <span class="material-icons-round text-sm">edit</span>
                    <span>Edit Profile</span>
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Student Sidebar Info -->
            <div class="space-y-6">
                <div class="glass-card p-6 text-center">
                    <div
                        class="w-24 h-24 rounded-2xl bg-gradient-to-br from-brand-primary to-brand-secondary flex items-center justify-center text-white shadow-lg mx-auto mb-4">
                        <span class="text-4xl font-black">{{ strtoupper(substr($student->name, 0, 1)) }}</span>
                    </div>
                    <h2 class="text-xl font-black text-slate-900">{{ $student->name }}</h2>
                    <p class="text-sm font-bold text-slate-400 mt-1">{{ $student->student_id }}</p>

                    <div class="mt-6 pt-6 border-t border-slate-100 text-left space-y-4">
                        <div>
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Email
                                Address</label>
                            <p class="text-sm font-bold text-slate-700 mt-1">{{ $student->email }}</p>
                        </div>
                        <div>
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Date of
                                Birth</label>
                            <p class="text-sm font-bold text-slate-700 mt-1">
                                {{ \Carbon\Carbon::parse($student->dob)->format('d M, Y') }}</p>
                        </div>
                        <div>
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Member
                                Since</label>
                            <p class="text-sm font-bold text-slate-700 mt-1">{{ $student->created_at->format('d M, Y') }}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Credit Limits Card -->
                <div class="glass-card p-6">
                    <h3 class="text-sm font-black text-slate-800 uppercase tracking-wider mb-6">Credit Limits</h3>

                    <div class="space-y-6">
                        <!-- Semester Credits -->
                        <div>
                            <div class="flex justify-between items-end mb-2">
                                <span class="text-xs font-bold text-slate-500">Current Semester</span>
                                <span class="text-sm font-black text-brand-primary">{{ $totalCreditsEnrolled }} /
                                    {{ $semesterCreditLimit }}</span>
                            </div>
                            <div class="h-2 bg-slate-100 rounded-full overflow-hidden">
                                @php
                                    $semPercent = ($totalCreditsEnrolled / $semesterCreditLimit) * 100;
                                    $semColor = $semPercent > 90 ? 'bg-rose-500' : ($semPercent > 70 ? 'bg-amber-500' : 'bg-brand-primary');
                                @endphp
                                <div class="{{ $semColor }} h-full transition-all duration-1000"
                                    style="width: {{ min($semPercent, 100) }}%"></div>
                            </div>
                        </div>

                        <!-- Total Credits -->
                        <div>
                            <div class="flex justify-between items-end mb-2">
                                <span class="text-xs font-bold text-slate-500">Total Course Credits</span>
                                <span class="text-sm font-black text-slate-800">{{ $totalCreditsEnrolled }} /
                                    {{ $totalCreditLimit }}</span>
                            </div>
                            <div class="h-2 bg-slate-100 rounded-full overflow-hidden">
                                @php
                                    $totalPercent = ($totalCreditsEnrolled / $totalCreditLimit) * 100;
                                @endphp
                                <div class="bg-slate-800 h-full transition-all duration-1000"
                                    style="width: {{ min($totalPercent, 100) }}%"></div>
                            </div>
                            <p class="text-[10px] text-slate-400 mt-2 font-medium italic">* Estimated progress based on
                                current enrollment</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Academic Details -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Academic Status Card -->
                <div class="glass-card p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="p-4 rounded-2xl bg-blue-50/50 border border-blue-100">
                        <label class="text-[10px] font-black text-blue-400 uppercase tracking-widest">Department</label>
                        <p class="text-lg font-black text-slate-800 mt-1">{{ $student->department->name ?? 'N/A' }}</p>
                        <p class="text-[10px] font-bold text-blue-500 mt-1">{{ $student->department->code ?? '' }}
                            Engineering</p>
                    </div>
                    <div class="p-4 rounded-2xl bg-purple-50/50 border border-purple-100">
                        <label class="text-[10px] font-black text-purple-400 uppercase tracking-widest">Current
                            Semester</label>
                        <p class="text-lg font-black text-slate-800 mt-1">{{ $student->semester->name ?? 'N/A' }}</p>
                        <p class="text-[10px] font-bold text-purple-500 mt-1">Academic Year {{ date('Y') }}</p>
                    </div>
                </div>

                <!-- Subject Enrollment -->
                <div class="glass-card p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-black text-slate-800">Enrolled Subjects</h3>
                        <span
                            class="px-3 py-1 rounded-full bg-slate-100 text-[10px] font-black text-slate-500 uppercase tracking-wider">
                            {{ $enrolledSubjects->count() }} Subjects
                        </span>
                    </div>

                    @if($enrolledSubjects->isEmpty())
                        <div class="text-center py-12 bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200">
                            <span class="material-icons-round text-5xl text-slate-300 mb-4">auto_stories</span>
                            <p class="text-slate-500 font-bold">No subjects enrolled yet for this semester.</p>
                            <p class="text-xs text-slate-400 mt-1">Subject allocation is pending for this student.</p>
                        </div>
                    @else
                        <div class="space-y-4">
                            @foreach($enrolledSubjects as $subject)
                                <div
                                    class="flex items-center gap-4 p-4 rounded-2xl border border-slate-100 hover:border-brand-primary/20 hover:bg-slate-50/50 transition-all group">
                                    <div
                                        class="w-12 h-12 rounded-xl bg-white border border-slate-200 flex items-center justify-center text-brand-primary group-hover:scale-110 transition-transform shadow-sm">
                                        <span class="material-icons-round">menu_book</span>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-center gap-2">
                                            <h4 class="font-black text-slate-800 truncate">{{ $subject['name'] }}</h4>
                                            <span
                                                class="text-[10px] font-black text-slate-400 bg-slate-100 px-2 py-0.5 rounded uppercase">{{ $subject['code'] }}</span>
                                        </div>
                                        <div class="flex items-center gap-4 mt-1">
                                            <p class="text-xs text-slate-500 flex items-center gap-1">
                                                <span class="material-icons-round text-[14px]">person</span>
                                                {{ $subject['staff_name'] }}
                                            </p>
                                            <p
                                                class="text-[10px] text-slate-400 font-bold uppercase tracking-widest hidden sm:block">
                                                Enrolled on {{ $subject['allocated_at'] }}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-lg font-black text-brand-primary">{{ $subject['credits'] }}</p>
                                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Credits</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <!-- Additional Statistics (Optional Visual Polish) -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="glass-card p-5 border-l-4 border-l-emerald-500">
                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Attendance</p>
                        <p class="text-2xl font-black text-slate-800 mt-1">94%</p>
                    </div>
                    <div class="glass-card p-5 border-l-4 border-l-brand-primary">
                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Current GPA</p>
                        <p class="text-2xl font-black text-slate-800 mt-1">3.82</p>
                    </div>
                    <div class="glass-card p-5 border-l-4 border-l-amber-500">
                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Backlogs</p>
                        <p class="text-2xl font-black text-slate-800 mt-1">0</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection