@extends('layouts.app')

@section('content')
<style type="text/css" media="print">
    body { visibility: hidden; display: none }
</style>

<section id="quizzes-go">
    <div class='container'>
        <div class='box'>
            <div class="box-content">
                <div class="module-header">
                    <div class='module-goback'>
                        <a onclick="return confirm('¿Seguro que quieres salir? Se perdera tu progreso')" href="{{ route('modules.go', ['course_id' => $module->course->id, 'id' => $module->id]) }}">
                            <button class='btn btn-special'>
                                <i class="fas fa-arrow-left"></i>
                            </button>
                        </a>
                    </div>
                    <h2>Curso de {{ $module->course->title }}</h2>
                    <p>Cuestionario - <b>Modulo {{ $module->title }}</b></p>    
                </div>

                <div class="module-progress">
                    <div class="item">
                        <div class="number">1</div>
                        <div class="text">Resumen</div>
                    </div>
                    <div class="item">
                        <div class="number">2</div>
                        <div class="text">Contenido</div>
                    </div>
                    <div class="item">
                        <div class="number">3</div>
                        <div class="text">Repaso de conocimientos</div>
                    </div>
                    <div class="item active">
                        <div class="number">4</div>
                        <div class="text">Cuestionario</div>
                    </div>
                </div>

                <p style="text-align: center">Es momento de realizar el cuestionario. Es necesario completarlo para avanzar y completar el curso.</p>

                <hr class='hr-full'>

                <div id="module-go">
                    <form id='quizForm' action="{{ route('quizzes.submit', $moduleQuiz->id) }}" method='POST'>
                        @csrf
                        @method('POST')
                        <input type='text' class='hidden' id='questions' name='questions'>
                        @foreach($moduleQuiz->quiz->questions as $key => $question)
                            <div class="quiz" data-id='{{ $question->id }}' data-type='{{ $question->type }}'>
                                <div class="quiz-header">
                                    <span class='questions-number'>Pregunta {{ $key + 1 }}</span>
                                </div>
                                <div class="quiz-body">
                                    <div class="question">
                                        <input type='text' class='question-id hidden' value='{{ $question->id }}'>
                                        <span class='question-text'>{{ $question->question }}</span>
                                    </div>
                                    <div class="image">
                                        @if($question->image)
                                            <img id='image' src='/storage/quizzes/{{ $question->image }}'>
                                        @endif
                                    </div>
                                    <div id="options">
                                        @if(get_class($question->questionable) == 'App\Models\Quizzes\Questions\MultipleOptionQuestion')
                                            @foreach($question->questionable->options as $option)
                                                <div class="option" data-id="{{ $option->id }}" data-type="multiple">
                                                    <input type="checkbox" class='option-correct' id='option-{{ $option->id }}'>
                                                    <label for='option-{{ $option->id }}'>
                                                        {{ $option->option }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        @elseif(get_class($question->questionable) == 'App\Models\Quizzes\Questions\SimpleQuestion')
                                            <div class="answer" data-type="simple">
                                                <input type="text" class='option-answer'>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <div class="module-go-footer">
                            <button type='submit' class='btn btn-primary btn-big' style='margin: auto;'>Finalizar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<script>

const form = document.querySelector('#quizForm')
form.addEventListener('submit', async e => {
    e.preventDefault()
    await save()
    document.querySelector("#questions").value = JSON.stringify(questions)
    form.submit()
})

function save(element = null) {
    questions = []
    const formQuestions = document.querySelectorAll('.quiz')
    formQuestions.forEach(q => {
        let Question = new Object()
        Question.id = q.dataset.id
        Question.type = q.dataset.type
        if(Question.type == 'multiple') {
            let selectedOptions = []
            q.querySelectorAll('.option').forEach(o => {
                let Option = new Object()
                Option.id = o.dataset.id
                if(o.querySelector('.option-correct').checked)
                    selectedOptions.push(Option) 
            })
            Question.selectedOptions = selectedOptions 
        }
        else if(Question.type == 'simple') {
            Question.answer = q.querySelector('.option-answer').value
        }
        questions.push(Question)
    })
}
</script>
@endsection