{{-- ==========================================================
    Question Review
========================================================== --}}

<div class="card border-0 shadow-sm rounded-4">

    <div class="card-header bg-light">

        <h5 class="mb-0 fw-bold">

            <i class="bi bi-journal-check text-primary me-2"></i>

            Question Review

        </h5>

    </div>

    <div class="card-body">

        @foreach($result->examAttempt->questions as $attempt)

            @php

                $question = $attempt->question;

            @endphp

            <div class="card border rounded-4 mb-4">

                <div class="card-header bg-white">

                    <div class="d-flex justify-content-between align-items-center">

                        <h6 class="fw-bold mb-0">

                            Question {{ $loop->iteration }}

                        </h6>

                        @if($attempt->is_correct)

                            <span class="badge bg-success">

                                <i class="bi bi-check-circle-fill me-1"></i>

                                Correct

                            </span>

                        @elseif($attempt->is_answered)

                            <span class="badge bg-danger">

                                <i class="bi bi-x-circle-fill me-1"></i>

                                Wrong

                            </span>

                        @else

                            <span class="badge bg-warning text-dark">

                                <i class="bi bi-dash-circle-fill me-1"></i>

                                Not Answered

                            </span>

                        @endif

                    </div>

                </div>

                <div class="card-body">

                    {{-- Question --}}
                    <div class="mb-4">

                        <h6 class="fw-bold">

                            {!! $question->question_text !!}

                        </h6>

                    </div>

                    {{-- Question Image --}}
                    @if($question->image)

                        <div class="mb-4 text-center">

                            <img
                                src="{{ asset('storage/'.$question->image) }}"
                                class="img-fluid rounded shadow-sm"
                                style="max-height:300px;">

                        </div>

                    @endif

                    {{-- Options --}}
                    <div class="row">

                        @foreach(['A','B','C','D'] as $option)

                            @php

                                $field = 'option_'.strtolower($option);

                            @endphp

                            <div class="col-md-6 mb-3">

                                <div class="border rounded-3 p-3

                                    @if($question->correct_answer == $option)

                                        border-success bg-success-subtle

                                    @elseif($attempt->selected_option == $option)

                                        border-danger bg-danger-subtle

                                    @endif">

                                    <strong>

                                        {{ $option }}.

                                    </strong>

                                    {!! $question->$field !!}

                                </div>

                            </div>

                        @endforeach

                    </div>

                    <hr>

                    {{-- Student Answer --}}
                    <div class="row">

                        <div class="col-md-4">

                            <div class="alert alert-primary mb-0">

                                <strong>

                                    Your Answer

                                </strong>

                                <br>

                                {{ $attempt->selected_option ?? 'Not Answered' }}

                            </div>

                        </div>

                        <div class="col-md-4">

                            <div class="alert alert-success mb-0">

                                <strong>

                                    Correct Answer

                                </strong>

                                <br>

                                {{ $question->correct_answer }}

                            </div>

                        </div>

                        <div class="col-md-4">

                            <div class="alert mb-0

                                @if($attempt->is_correct)

                                    alert-success

                                @elseif($attempt->is_answered)

                                    alert-danger

                                @else

                                    alert-warning

                                @endif">

                                <strong>

                                    Status

                                </strong>

                                <br>

                                @if($attempt->is_correct)

                                    Correct

                                @elseif($attempt->is_answered)

                                    Wrong

                                @else

                                    Not Answered

                                @endif

                            </div>

                        </div>

                    </div>

                    {{-- Solution --}}
                    @if($question->solution)

                        <div class="mt-4">

                            <div class="alert alert-info rounded-4">

                                <h6 class="fw-bold">

                                    <i class="bi bi-lightbulb-fill me-2"></i>

                                    Explanation / Solution

                                </h6>

                                <hr>

                                {!! $question->solution !!}

                            </div>

                        </div>

                    @endif

                </div>

            </div>

        @endforeach

    </div>

</div>