@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.your_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>

        {{-- temprary hide ans list for students --}}
        {{-- <section class="mt-30 quiz-form">
            @foreach ($quizQuestions as $key => $question)
                <div class="mb-4">
                    <div class="card">
                        <div class="card-header bg-light text-left">
                            <strong>{{ $key + 1 }}. {{ $question->title }}</strong>
                        </div>
                        <div class="card-body text-left">
                            <ul class="list-group">
                                @php
                                    $studentAnswerId = !empty($userAnswers[$question->id])
                                        ? (int) $userAnswers[$question->id]['answer']
                                        : null;
                                    $correctAnswerId = $question->quizzesQuestionsAnswers->where('correct', 1)->first()
                                        ? $question->quizzesQuestionsAnswers->where('correct', 1)->first()->id
                                        : null;
                                @endphp
                                @foreach ($question->quizzesQuestionsAnswers as $answer)
                                    <li class="list-group-item d-flex align-items-center">
                                        <input type="radio" disabled name="question[{{ $question->id }}][answer]"
                                            value="{{ $answer->id }}"
                                            {{ $studentAnswerId === $answer->id ? 'checked' : '' }}
                                            style="margin-right:8px;">
                                        <span>{{ $answer->title }}</span>
                                        @if ($studentAnswerId === $answer->id)
                                            @if ($studentAnswerId === $correctAnswerId)
                                                <span class="badge bg-success ml-2">{{ trans('quiz.correct') }}</span>
                                            @else
                                                <span class="badge badge-danger ml-2">{{ trans('quiz.wrong') }}</span>
                                            @endif
                                        @endif
                                    </li>
                                @endforeach
                                @if (empty($studentAnswerId))
                                    <li class="list-group-item bg-danger d-inline-block px-2 py-1 rounded">
                                        {{ __('No option selected') }}</li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            @endforeach
            </form>
        </section> --}}
    </div>
@endsection

@push('scripts_bottom')
    <script src="/assets/default/js/parts/quiz-start.min.js"></script>
@endpush