@extends('Component.layout')

@section('title', 'Test Marks - Iqra')
@section('breadcrumb', 'Dashboard / Test Marks')

@section('content')
<div class="max-w-7xl mx-auto space-y-6">

    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 pb-4 border-b border-slate-200">
        <div>
            <h1 class="text-2xl font-extrabold text-slate-800 tracking-tight">Test Marks & Progress</h1>
            <p class="text-xs text-slate-500 mt-1 font-medium">Detailed view of {{ $student->first_name }}'s academic performance.</p>
        </div>
    </div>

    <!-- Content Area -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Main Column (Marks List) -->
        <div class="lg:col-span-2 space-y-6">

            @if($marks->count() > 0)
            <!-- Marks Graph -->
            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden p-6">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-8 h-8 rounded-xl bg-sky-100 flex items-center justify-center">
                        <svg class="w-4 h-4 text-sky-600 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path></svg>
                    </div>
                    <h3 class="text-sm font-extrabold text-slate-800">Performance Over Time</h3>
                </div>
                <div id="marksChart" class="w-full"></div>
            </div>
            @endif

            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-xl bg-blue-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-blue-600 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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>
                        <h3 class="text-sm font-extrabold text-slate-800">Test History</h3>
                    </div>
                </div>
                <div class="p-0">
                    <div class="divide-y divide-slate-100">
                        @forelse($marks as $mark)
                            @php
                                $percentage = ($mark->exam->max_marks > 0) ? ($mark->marks_obtained / $mark->exam->max_marks) * 100 : 0;
                                $gradeColor = 'text-blue-600 bg-blue-50';
                                if($percentage >= 90) { $gradeColor = 'text-emerald-600 bg-emerald-50'; }
                                elseif($percentage >= 75) { $gradeColor = 'text-cyan-600 bg-cyan-50'; }
                                elseif($percentage >= 50) { $gradeColor = 'text-amber-600 bg-amber-50'; }
                                elseif($percentage < 35) { $gradeColor = 'text-rose-600 bg-rose-50'; }
                            @endphp
                            <div class="p-5 hover:bg-slate-50 transition-colors flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                                <div class="flex-1 min-w-0">
                                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ $mark->exam->exam_date->format('d M, Y') }}</div>
                                    <h4 class="text-base font-extrabold text-slate-800 truncate">{{ $mark->exam->title }}</h4>
                                    <div class="text-[11px] font-semibold text-slate-500 mt-1 flex items-center gap-2">
                                        <span class="inline-flex items-center gap-1"><svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477-4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg> {{ $mark->exam->subject }}</span>
                                        <span class="text-slate-300">•</span>
                                        <span class="inline-flex items-center gap-1"><svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg> Tr. {{ $mark->exam->teacher->name }}</span>
                                    </div>
                                </div>
                                <div class="text-left sm:text-right shrink-0 bg-slate-50 sm:bg-transparent p-3 sm:p-0 rounded-xl sm:rounded-none">
                                    <div class="text-2xl font-black {{ explode(' ', $gradeColor)[0] }} leading-none">{{ rtrim(rtrim(number_format($mark->marks_obtained, 2), '0'), '.') }} <span class="text-sm text-slate-400 font-bold">/ {{ number_format($mark->exam->max_marks, 0) }}</span></div>
                                    <div class="text-[10px] font-bold text-slate-400 uppercase mt-1">Marks Obtained</div>
                                </div>
                            </div>
                        @empty
                            <div class="p-12 text-center">
                                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-50 text-slate-300 mb-4 shadow-sm">
                                    <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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                                </div>
                                <h3 class="text-sm font-bold text-slate-700 mb-1">No Marks Yet</h3>
                                <p class="text-xs font-semibold text-slate-500">When tests are completed and graded, they will appear here.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar Column (Test Progress) -->
        <div class="lg:col-span-1 space-y-6">
            @php
                $totalPossible = 0;
                $totalObtained = 0;
                foreach($marks as $mark) {
                    if ($mark->exam->max_marks > 0) {
                        $totalPossible += $mark->exam->max_marks;
                        $totalObtained += $mark->marks_obtained;
                    }
                }
                $progressPercent = $totalPossible > 0 ? min(100, ($totalObtained / $totalPossible) * 100) : 0;
                $lossPercent = $totalPossible > 0 ? 100 - $progressPercent : 0;
                $marksLost = max(0, $totalPossible - $totalObtained);

                $overallColor = 'text-blue-600';
                $overallBg = 'bg-blue-500';
                if($progressPercent >= 90) { $overallColor = 'text-emerald-600'; $overallBg = 'bg-emerald-500'; }
                elseif($progressPercent >= 75) { $overallColor = 'text-cyan-600'; $overallBg = 'bg-cyan-500'; }
                elseif($progressPercent >= 50) { $overallColor = 'text-amber-600'; $overallBg = 'bg-amber-500'; }
                elseif($progressPercent > 0 && $progressPercent < 35) { $overallColor = 'text-rose-600'; $overallBg = 'bg-rose-500'; }
            @endphp

            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden sticky top-6">
                <div class="px-6 py-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
                    <h3 class="text-sm font-extrabold text-slate-800">Overall Progress</h3>
                    <div class="px-2.5 py-1 rounded-lg bg-white border border-slate-200 text-[10px] font-bold text-slate-500 uppercase tracking-widest">{{ $marks->count() }} Tests</div>
                </div>
                
                <div class="p-6">
                    @if($totalPossible > 0)
                        <!-- Main Progress Graphic -->
                        <div class="text-center mb-8">
                            <div class="text-6xl font-black {{ $overallColor }} tracking-tighter leading-none mb-3">
                                {{ number_format($progressPercent, 1) }}<span class="text-3xl">%</span>
                            </div>
                            <p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Average Success Rate</p>
                        </div>

                        <!-- Visual Full-Width Progress Bar -->
                        <div class="mb-8">
                            <div class="flex justify-between text-[10px] font-bold uppercase tracking-widest mb-2">
                                <span class="{{ $overallColor }}">Progress</span>
                                <span class="text-rose-500">Loss</span>
                            </div>
                            <!-- Stacked bar showing achieved vs lost -->
                            <div class="h-5 w-full bg-slate-100 rounded-full overflow-hidden flex shadow-inner">
                                <!-- Achieved -->
                                <div class="h-full {{ $overallBg }} transition-all duration-1000 ease-out" style="width: {{ $progressPercent }}%"></div>
                                <!-- Lost -->
                                <div class="h-full bg-rose-400/80 transition-all duration-1000 ease-out" style="width: {{ $lossPercent }}%"></div>
                            </div>
                        </div>

                        @php
                            $lastTest = $marks->first();
                            $lastTestPct = 0;
                            if ($lastTest && $lastTest->exam->max_marks > 0) {
                                $lastTestPct = ($lastTest->marks_obtained / $lastTest->exam->max_marks) * 100;
                            }
                        @endphp
                        @if($lastTest)
                        <!-- Last Test Performance -->
                        <div class="mb-6 p-4 rounded-2xl border border-slate-100 bg-slate-50/50 shadow-sm">
                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3 flex items-center justify-between">
                                <span>Most Recent Test</span>
                                <span class="text-[9px] bg-white border border-slate-200 px-1.5 py-0.5 rounded-md">{{ $lastTest->exam->exam_date->format('d M') }}</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="truncate pr-3">
                                    <h4 class="text-sm font-extrabold text-slate-800 truncate">{{ $lastTest->exam->title }}</h4>
                                    <p class="text-[11px] font-semibold text-slate-500">{{ $lastTest->exam->subject }}</p>
                                </div>
                                <div class="text-right shrink-0">
                                    <div class="text-xl font-black text-slate-800">{{ number_format($lastTestPct, 1) }}<span class="text-sm text-slate-400 font-bold">%</span></div>
                                    <div class="text-[10px] font-bold text-slate-400">{{ rtrim(rtrim(number_format($lastTest->marks_obtained, 2), '0'), '.') }} / {{ number_format($lastTest->exam->max_marks, 0) }}</div>
                                </div>
                            </div>
                        </div>
                        @endif

                        <!-- Stats Breakdown -->
                        <div class="grid grid-cols-2 gap-4">
                            <div class="bg-slate-50 rounded-2xl p-4 border border-slate-100">
                                <div class="flex items-center gap-2 mb-2">
                                    <div class="w-2.5 h-2.5 rounded-full {{ $overallBg }}"></div>
                                    <span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Achieved</span>
                                </div>
                                <div class="text-2xl font-black text-slate-800">{{ rtrim(rtrim(number_format($totalObtained, 2), '0'), '.') }}</div>
                                <div class="text-[10px] font-semibold text-slate-400 mt-0.5">out of {{ number_format($totalPossible, 0) }}</div>
                            </div>
                            <div class="bg-rose-50/50 rounded-2xl p-4 border border-rose-100/50">
                                <div class="flex items-center gap-2 mb-2">
                                    <div class="w-2.5 h-2.5 rounded-full bg-rose-400"></div>
                                    <span class="text-[10px] font-bold text-rose-500 uppercase tracking-widest">Loss</span>
                                </div>
                                <div class="text-2xl font-black text-rose-700">{{ rtrim(rtrim(number_format($marksLost, 2), '0'), '.') }}</div>
                                <div class="text-[10px] font-semibold text-rose-400 mt-0.5">marks lost</div>
                            </div>
                        </div>
                        
                        <div class="mt-6 p-5 rounded-2xl bg-indigo-50 border border-indigo-100">
                            <div class="flex gap-3">
                                <svg class="w-5 h-5 text-indigo-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                <p class="text-xs font-semibold text-indigo-800 leading-relaxed">
                                    @if($progressPercent >= 75)
                                        Outstanding performance! Your child is retaining most of the test material. Keep up the great work!
                                    @elseif($progressPercent >= 50)
                                        Good progress. Focusing on the areas where marks were lost will help improve the overall score.
                                    @else
                                        Needs attention. Consider reviewing the recent test materials to reduce the mark loss rate.
                                    @endif
                                </p>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-8">
                            <p class="text-sm font-semibold text-slate-500">Not enough data to calculate progress yet.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

    </div>

