@extends('student.layout')
@section('title','My Performance')
@section('page-title','My Performance')

@section('content')
<!-- Summary -->
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;">
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:32px;font-weight:900;color:var(--navy);">{{ $totalTests }}</div>
        <div style="font-size:12px;color:#64748b;margin-top:4px;">Tests Taken</div>
    </div>
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:32px;font-weight:900;color:{{ $avgPercent>=60?'#22c55e':'#dc2626' }};">{{ $avgPercent }}%</div>
        <div style="font-size:12px;color:#64748b;margin-top:4px;">Average Score</div>
    </div>
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:32px;font-weight:900;color:#3b82f6;">{{ $passed }}/{{ $totalTests }}</div>
        <div style="font-size:12px;color:#64748b;margin-top:4px;">Tests Passed</div>
    </div>
</div>

<!-- Results table -->
<div class="card">
    <div class="card-header"><h3><i class="fas fa-list" style="color:var(--red);margin-right:8px;"></i>All Test Results</h3></div>
    @if($results->isEmpty())
    <div style="padding:60px;text-align:center;color:#94a3b8;">
        <i class="fas fa-pen-to-square" style="font-size:48px;margin-bottom:16px;display:block;opacity:0.3;"></i>
        No test results yet. Results will appear here after your tests.
    </div>
    @else
    <table>
        <thead><tr><th>Test</th><th>Date</th><th>Topic</th><th>Marks</th><th>%</th><th>Grade</th><th>Status</th><th>Remarks</th></tr></thead>
        <tbody>
            @foreach($results as $r)
            @php $pct = $r->percentage(); @endphp
            <tr>
                <td style="font-weight:600;color:#0f172a;">{{ $r->test?->title }}</td>
                <td style="font-size:12px;color:#94a3b8;">{{ $r->test?->test_date?->format('d M Y') }}</td>
                <td style="font-size:12px;color:#64748b;">{{ $r->test?->topic ?: '—' }}</td>
                <td>
                    @if($r->marks_obtained !== null)
                    <strong style="color:{{ $pct>=60?'#22c55e':'#dc2626' }};">{{ $r->marks_obtained }}</strong>
                    <span style="font-size:11px;color:#94a3b8;">/ {{ $r->test?->total_marks }}</span>
                    @else
                    <span style="color:#94a3b8;">—</span>
                    @endif
                </td>
                <td>
                    @if($r->marks_obtained !== null)
                    <div style="display:flex;align-items:center;gap:6px;">
                        <div style="width:48px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden;">
                            <div style="height:6px;width:{{ $pct }}%;background:{{ $pct>=60?'#22c55e':'#dc2626' }};border-radius:3px;"></div>
                        </div>
                        <span style="font-size:12px;font-weight:600;color:{{ $pct>=60?'#22c55e':'#dc2626' }};">{{ $pct }}%</span>
                    </div>
                    @else —
                    @endif
                </td>
                <td>
                    @if($r->grade)
                    <span class="badge {{ in_array($r->grade,['A+','A'])?'badge-green':(in_array($r->grade,['B+','B'])?'badge-blue':($r->grade=='F'||$r->grade=='Absent'?'badge-red':'badge-yellow')) }}">{{ $r->grade }}</span>
                    @else <span style="color:#94a3b8;">—</span>
                    @endif
                </td>
                <td>
                    @if($r->marks_obtained !== null)
                    <span class="badge {{ $r->marks_obtained >= ($r->test?->passing_marks??60) ? 'badge-green' : 'badge-red' }}">
                        {{ $r->marks_obtained >= ($r->test?->passing_marks??60) ? 'Pass' : 'Fail' }}
                    </span>
                    @else <span class="badge badge-gray">Pending</span>
                    @endif
                </td>
                <td style="font-size:12px;color:#64748b;">{{ $r->remarks ?: '—' }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @endif
</div>
@endsection