@extends('layouts.student')
@section('title','My Result')

@section('content')
<div class="row justify-content-center">
<div class="col-lg-8">

{{-- Header card --}}
<div class="card dashboard-card mb-4 border-0 overflow-hidden">
    <div class="card-body p-0">
        <div class="p-4 text-white text-center" style="background: linear-gradient(135deg, #003580, #0055a5)">
            <i class="bi bi-patch-check-fill mb-2" style="font-size:3rem; opacity:0.9"></i>
            <h4 class="fw-bold mb-1">
                {{ in_array($attempt->status, ['submitted','timed_out']) ? 'Exam Completed' : 'Result' }}
            </h4>
            <p class="mb-0 opacity-75">{{ $attempt->examSession->title }}</p>
            @if($attempt->status === 'timed_out')
                <span class="badge bg-warning text-dark mt-2">Time Expired</span>
            @endif
        </div>

        {{-- Total score --}}
        <div class="p-4 text-center border-bottom">
            <div class="display-4 fw-bold text-primary">{{ $attempt->total_score }}</div>
            <div class="text-muted">out of {{ $attempt->total_questions }} questions</div>
            @php $pct = $attempt->total_questions > 0 ? round(($attempt->total_score / $attempt->total_questions) * 100) : 0; @endphp
            <div class="mt-2">
                <span class="badge fs-6 bg-{{ $pct >= 50 ? 'success' : 'danger' }} px-3 py-2">
                    {{ $pct }}% Overall
                </span>
            </div>
            @if($timeTaken)
                <div class="text-muted small mt-2">
                    <i class="bi bi-clock me-1"></i>Completed in {{ $timeTaken }} minutes
                </div>
            @endif
        </div>
    </div>
</div>

{{-- Per subject breakdown --}}
<div class="card dashboard-card mb-4">
    <div class="card-header bg-white py-3 border-bottom">
        <h6 class="fw-bold mb-0"><i class="bi bi-bar-chart me-2 text-primary"></i>Subject Breakdown</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Subject</th>
                        <th class="text-center">Score</th>
                        <th class="text-center">Correct</th>
                        <th class="text-center">Wrong</th>
                        <th class="text-center">Unanswered</th>
                        <th>Performance</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($attempt->results as $result)
                    @php $pctSubject = round($result->score); @endphp
                    <tr>
                        <td class="fw-semibold">{{ $result->subject->name }}</td>
                        <td class="text-center fw-bold text-primary">{{ $pctSubject }}%</td>
                        <td class="text-center text-success fw-semibold">{{ $result->correct_answers }}</td>
                        <td class="text-center text-danger fw-semibold">{{ $result->wrong_answers }}</td>
                        <td class="text-center text-muted">{{ $result->unanswered }}</td>
                        <td style="min-width:120px">
                            <div class="progress" style="height:8px">
                                <div class="progress-bar bg-{{ $pctSubject >= 50 ? 'success' : 'danger' }}"
                                     style="width:{{ $pctSubject }}%"></div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Action buttons --}}
<div class="d-flex gap-3 flex-wrap">
    <a href="{{ route('student.result.review', $attempt) }}" class="btn btn-primary">
        <i class="bi bi-search me-1"></i>Review Answers
    </a>
    <a href="{{ route('student.dashboard') }}" class="btn btn-light">
        <i class="bi bi-house me-1"></i>Dashboard
    </a>
</div>

</div>
</div>
@endsection