@extends('layouts.app')
@section('title', 'Exam Result')
@section('page-title', 'Your Result')
@section('content')

@php
    $passed  = $attempt->passed;
    $pct     = round($attempt->percentage, 1);
    $grade   = $attempt->grade_label;
    $exam    = $attempt->exam;
@endphp

<div style="max-width:860px;margin:0 auto;">

    <!-- Result Hero Card -->
    <div class="card" style="margin-bottom:24px;overflow:hidden;position:relative;">
        <div style="background: {{ $passed ? 'linear-gradient(135deg,rgba(34,211,160,.12),rgba(79,124,255,.08))' : 'linear-gradient(135deg,rgba(241,65,108,.1),rgba(255,100,50,.06))' }};padding:48px 40px;text-align:center;">
            <div style="font-size:4rem;margin-bottom:16px;">{{ $passed ? '🎉' : '📚' }}</div>
            <div style="font-size:4.5rem;font-family:'Syne',sans-serif;font-weight:800;color:{{ $passed ? 'var(--green)' : 'var(--red)' }};line-height:1;">
                {{ $pct }}%
            </div>
            <div style="font-size:1.4rem;font-family:'Syne',sans-serif;font-weight:700;margin:8px 0 4px;">
                {{ $passed ? 'Congratulations! You Passed' : 'Better Luck Next Time' }}
            </div>
            <div style="color:var(--muted);">{{ $exam->title }}</div>

            <div style="display:flex;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap;">
                <span class="badge {{ $passed ? 'badge-success' : 'badge-danger' }}" style="font-size:.9rem;padding:8px 20px;">
                    Grade: {{ $grade }}
                </span>
                <span class="badge badge-info" style="font-size:.9rem;padding:8px 20px;">
                    {{ $attempt->total_score }}/{{ $exam->total_marks }} marks
                </span>
                @if($attempt->time_taken_seconds)
                <span class="badge badge-muted" style="font-size:.9rem;padding:8px 20px;">
                    <i class="bi bi-clock"></i> {{ gmdate('H:i:s', $attempt->time_taken_seconds) }}
                </span>
                @endif
            </div>
        </div>
    </div>

    @if($exam->show_results_immediately && $exam->allow_review)
    <!-- Question Review -->
    <div class="card">
        <div class="card-header">
            <h5>Answer Review</h5>
            <span class="text-muted text-sm">{{ $attempt->answers->count() }} questions reviewed</span>
        </div>

        @foreach($attempt->answers as $i => $answer)
        @php
            $q       = $answer->question;
            $correct = $answer->is_correct;
            $isEssay = in_array($q->type, ['essay', 'short_answer']);
        @endphp
        <div style="padding:24px;border-bottom:1px solid var(--border);">
            <div class="flex items-center gap-3" style="margin-bottom:12px;">
                <span style="width:32px;height:32px;border-radius:8px;flex-shrink:0;
                    background:{{ is_null($correct) ? 'rgba(136,146,164,.15)' : ($correct ? 'rgba(34,211,160,.15)' : 'rgba(241,65,108,.15)') }};
                    color:{{ is_null($correct) ? 'var(--muted)' : ($correct ? 'var(--green)' : 'var(--red)') }};
                    display:flex;align-items:center;justify-content:center;font-size:1rem;">
                    <i class="bi bi-{{ is_null($correct) ? 'dash' : ($correct ? 'check-lg' : 'x-lg') }}"></i>
                </span>
                <div>
                    <span class="badge badge-muted">Q{{ $i+1 }}</span>
                    @if(!is_null($correct))
                        <span class="badge {{ $correct ? 'badge-success' : 'badge-danger' }}" style="margin-left:6px;">
                            {{ $correct ? '+' . $answer->marks_awarded : '0' }}/{{ $q->marks }} marks
                        </span>
                    @else
                        <span class="badge badge-warning" style="margin-left:6px;">Manual grading required</span>
                    @endif
                </div>
            </div>

            <p style="font-weight:600;margin-bottom:12px;">{{ $q->question_text }}</p>

            @if($answer->selectedOption)
            <div style="margin-bottom:8px;">
                <span class="text-xs text-muted">Your Answer:</span>
                <span class="badge {{ $correct ? 'badge-success' : 'badge-danger' }}" style="margin-left:6px;">
                    {{ $answer->selectedOption->option_text }}
                </span>
            </div>
            @if(!$correct && $q->correctOption())
            <div style="margin-bottom:8px;">
                <span class="text-xs text-muted">Correct Answer:</span>
                <span class="badge badge-success" style="margin-left:6px;">
                    {{ $q->correctOption()->option_text }}
                </span>
            </div>
            @endif
            @elseif($answer->text_answer)
            <div style="background:var(--navy);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:8px;">
                <div class="text-xs text-muted" style="margin-bottom:4px;">Your Answer:</div>
                <div>{{ $answer->text_answer }}</div>
            </div>
            @endif

            @if($q->explanation)
            <div style="background:rgba(79,124,255,.06);border:1px solid rgba(79,124,255,.15);border-radius:10px;padding:12px;margin-top:10px;">
                <div class="text-xs" style="color:var(--accent);margin-bottom:4px;font-weight:600;">
                    <i class="bi bi-lightbulb"></i> Explanation
                </div>
                <div class="text-sm">{{ $q->explanation }}</div>
            </div>
            @endif
        </div>
        @endforeach
    </div>
    @else
    <div class="card">
        <div class="card-body" style="text-align:center;padding:48px;color:var(--muted);">
            <i class="bi bi-lock" style="font-size:2rem;display:block;margin-bottom:12px;"></i>
            Answer review is not available for this exam.
        </div>
    </div>
    @endif

    <div class="flex gap-3" style="margin-top:24px;">
        <a href="{{ route('candidate.dashboard') }}" class="btn btn-primary">
            <i class="bi bi-house"></i> Back to Dashboard
        </a>
        @if($exam->allow_review && !$exam->show_results_immediately)
        <span class="text-muted text-sm" style="align-self:center;">Results will be emailed to you shortly.</span>
        @endif
    </div>
</div>
@endsection