@extends('layouts.app')
@section('title', 'My Report Cards')
@section('page-title', 'Report Cards')

@section('content')
<div class="space-y-6">

    <div>
        <h2 class="text-xl font-bold text-stone-800">
            @if(auth()->user()->role === 'parent')
            Children's Report Cards
            @else
            My Report Cards
            @endif
        </h2>
        <p class="text-sm text-stone-500 mt-0.5">View and download academic report cards</p>
    </div>

    @if(auth()->user()->role === 'parent' && isset($children))
        {{-- Parent view: grouped by child --}}
        @foreach($children as $child)
        @php $childCards = $reportCards->where('student_id', $child->id); @endphp
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-stone-100 bg-amber-50/50 flex items-center gap-3">
                <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center">
                    <span class="text-white font-bold">{{ strtoupper(substr($child->name, 0, 1)) }}</span>
                </div>
                <div>
                    <h3 class="font-bold text-stone-800">{{ $child->name }}</h3>
                    <p class="text-xs text-stone-500">{{ $child->studentProfile?->class_?->full_name ?? '' }} · {{ $child->studentProfile?->admission_number ?? '' }}</p>
                </div>
            </div>

            @if($childCards->isNotEmpty())
            <div class="divide-y divide-stone-50">
                @foreach($childCards as $rc)
                <div class="px-6 py-4 flex items-center gap-4 hover:bg-stone-50/50 transition">
                    {{-- Term Icon --}}
                    <div class="w-12 h-12 bg-stone-100 rounded-xl flex flex-col items-center justify-center flex-shrink-0">
                        <i class="fas fa-file-alt text-amber-500 text-lg"></i>
                    </div>

                    {{-- Info --}}
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                            <p class="font-semibold text-stone-800">{{ $rc->term }}</p>
                            @php $gColor = App\Services\GradeService::color($rc->overall_grade); @endphp
                            <span class="px-2 py-0.5 bg-{{ $gColor }}-100 text-{{ $gColor }}-700 rounded-full text-[10px] font-bold">
                                Grade {{ $rc->overall_grade }}
                            </span>
                        </div>
                        <p class="text-xs text-stone-400 mt-0.5">{{ $rc->academicYear?->name ?? '' }} · {{ $rc->class_?->full_name ?? '' }}</p>
                    </div>

                    {{-- Stats --}}
                    <div class="hidden sm:flex items-center gap-6 text-center">
                        <div>
                            <p class="text-lg font-extrabold {{ $rc->percentage >= 80 ? 'text-green-600' : ($rc->percentage >= 60 ? 'text-amber-600' : ($rc->percentage >= 40 ? 'text-orange-600' : 'text-red-600')) }}">
                                {{ $rc->percentage }}%
                            </p>
                            <p class="text-[9px] text-stone-400 uppercase font-semibold">Percentage</p>
                        </div>
                        <div>
                            <p class="text-lg font-extrabold text-stone-800">{{ $rc->rank ?? '—' }}</p>
                            <p class="text-[9px] text-stone-400 uppercase font-semibold">Rank</p>
                        </div>
                    </div>

                    {{-- Download --}}
                    @if($rc->pdf_path)
                    <a href="{{ route('report-cards.download', $rc) }}" class="px-4 py-2 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm flex-shrink-0">
                        <i class="fas fa-download mr-1.5"></i> Download
                    </a>
                    @else
                    <span class="px-4 py-2 bg-stone-100 text-stone-400 rounded-xl text-sm font-medium">Pending</span>
                    @endif
                </div>
                @endforeach
            </div>
            @else
            <div class="p-8 text-center">
                <p class="text-stone-400 text-sm">No report cards available yet for {{ $child->name }}</p>
            </div>
            @endif
        </div>
        @endforeach

        @if($children->isEmpty())
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-12 text-center">
            <i class="fas fa-file-alt text-4xl text-stone-200 mb-3 block"></i>
            <p class="text-stone-500">No children linked to your account</p>
        </div>
        @endif

    @else
        {{-- Student view --}}
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
            @if($reportCards->isNotEmpty())
            <div class="divide-y divide-stone-50">
                @foreach($reportCards as $rc)
                <div class="px-6 py-5 flex items-center gap-4 hover:bg-stone-50/50 transition">
                    {{-- Term Icon --}}
                    <div class="w-14 h-14 bg-amber-50 rounded-2xl flex flex-col items-center justify-center flex-shrink-0 ring-1 ring-amber-200/60">
                        <i class="fas fa-file-alt text-amber-500 text-xl"></i>
                    </div>

                    {{-- Info --}}
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 flex-wrap">
                            <p class="font-bold text-stone-800 text-lg">{{ $rc->term }}</p>
                            @php $gColor = App\Services\GradeService::color($rc->overall_grade); @endphp
                            <span class="px-2.5 py-0.5 bg-{{ $gColor }}-100 text-{{ $gColor }}-700 rounded-full text-xs font-bold">
                                Grade {{ $rc->overall_grade }}
                            </span>
                        </div>
                        <p class="text-sm text-stone-400 mt-0.5">{{ $rc->academicYear?->name ?? '' }} · {{ $rc->class_?->full_name ?? '' }}</p>

                        {{-- Remarks --}}
                        @if($rc->teacher_remarks)
                        <p class="text-xs text-stone-500 mt-2 italic">
                            <i class="fas fa-quote-left text-stone-300 mr-1 text-[8px]"></i>
                            {{ $rc->teacher_remarks }}
                        </p>
                        @endif
                    </div>

                    {{-- Stats --}}
                    <div class="hidden sm:flex items-center gap-8 text-center">
                        <div>
                            <p class="text-sm text-stone-400 font-medium">Total</p>
                            <p class="text-xl font-extrabold text-stone-800">{{ $rc->total_marks }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-stone-400 font-medium">Percentage</p>
                            <p class="text-xl font-extrabold {{ $rc->percentage >= 80 ? 'text-green-600' : ($rc->percentage >= 60 ? 'text-amber-600' : ($rc->percentage >= 40 ? 'text-orange-600' : 'text-red-600')) }}">
                                {{ $rc->percentage }}%
                            </p>
                        </div>
                        <div>
                            <p class="text-sm text-stone-400 font-medium">Rank</p>
                            <p class="text-xl font-extrabold text-stone-800">{{ $rc->rank ?? '—' }}</p>
                        </div>
                    </div>

                    {{-- Download --}}
                    @if($rc->pdf_path)
                    <a href="{{ route('report-cards.download', $rc) }}" class="px-5 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm flex-shrink-0">
                        <i class="fas fa-download mr-1.5"></i> Download
                    </a>
                    @else
                    <span class="px-5 py-2.5 bg-stone-100 text-stone-400 rounded-xl text-sm font-medium">Pending</span>
                    @endif
                </div>
                @endforeach
            </div>
            @else
            <div class="p-12 text-center">
                <i class="fas fa-file-alt text-4xl text-stone-200 mb-3 block"></i>
                <p class="text-stone-500 font-medium">No report cards available yet</p>
                <p class="text-xs text-stone-400 mt-1">Report cards will appear here once generated by your school</p>
            </div>
            @endif
        </div>
    @endif
</div>
@endsection