@extends('layouts.app')

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

<section id='quizzes-go-check'>
    <div class='container'>
        <div class='box'>
            <div class="box-content">
                <div class="module-header">
                    <h2>Curso de {{ $module->course->title }}</h2>
                    <b>Modulo {{ $module->title }}</b>
                </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 active">
                        <div class="number">3</div>
                        <div class="text">Repaso de conocimientos</div>
                    </div>
                    <div class="item">
                        <div class="number">4</div>
                        <div class="text">Cuestionario</div>
                    </div>
                </div>

                <hr class='hr-full'>

                <p style="text-align: center;">¡Ahora es momento de realizar el repaso de conocimientos! Este proceso no tiene calificación.</p>

                <div id="module-go">
                    <p id='msg'></p>
                    <div class="quiz">
                        <div class="quiz-header">
                            <span id='questions-number'>Pregunta X/X</span>
                        </div>
                        <div class="quiz-question">
                            <span id='question-text'></span>
                        </div>
                        <div class="quiz-body">
                            
                            <div class="image">
                                <img id='image' src=''>
                            </div>
                            <div id="options">

                            </div>
                        </div>
                        <div class="quiz-footer">
                            <button id='btnNext' class='btn-quiz' onclick='submitQuestion()'>
                                Siguiente
                            </button>
                        </div>
                    </div>
                    <div class="module-go-footer">
                        <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-big'>
                                Volver al Modulo
                            </button>
                        </a>
                        <a href="{{ route('quizzes.go', ['course_id' => $module->course->id, 'id' => $module->id]) }}">
                            <button class='btn btn-primary btn-big'>
                                Ir al Cuestionario
                            </button>
                        </a>
                    </div>
                </div>


                <script>
                    const questions = {!! $moduleQuiz->quiz->questions->toJson() !!}
                    const questionsNumber = document.querySelector('#questions-number')
                    const questionText = document.querySelector('#question-text')
                    const image = document.querySelector('#image')
                    const options = document.querySelector('#options')

                    const btnNext = document.querySelector('#btnNext')
                    const btnPrevious = document.querySelector('#btnPrevious')
                    const btnSubmit = document.querySelector('#btnSubmit')
                    const msg = document.querySelector('#msg')

                    let currentQuestion = -1
                    let submitted = false

                    function finish()
                    {
                        document.querySelector('.quiz').remove()
                        msg.innerHTML = '¡Has terminado el repaso de conocimientos!'
                    }
                    function submitQuestion()
                    {
                        if(submitted && currentQuestion == questions.length - 1)
                            return finish()

                        if(submitted) 
                            return loadQuestion(+1)

                        submitted = true
                        if(questions[currentQuestion].type == 'multiple') {
                            let options = document.querySelectorAll('.option')
                            let selected = []
                            options.forEach(o => {
                                if(o.querySelector('input').checked)
                                    selected.push(o.querySelector('input').id)
                            })

                            compareOptions(selected, getCorrectOptions(currentQuestion))
                        }
                        else if(questions[currentQuestion].type == 'simple') {
                            let p = document.createElement('p')
                            p.setAttribute('id', 'simple-question-answer')
                            p.innerText = 'Respuesta: ' + questions[currentQuestion].answer
                            document.querySelector('.quiz-body').appendChild(p)
                        }
                    }
                    function loadQuestion(sum)
                    {
                        submitted = false
                        currentQuestion += sum

                        if(currentQuestion == -1 || currentQuestion >= questions.length)
                            return
                            
                        question = questions[currentQuestion]

                        /*
                        if(currentQuestion == 0)
                            btnPrevious.style.display = 'none'
                        else 
                            btnPrevious.style.display = 'block'
                        */
                        btnNext.style.display = 'block'

                        questionsNumber.innerHTML = 'Repaso de conocimientos - Pregunta ' + (currentQuestion + 1) + '/' + questions.length
                        questionText.innerHTML = question.question

                        if(question.image) {
                            image.src = '/storage/quizzes/' + question.image
                            image.style.display = 'block'
                        }
                        else {
                            image.src = ''
                            image.style.display = 'none'
                        }   
                        
                        if(document.querySelector('#simple-question-answer'))
                            document.querySelector('#simple-question-answer').remove()

                        document.querySelector('#msg').innerText = ""

                        options.innerHTML = ''
                        
                        if(question.type == 'multiple') {
                            question.options.forEach((o, index) => {
                                let id = 'o' + (index + 1)
                                let option = document.createElement('div')
                                option.setAttribute('class', 'option')
                                
                                let optionInput = document.createElement('input')
                                optionInput.setAttribute('id', 'option-' + o.id)
                                optionInput.setAttribute('type', 'checkbox')
                                option.appendChild(optionInput)

                                let optionLabel = document.createElement('label')
                                optionLabel.setAttribute('for', 'option-' + o.id)
                                optionLabel.innerText = o.option
                                option.appendChild(optionLabel)
                                
                                options.appendChild(option)
                            })
                        }
                        else if(question.type == 'simple') {
                            let answer = document.createElement('div')
                            answer.setAttribute('class', 'answer')
                            let answerInput = document.createElement('input')
                            answerInput.setAttribute('id', 'answer')
                            answerInput.setAttribute('type', 'text')
                            answerInput.setAttribute('placeholder', 'Escriba su respuesta aquí')
                            answer.appendChild(answerInput)
                            options.appendChild(answer)
                        }
                    }
                    function getCorrectOptions(index) 
                    {
                        let correct = []
                        questions[index].options.forEach(o => {
                            if(o.correct)
                                correct.push('option-' + o.id)
                        })
                        return correct
                    }
                    function compareOptions(selectedOptions, correctOptions)
                    {
                        let correct = selectedOptions.filter(x => correctOptions.includes(x));
                        let incorrect = selectedOptions.filter(x => !correctOptions.includes(x));
                        let missing = correctOptions.filter(x => !selectedOptions.includes(x));


                            correct.forEach(c => {
                                highlightOption(c, '#5e9a5e')
                            })
                            incorrect.forEach(i => {
                                highlightOption(i, '#de3737')
                            })
                            missing.forEach(m => {
                                highlightOption(m, '#5e9a5e')
                            })
                    }
                    function highlightOption(id, color)
                    {
                        let selector = document.querySelector('#'+ id)
                        if(selector != null && selector.parentElement != undefined) {
                            document.querySelector('#'+ id).parentElement.style.backgroundColor = color
                            document.querySelector('#'+ id).nextElementSibling.style.color = 'white'
                        }
                    }

                    loadQuestion(+1)
                </script>
            </div>
        </div>
    </div>
</section>
@endsection