@extends('admin.layouts.app')

@section('content')
<section id='admin'>
    <div class='box'>
        <div class="box-content">
            <div class='box-title'>
                <a href='{{ route('admin.courses.show', $courseQuiz->course->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', $courseQuiz->course->id) }}'>Detalle de Curso</a> > <b>Editar Examen</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.courses.exams.update', ['course_id' => $courseQuiz->course->id, 'id' => $courseQuiz->id]) }}'
                    enctype='multipart/form-data'>
                    
                    @csrf
                    @method('PUT')
                    <input type='text' id='questions' class='hidden' name='questions'>

                    <div class='admin-quiz'>
                        <h3>Examen de curso</h3>
                        <p id='total-questions'>Total de preguntas: {{ count($courseQuiz->quiz->questions) }}</p>
                        <div class="form-group">
                            <p>Porcentaje de aprobación:</p>
                            <input type='number' id='minimum' name='minimum' min='1' max='100' value='{{ $courseQuiz->quiz->minimum }}' style='width: 200px'>
                        </div>
                        
                        <div id='admin-quiz-questions'> 
                            @foreach($courseQuiz->quiz->questions as $i => $question)
                                @if(get_class($question->questionable) == 'App\Models\Quizzes\Questions\MultipleOptionQuestion')
                                    <div class='admin-quiz-question' data-id='{{ $question->id }}' 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º{{ $i + 1 }}</h4>
                                            <input type='text' class='question' maxlength='128' value='{{ $question->question }}' 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'>
                                            @if(!empty($question->image))
                                                <img src='/storage/quizzes/{{ $question->image }}'>
                                            @endif
                                            <input type='file' id='{{ $imgUnique = uniqid() }}' name='{{ $imgUnique }}' 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'>
                                                @foreach($question->questionable->options as $key => $option)
                                                    <div class='admin-quiz-option' data-id='{{ $option->id }}'>
                                                        @if($key < 2)
                                                            <div class="option-push"></div>
                                                        @else
                                                            <i id='admin-quiz-remove-option' class='fas fa-times' onclick='removeOption(this)'></i>
                                                        @endif
                                                        <div class='admin-quiz-option-prefix'>
                                                            <i class='fas fa-question-circle'></i>
                                                        </div>
                                                        <input type='text' class='option' maxlength='128' value='{{ $option->option }}' required>
                                                        <input id='checkbox-{{ $cbUnique = uniqid() }}' class='correct checkbox' type='checkbox' {{ $option->correct ? 'checked=true' : ''}}>
                                                        <label for='checkbox-{{ $cbUnique }}' class='checkbox-label'></label>    
                                                    </div>
                                                @endforeach
                                            </div>
                                            <span id='admin-quiz-add-option' class='admin-quiz-add' onclick='addOption(this)'>+ Agregar opción</span>
                                        </div>        
                                    </div>
                                @elseif(get_class($question->questionable) == 'App\Models\Quizzes\Questions\SimpleQuestion')
                                    <div class='admin-quiz-question' data-id='{{ $question->id }}' data-type="simple">
                                        <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º{{ $i + 1 }}</h4>
                                            <input type='text' class='question' maxlength='128' value='{{ $question->question }}' 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'>
                                            @if(!empty($question->image))
                                                <img src='/storage/quizzes/{{ $question->image }}'>
                                            @endif
                                            <input type='file' id='{{ $imgUnique = uniqid() }}' name='{{ $imgUnique }}' accept='image/webp, image/png, image/jpeg, image/gif, image/bmp'/>
                                        </div>
                                        <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' value='{{ $question->questionable->answer }}' required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </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'>Editar</button>
                    </div>
                    <p id='msg' class='error'></p>
                </form>
            </div>
        </div>
    </div>
</section>
<script>
    let questions = []
  
    function save(element = null) {
        questions = []
        const formQuestions = document.querySelectorAll('.admin-quiz-question')
        formQuestions.forEach(q => {
            let Question = new Object()

            if(q.dataset.id)
                Question.id = q.dataset.id

            Question.type = q.dataset.type
            Question.question = q.querySelector('.question').value

            let image = ''
            if(q.querySelector(".slim input[type=hidden").value != '')
                image = q.querySelector(".slim input[type=hidden").name
            Question.image = image
            Question.imageAction = q.querySelector('.slim').dataset.state

            if(Question.type == 'multiple') {
                let options = []
                q.querySelectorAll('.admin-quiz-option').forEach(o => {
                    let Option = new Object()
                    if(o.dataset.id)
                        Option.id = o.dataset.id
                    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('Limite 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)
            //Remove add option
            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) {
        if(confirm('¿Eliminar opción?')) {
            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')
    }
    function randomID() {
        return Math.random().toString(36).substr(2, 9);
    }

    const form = document.querySelector('#form-create-quiz')
    const msg = document.querySelector('#msg')
    form.addEventListener('submit', async e => {
        e.preventDefault();
        await save()
        if(questions.length > 0)
        {
            q = document.querySelector('#questions')
            q.value = JSON.stringify(questions);
            form.submit(); 
        }
        else {
            e.stopImmediatePropagation()
            msg.innerHTML = "Debe haber al menos una pregunta"
        }
    })
</script>
@endsection