@extends('Frontpage.Home.layout')

@section('title', 'Student Marks - Iqra Schools')

@section('content')
<div class="bg-slate-50 py-16 md:py-24 min-h-screen">
    <div class="container mx-auto px-4 max-w-5xl">
        
        <div class="text-center mb-12">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-50 text-blue-600 mb-4">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
            </div>
            <h1 class="text-3xl font-extrabold text-slate-800 tracking-tight">{{ __('Public Results Board') }}</h1>
            <p class="text-slate-500 mt-2 font-medium max-w-lg mx-auto">{{ __('Browse academic results by Class and Section. The most recently uploaded tests appear first.') }}</p>
        </div>

        <div class="space-y-6">
            @forelse($groupedExams as $className => $sections)
                <!-- Class Card -->
                <div id="class-{{ Str::slug($className) }}" class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden scroll-mt-24" x-data="{ classOpen: true }">
                    <button @click="classOpen = !classOpen" class="w-full px-6 py-5 flex items-center justify-between bg-white hover:bg-slate-50 transition-colors">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                            </div>
                            <h2 class="text-xl font-extrabold text-slate-800">{{ $className }}</h2>
                        </div>
                        <svg class="w-6 h-6 text-slate-400 transition-transform duration-300" :class="{ 'rotate-180': classOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    
                    <div x-show="classOpen" x-collapse>
                        <div class="p-6 pt-0 border-t border-slate-100">
                            
                            @foreach($sections as $sectionName => $exams)
                                <!-- Section Accordion -->
                                <div class="mt-6 border border-slate-200 rounded-2xl overflow-hidden" x-data="{ sectionOpen: false }">
                                    <button @click="sectionOpen = !sectionOpen" class="w-full px-5 py-4 flex items-center justify-between bg-slate-50 hover:bg-slate-100 transition-colors">
                                        <div class="flex items-center gap-3">
                                            <span class="px-3 py-1 bg-white text-blue-700 font-bold text-xs rounded-lg shadow-sm border border-slate-200">Sec: {{ $sectionName }}</span>
                                            <span class="text-xs font-bold text-slate-500 uppercase tracking-widest">{{ count($exams) }} Tests</span>
                                        </div>
                                        <svg class="w-5 h-5 text-slate-400 transition-transform duration-300" :class="{ 'rotate-180': sectionOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                    </button>

                                    <div x-show="sectionOpen" x-collapse>
                                        <div class="p-0 bg-white">
                                            <!-- Exams List -->
                                            <div class="divide-y divide-slate-100">
                                                @foreach($exams as $exam)
                                                    <div class="p-5" x-data="{ examOpen: false }">
                                                        
                                                        <!-- Exam Header -->
                                                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 cursor-pointer group" @click="examOpen = !examOpen">
                                                            <div class="flex-1">
                                                                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ $exam->exam_date->format('d M, Y') }}</div>
                                                                <h4 class="text-base font-bold text-slate-800 group-hover:text-blue-600 transition-colors">{{ $exam->title }}</h4>
                                                                <div class="text-xs font-semibold text-slate-500 mt-1 flex items-center gap-2">
                                                                    <span class="px-2 py-0.5 bg-slate-100 rounded text-slate-600">{{ $exam->subject }}</span>
                                                                    <span>•</span>
                                                                    <span>Tr. {{ $exam->teacher->name }}</span>
                                                                    <span>•</span>
                                                                    <span>Max Marks: {{ number_format($exam->max_marks, 0) }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="shrink-0 flex items-center gap-3">
                                                                @if($loop->first)
                                                                    <span class="px-2 py-1 bg-emerald-100 text-emerald-700 text-[10px] font-extrabold uppercase tracking-widest rounded-full animate-pulse">New</span>
                                                                @endif
                                                                <button class="text-sm font-bold text-blue-600 hover:text-blue-700 flex items-center gap-1">
                                                                    <span x-text="examOpen ? 'Hide Results' : 'View Results'"></span>
                                                                    <svg class="w-4 h-4 transition-transform duration-200" :class="{ 'rotate-180': examOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                                                </button>
                                                            </div>
                                                        </div>

                                                        <!-- Marks Table & Grid -->
                                                        <div x-show="examOpen" x-collapse class="mt-4 pt-4 border-t border-slate-100" x-data="{ viewMode: 'table' }">
                                                            @if($exam->marks->count() > 0)
                                                                
                                                                <!-- View Toggle & Summary Stats -->
                                                                <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                                                                    <div class="flex gap-2 sm:gap-4 text-[11px] sm:text-xs font-bold text-slate-500">
                                                                        <div class="px-3 py-1.5 bg-slate-50 rounded-lg border border-slate-100">Total Students: <span class="text-slate-700">{{ $exam->marks->count() }}</span></div>
                                                                        <div class="px-3 py-1.5 bg-slate-50 rounded-lg border border-slate-100">Avg Score: <span class="text-slate-700">{{ number_format($exam->marks->avg('marks_obtained'), 1) }}</span></div>
                                                                        @php $highest = $exam->marks->max('marks_obtained'); @endphp
                                                                        <div class="px-3 py-1.5 bg-slate-50 rounded-lg border border-slate-100">Top Score: <span class="text-emerald-600">{{ rtrim(rtrim(number_format($highest, 2), '0'), '.') }}</span></div>
                                                                    </div>
                                                                    <div class="flex bg-slate-100 p-1 rounded-lg shrink-0">
                                                                        <button @click="viewMode = 'table'" :class="{ 'bg-white shadow-sm text-blue-600': viewMode === 'table', 'text-slate-500 hover:text-slate-700': viewMode !== 'table' }" class="px-3 py-1.5 text-xs font-bold rounded-md transition-all flex items-center gap-1.5">
                                                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg> Table
                                                                        </button>
                                                                        <button @click="viewMode = 'grid'" :class="{ 'bg-white shadow-sm text-blue-600': viewMode === 'grid', 'text-slate-500 hover:text-slate-700': viewMode !== 'grid' }" class="px-3 py-1.5 text-xs font-bold rounded-md transition-all flex items-center gap-1.5">
                                                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg> Grid
                                                                        </button>
                                                                    </div>
                                                                </div>

                                                                <!-- Table View -->
                                                                <div x-show="viewMode === 'table'" class="overflow-x-auto rounded-xl border border-slate-200">
                                                                    <table class="w-full text-left text-sm whitespace-nowrap">
                                                                        <thead>
                                                                            <tr class="bg-slate-50 border-b border-slate-100 text-[10px] uppercase tracking-widest text-slate-500 font-bold">
                                                                                <th class="px-4 py-3 w-16 text-center">Rank</th>
                                                                                <th class="px-4 py-3">Student</th>
                                                                                <th class="px-4 py-3 text-right">Marks Obtained</th>
                                                                                <th class="px-4 py-3 w-32">Grade</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody class="divide-y divide-slate-100">
                                                                            @php
                                                                                // Sort by marks desc to assign ranks
                                                                                $sortedMarks = $exam->marks->sortByDesc('marks_obtained')->values();
                                                                            @endphp
                                                                            @foreach($sortedMarks as $index => $mark)
                                                                                @php
                                                                                    $percentage = ($exam->max_marks > 0) ? ($mark->marks_obtained / $exam->max_marks) * 100 : 0;
                                                                                    $gradeColor = 'text-blue-600 bg-blue-50';
                                                                                    $gradeText = 'Average';
                                                                                    if($percentage >= 90) { $gradeColor = 'text-emerald-600 bg-emerald-50'; $gradeText = 'Excellent'; }
                                                                                    elseif($percentage >= 75) { $gradeColor = 'text-cyan-600 bg-cyan-50'; $gradeText = 'Good'; }
                                                                                    elseif($percentage >= 50) { $gradeColor = 'text-amber-600 bg-amber-50'; $gradeText = 'Pass'; }
                                                                                    elseif($percentage < 35) { $gradeColor = 'text-rose-600 bg-rose-50'; $gradeText = 'Needs Work'; }
                                                                                    
                                                                                    $rank = $index + 1;
                                                                                @endphp
                                                                                <tr class="hover:bg-slate-50/50 transition-colors">
                                                                                    <td class="px-4 py-3 text-center">
                                                                                        @if($rank == 1)
                                                                                            <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-amber-100 text-amber-600 font-black text-xs">1</span>
                                                                                        @elseif($rank == 2)
                                                                                            <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-slate-200 text-slate-600 font-black text-xs">2</span>
                                                                                        @elseif($rank == 3)
                                                                                            <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-orange-100 text-orange-700 font-black text-xs">3</span>
                                                                                        @else
                                                                                            <span class="font-bold text-slate-400">{{ $rank }}</span>
                                                                                        @endif
                                                                                    </td>
                                                                                    <td class="px-4 py-3">
                                                                                        <div class="flex items-center gap-3">
                                                                                            <img src="{{ $mark->student->avatar_url }}" class="w-8 h-8 rounded-full bg-slate-100 border border-slate-200 object-cover" alt="Avatar">
                                                                                            <div>
                                                                                                <div class="font-bold text-slate-800">{{ $mark->student->first_name }} {{ $mark->student->surname }}</div>
                                                                                                <div class="text-[10px] text-slate-400 font-semibold uppercase">{{ $mark->student->login_id }}</div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </td>
                                                                                    <td class="px-4 py-3 text-right">
                                                                                        <span class="font-black text-slate-800 text-base">{{ rtrim(rtrim(number_format($mark->marks_obtained, 2), '0'), '.') }}</span>
                                                                                        <span class="text-xs font-bold text-slate-400">/ {{ number_format($exam->max_marks, 0) }}</span>
                                                                                    </td>
                                                                                    <td class="px-4 py-3">
                                                                                        <span class="px-2.5 py-1 rounded-lg text-[10px] font-extrabold uppercase tracking-widest {{ $gradeColor }}">{{ $gradeText }}</span>
                                                                                    </td>
                                                                                </tr>
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>

                                                                <!-- Grid View -->
                                                                <div x-show="viewMode === 'grid'" style="display: none;">
                                                                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                                                                        @foreach($sortedMarks as $index => $mark)
                                                                            @php
                                                                                $percentage = ($exam->max_marks > 0) ? ($mark->marks_obtained / $exam->max_marks) * 100 : 0;
                                                                                $gradeColor = 'text-blue-600 bg-blue-50';
                                                                                $gradeText = 'Average';
                                                                                $progressColor = 'bg-blue-500';
                                                                                if($percentage >= 90) { $gradeColor = 'text-emerald-600 bg-emerald-50'; $gradeText = 'Excellent'; $progressColor = 'bg-emerald-500'; }
                                                                                elseif($percentage >= 75) { $gradeColor = 'text-cyan-600 bg-cyan-50'; $gradeText = 'Good'; $progressColor = 'bg-cyan-500'; }
                                                                                elseif($percentage >= 50) { $gradeColor = 'text-amber-600 bg-amber-50'; $gradeText = 'Pass'; $progressColor = 'bg-amber-500'; }
                                                                                elseif($percentage < 35) { $gradeColor = 'text-rose-600 bg-rose-50'; $gradeText = 'Needs Work'; $progressColor = 'bg-rose-500'; }
                                                                                
                                                                                $rank = $index + 1;
                                                                            @endphp
                                                                            <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow relative">
                                                                                @if($rank <= 3)
                                                                                    <div class="absolute -top-2 -right-2 w-8 h-8 rounded-full shadow-sm flex items-center justify-center font-black text-sm {{ $rank == 1 ? 'bg-amber-100 text-amber-600' : ($rank == 2 ? 'bg-slate-200 text-slate-600' : 'bg-orange-100 text-orange-700') }}">
                                                                                        #{{ $rank }}
                                                                                    </div>
                                                                                @endif
                                                                                
                                                                                <div class="flex items-center gap-3 mb-4">
                                                                                    <img src="{{ $mark->student->avatar_url }}" class="w-10 h-10 rounded-full bg-slate-100 border border-slate-200 object-cover" alt="Avatar">
                                                                                    <div>
                                                                                        <div class="font-extrabold text-slate-800 leading-tight">{{ $mark->student->first_name }} {{ $mark->student->surname }}</div>
                                                                                        <div class="text-[10px] text-slate-400 font-semibold uppercase mt-0.5">{{ $mark->student->login_id }}</div>
                                                                                    </div>
                                                                                </div>
                                                                                
                                                                                <div class="flex items-end justify-between mb-2">
                                                                                    <div>
                                                                                        <div class="text-3xl font-black text-slate-800 tracking-tighter leading-none">{{ rtrim(rtrim(number_format($mark->marks_obtained, 2), '0'), '.') }}</div>
                                                                                        <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">out of {{ number_format($exam->max_marks, 0) }}</div>
                                                                                    </div>
                                                                                    <div class="px-2 py-1 rounded-lg text-[10px] font-extrabold uppercase tracking-widest {{ $gradeColor }}">{{ $gradeText }}</div>
                                                                                </div>
                                                                                
                                                                                <div class="h-2 w-full bg-slate-100 rounded-full overflow-hidden mt-3">
                                                                                    <div class="h-full {{ $progressColor }} rounded-full" style="width: {{ $percentage }}%"></div>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>

                                                            @else
                                                                <div class="text-center py-8 bg-slate-50 rounded-2xl border border-slate-100">
                                                                    <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-white shadow-sm text-slate-300 mb-3">
                                                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                                                                    </div>
                                                                    <h4 class="text-sm font-bold text-slate-700">No Marks Yet</h4>
                                                                    <p class="text-xs font-medium text-slate-500 mt-1">Marks have not been uploaded for this test.</p>
                                                                </div>
                                                            @endif
                                                        </div>

                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            
                        </div>
                    </div>
                </div>
            @empty
                <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-16 text-center">
                    <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-slate-50 text-slate-300 mb-4">
                        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                    </div>
                    <h3 class="text-xl font-bold text-slate-800">{{ __('No Tests Uploaded') }}</h3>
                    <p class="text-slate-500 font-medium mt-2 max-w-sm mx-auto">{{ __('There are no test results available at the moment. Please check back later.') }}</p>
                </div>
            @endforelse
        </div>

    </div>
</div>
@endsection