</div>

@if($marks->count() > 0)
@php
    $chartMarks = $marks->reverse()->values();
    // X-axis: Test Title + Subject
    $categories = $chartMarks->map(function($m) { 
        return $m->exam->title . ' (' . $m->exam->subject . ')'; 
    })->toJson();
    
    // Y-axis data (Percentage)
    $seriesData = $chartMarks->map(function($m) { 
        $pct = ($m->exam->max_marks > 0) ? ($m->marks_obtained / $m->exam->max_marks) * 100 : 0;
        return round($pct, 1);
    })->toJson();

    // Tooltip metadata
    $metaData = $chartMarks->map(function($m) {
        return [
            'obtained' => rtrim(rtrim(number_format($m->marks_obtained, 2), '0'), '.'),
            'max' => number_format($m->exam->max_marks, 0)
        ];
    })->toJson();
@endphp

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var metaData = {!! $metaData !!};
        
        var options = {
            series: [{
                name: 'Performance',
                data: {!! $seriesData !!}
            }],
            chart: {
                type: 'area',
                height: 320,
                toolbar: { show: false },
                fontFamily: 'inherit',
                animations: { enabled: true }
            },
            colors: ['#0ea5e9'],
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.4,
                    opacityTo: 0.05,
                    stops: [0, 100]
                }
            },
            dataLabels: { enabled: false },
            stroke: {
                curve: 'smooth',
                width: 3
            },
            xaxis: {
                categories: {!! $categories !!},
                axisBorder: { show: false },
                axisTicks: { show: false },
                labels: {
                    style: { colors: '#94a3b8', fontSize: '11px', fontWeight: 600 }
                }
            },
            yaxis: {
                max: 100, // Lock Y-axis to 100% maximum
                labels: {
                    style: { colors: '#94a3b8', fontSize: '11px', fontWeight: 600 },
                    formatter: function(val) {
                        return val + "%";
                    }
                }
            },
            grid: {
                borderColor: '#f1f5f9',
                strokeDashArray: 4,
                yaxis: { lines: { show: true } },
                xaxis: { lines: { show: true } }
            },
            tooltip: {
                theme: 'light',
                y: {
                    formatter: function (val, { series, seriesIndex, dataPointIndex, w }) {
                        var meta = metaData[dataPointIndex];
                        return val + "% (" + meta.obtained + " out of " + meta.max + " marks)";
                    }
                }
            }
        };

        var chart = new ApexCharts(document.querySelector("#marksChart"), options);
        chart.render();
    });
</script>
@endif

@endsection