@extends('layouts.student')
@section('title','Answer Review')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <h5 class="fw-bold mb-0">Answer Review</h5>
    <a href="{{ route('student.result.show', $attempt) }}" class="btn btn-light btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Back to Result
    </a>
</div>

@foreach($grouped as $subjectId => $aqList)
@php $subject = $aqList->first()->subject; @endphp

<div class="card dashboard-card mb-4">
    <div class="card-header py-3 border-bottom" style="background:#003580">
        <h6 class="fw-bold mb-0 text-white">{{ $subject->name }}</h6>
    </div>
    <div class="card-body p-3">
        @foreach($aqList as $aq)
        @php
            $q      = $aq->question;
            $answer = $answers[$q->id] ?? null;
            $selectedId  = $answer?->selected_option_id;
            $correctOpt  = $q->options->firstWhere('is_correct', true);
            $wasCorrect  = $answer?->is_correct;
        @endphp

        <div class="border rounded p-3 mb-3 {{ $wasCorrect ? 'border-success' : ($selectedId ? 'border-danger' : 'border-warning') }}">
            <div class="d-flex align-items-center gap-2 mb-2">
                <span class="badge bg-secondary">Q{{ $aq->question_order }}</span>
                @if($wasCorrect)
                    <span class="badge bg-success"><i class="bi bi-check-lg me-1"></i>Correct</span>
                @elseif($selectedId)
                    <span class="badge bg-danger"><i class="bi bi-x-lg me-1"></i>Wrong</span>
                @else
                    <span class="badge bg-warning text-dark">Not Answered</span>
                @endif
            </div>

            <div class="small mb-3">{!! $q->question_text !!}</div>

            @foreach($q->options as $option)
            @php
                $isSelected = $selectedId == $option->id;
                $isCorrect  = $option->is_correct;
                $rowClass   = $isCorrect ? 'bg-success bg-opacity-10 border-success'
                            : ($isSelected && !$isCorrect ? 'bg-danger bg-opacity-10 border-danger' : 'bg-light');
            @endphp
            <div class="d-flex align-items-start gap-2 p-2 rounded border mb-1 small {{ $rowClass }}">
                <span class="badge {{ $isCorrect ? 'bg-success' : ($isSelected ? 'bg-danger' : 'bg-secondary') }} flex-shrink-0">
                    {{ $option->option_label }}
                </span>
                <div>{!! $option->option_text !!}</div>
                @if($isCorrect)
                    <span class="ms-auto badge bg-success"><i class="bi bi-check-lg"></i></span>
                @elseif($isSelected)
                    <span class="ms-auto badge bg-danger"><i class="bi bi-x-lg"></i></span>
                @endif
            </div>
            @endforeach

            @if($q->explanation)
            <div class="mt-2 p-2 rounded small" style="background:#f0f8ff; border-left: 3px solid #003580">
                <strong><i class="bi bi-lightbulb me-1 text-warning"></i>Explanation:</strong>
                {!! $q->explanation !!}
            </div>
            @endif
        </div>
        @endforeach
    </div>
</div>
@endforeach

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
@endsection