@extends('admin.layouts.app')

@section('content')
<section id='admin'>
    <div class='box'>
        <div class="box-content">
            <div class='box-title'>
                <a href='{{ route('admin.modules.show', $module->id) }}'>
                    <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.courses.index') }}'>Cursos</a> > <a href='{{ route('admin.courses.show', $module->course->id) }}'>Detalle de Curso</a> > <a href='{{ route('admin.modules.show', $module->id) }}'>Detalle de Modulo</a> > <b>Agregar Cuestionario</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-body'>
                
                <form 
                    id='form-create-quiz'
                    method='POST'
                    action='{{ route('admin.modules.quizzes.store', $module->id) }}'
                    enctype='multipart/form-data'>
                    
                    @csrf
                    <input type='text' id='questions' class='hidden' name='questions'>
                    <div class='admin-quiz'>
                        <h3>Cuestionario de modulo</h3>
                        <p id='total-questions'>Total de preguntas: 1</p>
                        <div class="form-group">
                            <p>Porcentaje de aprobación:</p>
                            <input type='number' id='minimum' name='minimum' min='1' max='100' value='60' style='width: 200px'>
                        </div>
                        
                        <div id='admin-quiz-questions'>    
                            <div class='admin-quiz-question' data-type="multiple">
                                <div class='admin-quiz-question-remove'>
                                    <i id='admin-quiz-remove-question' class='fas fa-times' onclick='removeQuestion(this)'></i>
                                </div>
                                <div class='form-group'>
                                    <h3>Opción multiple</h3>
                                    <h4 class='admin-quiz-question-id'>Pregunta Nº1</h4>
                                    <input type='text' class='question' maxlength='128' required>
                                </div> 
                                <h4>Imágen (opcional)</h4>
                                <div
                                    class='slim'
                                    data-min-size='600, 200'
                                    data-size='600, 200'
                                    data-ratio='3:1'
                                    data-jpeg-compression='50'>
                                    <input type='file' id='image-1' name='image-1' accept='image/webp, image/png, image/jpeg, image/gif, image/bmp'/>
                                </div>
                                <div class='form-group' style='position: relative'>
                                    <h4>Opción</h4>
                                    <h4 class='admin-quiz-correct-title'>¿Correcta?</h4>
                                    <div class='admin-quiz-options'>
                                        <div class='admin-quiz-option'>
                                            <div class="option-push"></div>
                                            <div class='admin-quiz-option-prefix'>
                                                <i class='fas fa-question-circle'></i>
                                            </div>
                                            <input type='text' class='option' maxlength='128' required>
                                            <input id='checkbox-1-1' class='correct checkbox' type='checkbox'>
                                            <label for='checkbox-1-1' class='checkbox-label'></label>    
                                        </div>
                                        <div class='admin-quiz-option'>
                                            <div class="option-push"></div>
                                            <div class='admin-quiz-option-prefix'>
                                                <i class='fas fa-question-circle'></i>
                                            </div>
                                            <input type='text' class='option' maxlength='128' required>
                                            <input id='checkbox-1-2' class='correct checkbox' type='checkbox'>
                                            <label for='checkbox-1-2' class='checkbox-label'></label>    
                                        </div>
                                    </div>
                                    <span id='admin-quiz-add-option' class='admin-quiz-add' onclick='addOption(this)'>+ Agregar opción</span>
                                </div>        
                            </div>
                        </div>
                    </div>

                    <div class="push"></div>

                    <div class='box-actions'>
                        <button id='admin-quiz-add-multiple-question' class='btn admin-quiz-add' type='button' onclick="addQuestion(1)">
                            + Opción multiple
                        </button>
                        <button id='admin-quiz-add-single-question' class='btn admin-quiz-add' type='button' onclick='addQuestion(2)'>
                            + Opción simple
                        </button>
                        <button type='submit' class='btn btn-primary btn-submit'>Agregar</button>
                    </div>
                    <p id='msg'></p>
                </form>
            </div>
        </div>
    </div>
