@extends('layouts.app')
@section('title', 'Exam Result')
@section('content')
<div class="page-header">
    <div>
        <h4><i class="bi bi-bar-chart me-2"></i>Exam Result</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('student.dashboard') }}">Dashboard</a></li><li class="breadcrumb-item"><a href="{{ route('student.exams.index') }}">Exams</a></li><li class="breadcrumb-item active">Result</li></ol>
        </nav>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-xl-8">
        <div class="card text-center mb-4">
            <div class="card-body py-5">
                @if($attempt->passed)
                <div class="display-1 text-success mb-3"><i class="bi bi-trophy"></i></div>
                <h2 class="fw700 text-success">Congratulations!</h2>
                <p class="text-muted">You passed the exam</p>
                @else
                <div class="display-1 text-danger mb-3"><i class="bi bi-x-circle"></i></div>
                <h2 class="fw700 text-danger">Better Luck Next Time</h2>
                <p class="text-muted">You did not meet the pass mark</p>
                @endif

                <div class="row mt-4">
                    <div class="col-4">
                        <div class="display-4 fw700" style="color:var(--primary);">{{ number_format($attempt->percentage, 1) }}%</div>
                        <small class="text-muted">Score</small>
                    </div>
                    <div class="col-4">
                        <div class="display-4 fw700" style="color:var(--success);">{{ $attempt->result->grade ?? 'N/A' }}</div>
                        <small class="text-muted">Grade</small>
                    </div>
                    <div class="col-4">
                        <div class="display-4 fw700" style="color:var(--info);">{{ $attempt->time_spent_seconds ? sprintf('%02d:%02d', floor($attempt->time_spent_seconds/60), $attempt->time_spent_seconds%60) : 'N/A' }}</div>
                        <small class="text-muted">Time Spent</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">Performance Breakdown</div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-4">
                        <div class="h3 fw700 text-success">{{ $attempt->result->correct_answers ?? 0 }}</div>
                        <small class="text-muted">Correct</small>
                    </div>
                    <div class="col-4">
                        <div class="h3 fw700 text-danger">{{ $attempt->result->wrong_answers ?? 0 }}</div>
                        <small class="text-muted">Wrong</small>
                    </div>
                    <div class="col-4">
                        <div class="h3 fw700 text-primary">{{ $attempt->result->total_questions_answered ?? 0 }}</div>
                        <small class="text-muted">Answered</small>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="progress" style="height:25px;">
                        @php $correctPct = $attempt->result && $attempt->result->total_questions_answered > 0 ? ($attempt->result->correct_answers / ($attempt->result->correct_answers + $attempt->result->wrong_answers)) * 100 : 0; @endphp
                        <div class="progress-bar bg-success" style="width:{{ $correctPct }}%">{{ $attempt->result->correct_answers ?? 0 }} Correct</div>
                        <div class="progress-bar bg-danger" style="width:{{ 100 - $correctPct }}%">{{ $attempt->result->wrong_answers ?? 0 }} Wrong</div>
                    </div>
                </div>
            </div>
        </div>

        @if($exam->show_result_immediately && $attempt->reviewed_answers)
        <div class="card">
            <div class="card-header">Review Answers</div>
            <div class="card-body">
                @foreach($exam->questions as $qIndex => $question)
                @php $review = $attempt->reviewed_answers[$question->id] ?? null; @endphp
                <div class="mb-4 p-3 rounded {{ $review && $review['is_correct'] ? 'bg-success bg-opacity-10' : 'bg-danger bg-opacity-10' }}">
                    <div class="d-flex justify-content-between">
                        <strong>Q{{ $qIndex + 1 }}.</strong>
                        <span class="badge bg-{{ $review && $review['is_correct'] ? 'success' : 'danger' }}">
                            {{ $review ? ($review['is_correct'] ? 'Correct' : 'Wrong') : 'Not Answered' }}
                        </span>
                    </div>
                    <p class="mt-2">{!! nl2br(e($question->question_text)) !!}</p>
                    @if($review)
                    <div class="row">
                        <div class="col-md-6">
                            <small class="text-muted">Your answer:</small>
                            <div class="fw500">{{ is_array($review['user_answer']) ? implode(', ', $review['user_answer']) : $review['user_answer'] }}</div>
                        </div>
                        <div class="col-md-6">
                            <small class="text-muted">Correct answer:</small>
                            <div class="fw500 text-success">{{ $review['correct_answer'] }}</div>
                        </div>
                    </div>
                    @if($question->explanation)
                    <div class="mt-2 p-2 bg-info bg-opacity-10 rounded">
                        <small><strong>Explanation:</strong> {{ $question->explanation }}</small>
                    </div>
                    @endif
                    @endif
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <div class="text-center mt-4">
            <a href="{{ route('student.exams.index') }}" class="btn btn-primary"><i class="bi bi-arrow-left me-1"></i>Back to Exams</a>
            <a href="{{ route('student.dashboard') }}" class="btn btn-outline-primary ms-2"><i class="bi bi-speedometer2 me-1"></i>Dashboard</a>
        </div>
    </div>
</div>
@endsection