@extends('admin.layouts.app')

@section('content')
<section id='admin'>
    <div class='box'>
        <div class="box-content">
            <div class='box-title'>
                <a href="{{ route('admin.userModuleQuizzes.index') }}">
                    <div class='box-back'>
                        <i class="fa fa-chevron-left"></i>
                    </div>
                </a>
                <p><a href='{{ route('admin.index') }}'>Administración</a> > <a href='{{ route('admin.userModuleQuizzes.index') }}'>Cuestionarios realizados</a> > <b>Detalle</b> </p>
            </div>

            @if ( session('msg') )
                <div class="alert alert-success">
                    {{ session('msg') }}
                    <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
                </div>
            @endif
            
            <div class="box-content">
                <div class="admin-quiz">

                    @php 
                        $quiz = $userQuiz->quiz()->withTrashed()->first();
                        $isApproved = $userQuiz->isApproved();
                        if($isApproved) {
                            $status = 'Aprobado';
                        }
                        else {
                            $status = 'Perdido';
                        }
                    @endphp

                    <div class="inline">
                        <b>Total preguntas:</b>
                        <p>{{ count($quiz->questions()->withTrashed()->get()) }}</p>
                    </div>
                    <div class="inline">
                        <b>Porcentaje de aprobación:</b>
                        <p>{{ $quiz->minimum }}%</p>
                    </div>
                    <div class="inline">
                        <b>Porcentaje obtenido:</b>
                        <p>{{ $userQuiz->result }}%</p>
                    </div>
                    <div class="inline">
                        <b>Estado:</b>
                        <p>{{ $status }}</p>
                    </div>
                    @foreach($userQuiz->answers as $key => $answer)
                        @php 
                            $question = $answer->question()->withTrashed()->first();
                            $questionable = $question->questionable()->withTrashed()->first();
                        @endphp
                        <div class='admin-quiz-question'>
                            @if($questionable->isCorrect($answer->answerable))
                                <div class="badge active">
                                    Pregunta Correcta
                                </div>
                            @else 
                                <div class="badge inactive">
                                    Pregunta Incorrecta
                                </div>
                            @endif
                            <div class='admin-quiz-question-item'>
                                <h3>Pregunta Nº{{ $key + 1 }} - Opción {{ $questionable->type() }}</h3>
                                <p>{{ $question->question }}</p>
                                @if($question->image)
                                    <img src='/storage/quizzes/{{ $question->image }}'>
                                @endif
                            </div>
                            <div class='admin-quiz-question-item'>
                                @if(get_class($questionable) == 'App\Models\Quizzes\Questions\MultipleOptionQuestion')
                                <h3>Opciónes</h3>
                                <div id='admin-quiz-options'>
                                    @foreach($questionable->options()->withTrashed()->get() as $option)
                                        <div class='admin-quiz-option'>
                                            @php $selectedOptionCorrect = false; @endphp
                                            @foreach($answer->answerable->optionAnswers as $optionAnswer)
                                                @if($optionAnswer->option()->withTrashed()->first()->id == $option->id)
                                                    @php $selectedOptionCorrect = true; @endphp
                                                @endif
                                            @endforeach

                                            @if($selectedOptionCorrect && $option->correct)
                                                <div class='admin-quiz-option-prefix'>
                                                    <i class="fas fa-check-circle"></i>
                                                </div>
                                            @elseif($selectedOptionCorrect && !$option->correct)
                                                <div class='admin-quiz-option-prefix bg-red'>
                                                    <i class="fas fa-times-circle"></i>
                                                </div>
                                            @else 
                                                <div class='admin-quiz-option-prefix bg-blue'>
                                                    <i class='fas fa-question-circle'></i>
                                                </div>
                                            @endif
                                                                    
                                            <p>{{ $option->option }}</p>

                                            @if($option->correct)
                                            <b>(Correcta)</b>
                                        @endif
                                        </div>
                                    @endforeach
                                </div>
                                @elseif(get_class($questionable) == 'App\Models\Quizzes\Questions\SimpleQuestion')
                                    <h3>Respuesta</h3>
                                    <p>{{ $questionable->answer }}</p>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endsection