</section>
<script>
    let questions = []
  
    function randomID() {
        return Math.random().toString(36).substr(2, 9);
    }
    function save(element = null) {
        questions = []
        const formQuestions = document.querySelectorAll('.admin-quiz-question')
        formQuestions.forEach(q => {
            let Question = new Object()
            Question.type = q.dataset.type
            Question.question = q.querySelector('.question').value

            let image = ''
            if(q.querySelector('.slim input').value != '')
                image = q.querySelector('.slim input').id
            Question.image = image

            if(Question.type == 'multiple') {
                let options = []
                q.querySelectorAll('.admin-quiz-option').forEach(o => {
                    let Option = new Object()
                    Option.option = o.querySelector('.option').value
                    Option.correct = o.querySelector('.correct').checked
                    if(Option.option.length > 0)
                        options.push(Option) 
                })
                Question.options = options

                if(Question.question.length > 0 && Question.options.length > 0)
                    questions.push(Question)
            }
            else if(Question.type == 'simple') {
                Question.answer = q.querySelector('.option').value
                
                if(Question.question.length > 0 && Question.answer.length > 0)
                    questions.push(Question)
            }
        })
    }
    function numerateQuestions() {
        const questions = document.querySelectorAll('.admin-quiz-question')
        let n = 0
        questions.forEach(q => {
            n++
            q.querySelector('.admin-quiz-question-id').innerText = 'Pregunta Nº' + n 
        })
        document.querySelector('#total-questions').innerHTML = 'Total de preguntas: ' + n
    }
    function addQuestion(type) {
        if(document.querySelectorAll('.question').length < 100) {
            let div = document.createElement('div')
            div.setAttribute('class', 'admin-quiz-question hide new');
            
            let idImage = randomID()
            if(type == 2) {
                div.setAttribute('data-type', 'simple')
                div.innerHTML = "<div class='admin-quiz-question-remove'> <i id='admin-quiz-remove-question' class='fas fa-times' onclick='removeQuestion(this)'></i> </div> <div class='form-group'> <h3>Opción simple</h3> <h4 class='admin-quiz-question-id'>Pregunta Nº1</h4> <input type='text' class='question' maxlength='128' required> </div> <input type='file' id='image-"+ idImage + "' name='image-" + idImage + "' accept='image/webp, image/png, image/jpeg, image/gif, image/bmp'/> <div class='form-group' style='position: relative'> <h4>Respuesta</h4> <div class='admin-quiz-options'> <div class='admin-quiz-option'> <div class='option-push'></div> <div class='admin-quiz-option-prefix'> <i class='fas fa-question-circle'></i> </div> <input type='text' class='option' maxlength='128' required> </div> </div> </div>"
                document.querySelector('#admin-quiz-questions').appendChild(div); 
            }
            else if(type == 1) {
                let idCheckbox = randomID()
                let idCheckbox2 = randomID()
                div.setAttribute('data-type', 'multiple')
                div.innerHTML = "<div class='admin-quiz-question-remove'> <i id='admin-quiz-remove-question' class='fas fa-times' onclick='removeQuestion(this)'></i> </div> <div class='form-group'> <h3>Opción multiple</h3> <h4 class='admin-quiz-question-id'>Pregunta Nº1</h4> <input type='text' class='question' maxlength='128' required> </div>"
                            + "<h4>Imágen (opcional)</h4><input type='file' id='image-"+ idImage +"' name='image-"+ idImage +"' accept='image/webp, image/png, image/jpeg, image/gif, image/bmp'/>"
                            + "<div class='form-group' style='position: relative'> <h4>Opción</h4> <h4 class='admin-quiz-correct-title'>¿Correcta?</h4> <div class='admin-quiz-options'> <div class='admin-quiz-option'> <div class='option-push'></div> <div class='admin-quiz-option-prefix'> <i class='fas fa-question-circle'></i> </div> <input type='text' class='option' maxlength='128' required> <input id='checkbox-" + idCheckbox + "' class='correct checkbox' type='checkbox'> <label for='checkbox-" + idCheckbox + "' class='checkbox-label'></label> </div> <div class='admin-quiz-option'> <div class='option-push'></div> <div class='admin-quiz-option-prefix'> <i class='fas fa-question-circle'></i> </div> <input type='text' class='option' maxlength='128' required> <input id='checkbox-" + idCheckbox2 + "' class='correct checkbox' type='checkbox'> <label for='checkbox-" + idCheckbox2 + "' class='checkbox-label'></label> </div> </div> <span id='admin-quiz-add-option' class='admin-quiz-add' onclick='addOption(this)'>+ Agregar opción</span> </div></div>"         
                document.querySelector('#admin-quiz-questions').appendChild(div); 
            }
            else return

            new Slim(document.querySelector('#image-' + idImage), {
                ratio: '3:1',
                minSize: {
                    width: 600,
                    height: 200,
                },
                dataJpegCompression: 50
            });
            
            window.setTimeout(fadeIn.bind(null, div), 10);
            numerateQuestions()
            zenscroll.to(div);
        }
        else 
            alert('Máximo de preguntas: 100')
    }
    function addOption(element) {
        let idCheckbox = randomID()
        let optionsDiv = element.parentElement.querySelector('.admin-quiz-options')
        let options = optionsDiv.querySelectorAll('.admin-quiz-option')
        if(options.length < 5) {
            let div = document.createElement('div')
            div.setAttribute('class', 'admin-quiz-option hide')
            div.innerHTML = "<i id='admin-quiz-remove-option' class='fas fa-times' onclick='removeOption(this)'></i><div class='admin-quiz-option-prefix'> <i class='fas fa-question-circle'></i> </div> <input type='text' class='option' maxlength='128'> <input id='checkbox-" + idCheckbox + "' class='correct checkbox' type='checkbox'> <label for='checkbox-" + idCheckbox + "' class='checkbox-label'></label>"
            optionsDiv.appendChild(div); 
            window.setTimeout(fadeIn.bind(null, div), 10)
            if(options.length + 1 == 5)
                element.remove()
        }
    }
    function removeQuestion(element) {
        if(confirm('¿Eliminar pregunta?')) {
            element.onclick = null
            element.parentElement.parentElement.style.opacity = 0;
            window.setTimeout(function() {
                element.parentElement.parentElement.remove()
                numerateQuestions()
            }, 700)
        }
    }
    function removeOption(element) {
        element.onclick = null
        if(element.parentElement.parentElement.parentElement.querySelector('#admin-quiz-add-option') == null) {
            let span = document.createElement('span')
            span.setAttribute('id', 'admin-quiz-add-option')
            span.setAttribute('class', 'admin-quiz-add')
            span.setAttribute('onclick', 'addOption(this)'),
            span.innerHTML = '+ Agregar opción';
            element.parentElement.parentElement.parentElement.appendChild(span)
        }
        element.parentElement.style.opacity = 0;
        window.setTimeout(function() {
            element.parentElement.remove()
        }, 700)
    }
    function fadeIn(div) {
        div.classList.remove('hide')
        div.classList.remove('new')
    }

    const form = document.querySelector('#form-create-quiz')
    form.addEventListener('submit', async e => {
        e.preventDefault()
        await save()
        document.querySelector('#questions').value = JSON.stringify(questions)
        form.submit()
    })
</script>
@endsection