@extends(getTemplate() . '.layouts.app')

@section('content')
    <div class="container">
        <section class="mt-40">
            <h2 class="font-weight-bold font-16 text-dark-blue">{{ $quiz->title }}</h2>
            <p class="text-gray font-14 mt-5">
                <a href="{{ $quiz->webinar->getUrl() }}" target="_blank" class="text-gray">{{ $quiz->webinar->title }}</a>
                | {{ trans('public.by') }}
                <span class="font-weight-bold">
                    <a href="{{ $quiz->creator->getProfileUrl() }}" target="_blank" class="">
                        {{ $quiz->creator->full_name }}</a>
                </span>
            </p>

            <div class="activities-container shadow-sm rounded-lg mt-25 p-20 p-lg-35">
                <div class="row">
                    <div class="col-6 col-md-3 d-flex align-items-center justify-content-center">
                        <div class="d-flex flex-column align-items-center text-center">
                            <img src="/assets/default/img/activity/58.svg" width="64" height="64" alt="">
                            <strong
                                class="font-30 font-weight-bold text-secondary mt-5">{{ $quiz->pass_mark }}/{{ $questionsSumGrade }}</strong>
                            <span class="font-16 text-gray font-weight-500">{{ trans('public.min') }}
                                {{ trans('quiz.grade') }}</span>
                        </div>
                    </div>

                    <div class="col-6 col-md-3 d-flex align-items-center justify-content-center">
                        <div class="d-flex flex-column align-items-center text-center">
                            <img src="/assets/default/img/activity/88.svg" width="64" height="64" alt="">
                            <strong
                                class="font-30 font-weight-bold text-secondary mt-5">{{ $numberOfAttempt }}/{{ $quiz->attempt }}</strong>
                            <span class="font-16 text-gray font-weight-500">{{ trans('quiz.attempts') }}</span>
                        </div>
                    </div>

                    <div class="col-6 col-md-3 mt-30 mt-md-0 d-flex align-items-center justify-content-center mt-5 mt-md-0">
                        <div class="d-flex flex-column align-items-center text-center">
                            <img src="/assets/default/img/activity/45.svg" width="64" height="64" alt="">
                            <strong
                                class="font-30 font-weight-bold text-secondary mt-5">{{ $quizResult->user_grade }}/{{ $questionsSumGrade }}</strong>
                            <span class="font-16 text-gray font-weight-500">{{ trans('quiz.student_grade') }}</span>
                        </div>
                    </div>

                    <div class="col-6 col-md-3 mt-30 mt-md-0 d-flex align-items-center justify-content-center mt-5 mt-md-0">
                        <div class="d-flex flex-column align-items-center text-center">
                            <img src="/assets/default/img/activity/44.svg" width="64" height="64" alt="">
                            <strong
                                class="font-30 font-weight-bold text-{{ $quizResult->status == 'passed' ? 'primary' : ($quizResult->status == 'waiting' ? 'warning' : 'danger') }} mt-5">
                                {{ trans('quiz.' . $quizResult->status) }}
                            </strong>
                            <span class="font-16 text-gray font-weight-500">{{ trans('public.status') }}</span>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        <section class="mt-30 quiz-form">

            <div class="activities-container shadow-sm rounded-lg mt-25 p-20 p-lg-35">
                <div class="row">
                    @foreach ($quizQuestions as $key => $question)
                        <div class="col-12 mb-4">
                            <div class="card h-100">
                                <div class="card-header bg-light text-left">
                                    <strong>{{ $key + 1 }}. {{ $question->title }}</strong>
                                </div>
                                <div class="card-body text-left">
                                    <p>
                                        <strong>{{ trans('quiz.question_grade') }}:</strong> {{ $question->grade }} |
                                        <strong>{{ trans('quiz.student_grade') }}:</strong>
                                        @php
                                            $studentGrade = 0;
                                            if (
                                                isset($userAnswers[$question->id]['answer'])
                                            ) {
                                                $selectedAnswerId = (int)$userAnswers[$question->id]['answer'];
                                                $selectedAnswerObj = $question->quizzesQuestionsAnswers->where('id', $selectedAnswerId)->first();
                                                if ($selectedAnswerObj && $selectedAnswerObj->correct) {
                                                    $studentGrade = $question->grade;
                                                }
                                            }
                                        @endphp
                                        {{ $studentGrade }}
                                    </p>
                                    @if ($question->type === \App\Models\QuizzesQuestion::$descriptive)
                                        <div class="form-group">
                                            <label>{{ trans('quiz.student_answer') }}</label>
                                            <textarea class="form-control" rows="4" disabled>{{ !empty($userAnswers[$question->id]) && !empty($userAnswers[$question->id]['answer']) ? $userAnswers[$question->id]['answer'] : '' }}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>{{ trans('quiz.correct_answer') }}</label>
                                            <textarea class="form-control" rows="4" disabled>{{ $question->correct }}</textarea>
                                        </div>
                                    @else
                                        <div>
                                            @php
                                                $selected =
                                                    !empty($userAnswers[$question->id]) &&
                                                    isset($userAnswers[$question->id]['answer']);
                                            @endphp
                                            @if ($selected)
                                                @foreach ($question->quizzesQuestionsAnswers as $answer)
                                                    @php
                                                        $isSelected = $selected && ((int) $userAnswers[$question->id]['answer'] === $answer->id);
                                                        $isCorrect = $answer->correct;
                                                        $studentCorrect = $isSelected && $isCorrect;
                                                        $studentWrong = $isSelected && !$isCorrect;
                                                    @endphp
                                                    <div class="mb-2 d-flex align-items-center w-100" style="gap:8px;">
                                                        <input type="radio" disabled
                                                            {{ $isSelected ? 'checked' : '' }}
                                                            style="margin:0 8px 0 0;vertical-align:middle;">
                                                        <span
                                                            @if($studentCorrect)
                                                                style="background:#28a745;color:#fff;padding:2px 8px;border-radius:4px;"
                                                            @elseif($studentWrong)
                                                                style="background:#D73445;color:#fff;padding:2px 8px;border-radius:4px;"
                                                            @endif
                                                        >
                                                            {{ $answer->title }}
                                                        </span>
                                                        @if($isSelected)
                                                            <span class="badge badge-dark ml-2 mt-1">{{ trans('quiz.student_answer') }}</span>
                                                        @endif
                                                        @if($isCorrect)
                                                            <span class="ml-2 mt-1 badge" style="background:#28a745;">{{ trans('quiz.correct') }}</span>
                                                        @endif
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="text-danger font-14">
                                                    {{ __('Did not select any option') }}
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    </div>
@endsection