@extends('user.layout.mocktest')

@section('title')
    {{{ $setting['site']['site_title'] or '' }}} -
    {{{ trans('main.user_panel') }}}
@endsection

@section('pages')
    <div id="app">
        <exam-panel/>
    </div>
@endsection

@section('script')

    <template id="exam-template">
        <div class="container-fluid test-panel">
            <div class="row">
                <ul class="testpanelnav">
                    <li v-for="(section,index) in sections" :class="{'active':isActive(index)}"
                        @click="selectsection(index)">
                        @{{ section.sectionTitle }}
                    </li>
                </ul>
            </div>
            <div class="row">
                <div class="col-md-12 timer">
                    Timer: <span id="demo"></span>
                </div>
            </div>
            <div class="row panel">
                <div class="col-md-4">
                    <div>
                        <div class="panelhead">Question Panel</div>
                        {{--                        @for($i=1;$i<=25;$i++)--}}
                        <span v-for="(question,index) in sectionquestions[activeSection]" :ref=`que${index}`
                              class="pallet"
                              :class="{'isVisited':isVisited(index),'isMarkforReview':isMarkforReview(index),selectedquestion:isquestionActive(index)}"
                              @click="changeQuestion(activeSection,index)">@{{ index+1 }}</span>
                        {{--                        @endfor--}}
                    </div>
                    <div>
                        <h4>Select Answer For Question  : @{{ questionNumber }}</h4>
                        <div class="options">
                            <input name="answer" v-model="answer" value="1" id="option1" type="radio">
                            <label for="option1">
                                A
{{--                                <span v-html="visibleQuestionSet.option1"></span>--}}
                            </label>
                        </div>
                        <div class="options">
                            <input name="answer" v-model="answer" value="2" id="option2" type="radio">
                            <label for="option2">
                                B
{{--                                <span v-html="visibleQuestionSet.option2"></span>--}}
                            </label>
                        </div>
                        <div class="options">
                            <input name="answer" v-model="answer" value="3" id="option3" type="radio">
                            <label for="option3">
                                C
{{--                                <span v-html="visibleQuestionSet.option3"></span>--}}
                            </label>
                        </div>
                        <div class="options">
                            <input name="answer" v-model="answer" value="4" id="option4" type="radio">
                            <label for="option4">
                                D
{{--                                <span v-html="visibleQuestionSet.option4"></span>--}}
                            </label>
                        </div>
                    </div>
                    <div class="btnset">
{{--                        <div><input type="button" class="btn btn-default" @click="markforReview()"--}}
{{--                                    value="Mark and Next"></div>--}}
                        <div><input type="button" class="btn btn-default" @click="clearAnswer()" value="Clear Answer">
                        </div>
                        <div><input type="button" class="btn btn-default" @click="saveandnext()" value="Save and Next">
                        </div>
                        <div><input type="button" class="btn btn-default" @click="submit()" value="Submit Test"></div>
                    </div>
                </div>
                <div class="col-md-8">
                    {{--                    <div class="question">--}}
                    {{--                        Q@{{ questionNumber }}.--}}
                    {{--                        <span v-html="visibleQuestionSet.questionText"></span>--}}
                    {{--                    </div>--}}
                    <div class="question">
                        <iframe :src="studentMockExam.mockexam.path" width="100%" height="500px"></iframe>
                    </div>
                    {{--                    <div class="options">--}}
                    {{--                        <input name="answer" v-model="answer" value="1" id="option1" type="radio">--}}
                    {{--                        <label for="option1">--}}
                    {{--                            <span v-html="visibleQuestionSet.option1"></span>--}}
                    {{--                        </label>--}}
                    {{--                    </div>--}}
                    {{--                    <div class="options">--}}
                    {{--                        <input name="answer" v-model="answer" value="2" id="option2" type="radio">--}}
                    {{--                        <label for="option2">--}}
                    {{--                            <span v-html="visibleQuestionSet.option2"></span>--}}
                    {{--                        </label>--}}
                    {{--                    </div>--}}
                    {{--                    <div class="options">--}}
                    {{--                        <input name="answer" v-model="answer" value="3" id="option3" type="radio">--}}
                    {{--                        <label for="option3">--}}
                    {{--                            <span v-html="visibleQuestionSet.option3"></span>--}}
                    {{--                        </label>--}}
                    {{--                    </div>--}}
                    {{--                    <div class="options">--}}
                    {{--                        <input name="answer" v-model="answer" value="4" id="option4" type="radio">--}}
                    {{--                        <label for="option4">--}}
                    {{--                            <span v-html="visibleQuestionSet.option4"></span>--}}
                    {{--                        </label>--}}
                    {{--                    </div>--}}
                </div>
            </div>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('exam-panel', {
            template: '#exam-template',
            created() {
                this.sections = {!! json_encode($sections) !!}

                    this.visibleQuestionSet = this.sectionquestions[this.activeSection][this.activequestion]

                this.answer = this.visibleQuestionSet.mockexamsheet['answerOption'];

                var countDownDate = new Date().getTime() + this.timer * 60 * 1000;

                if(this.studentMockExam.mockexam.type=='Mock Exam'){
                    var x = setInterval(() => {

                        // Get today's date and time
                        var now = new Date().getTime();

                        // Find the distance between now and the count down date
                        var distance = countDownDate - now;

                        // Time calculations for hours, minutes and seconds
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                        // Display the result in the element with id="demo"
                        document.getElementById("demo").innerHTML = hours + ":"
                            + minutes + ":" + seconds;

                        // If the count down is finished, write some text
                        if (distance < 0) {
                            clearInterval(x);
                            this.submit();
                            document.getElementById("demo").innerHTML = "EXPIRED";
                        }
                    }, 1000);
                }
            },
            data: () => {
                return {
                    timer:{!! json_encode($timer) !!},
                    activeSection: '0',
                    activequestion: '0',
                    answer: '',
                    visibleQuestionSet: {
                        questionText: 'This is question?',
                        option1: 'Option1',
                        option2: 'Option2',
                        option3: 'Option3',
                        option4: 'Option4',
                    },

                    sections: null,
                    sectionquestions:{!! json_encode($sectionQuestions) !!},
                    studentMockExamId:{!! json_encode($studentMockExam->id) !!},
                    studentMockExam:{!! json_encode($studentMockExam) !!}
                }
            },
            computed: {
                questionNumber() {
                    return parseInt(this.activequestion) + 1;
                }
            },
            methods: {
                isMarkforReview(questionnumber) {
                    return this.sectionquestions[this.activeSection][questionnumber]['mockexamsheet']['review'] == 1
                },
                markforReview() {
                    let studentMockExamId={!! json_encode($studentMockExamId) !!};
                    $.ajax({
                        type: 'post',
                        url: '/user/practicetest/markreview',
                        data: {
                            'studentMockExamId':studentMockExamId,
                            'questionId': this.sectionquestions[this.activeSection][this.activequestion]['id']
                        }
                    }).done(res => {
                        this.activequestion
                        this.$refs['que' + this.activequestion].addClass('isMarkforReview')

                        if (this.activequestion != this.sectionquestions[this.activeSection].length - 1) {
                            this.changeQuestion(this.activeSection, ++this.activequestion);
                        }
                    });
                },
                isVisited(questionnumber) {
                    return this.sectionquestions[this.activeSection][questionnumber]['mockexamsheet']['visited'] == 1
                },
                clearAnswer() {
                    this.answer = '';
                },
                isActive(sectionindex) {
                    return this.activeSection == sectionindex;
                },
                isquestionActive(questionindex) {
                    return this.activequestion == questionindex;
                },
                changeQuestion(activesection, activeQuestion) {
                    let studentMockExamId={!! json_encode($studentMockExamId) !!};
                    $.ajax({
                        type: 'post',
                        url: '/user/practicetest/updateStatus',
                        data: {
                            'studentMockExamId':studentMockExamId,
                            'questionId': this.sectionquestions[activesection][activeQuestion]['id']
                        }
                    }).done(res => {
                        this.answer = res.answerOption
                        this.sectionquestions[this.activeSection][this.activequestion]['mockexamsheet'] = res
                    });

                    this.visibleQuestionSet = this.sectionquestions[activesection][activeQuestion];
                    // this.answer=this.visibleQuestionSet.mockexamsheet['answerOption'];
                    this.activequestion = activeQuestion;
                },
                selectsection(section) {
                    this.activeSection = section
                    this.activequestion = 0;
                    this.changeQuestion(section, this.activequestion);
                },
                saveandnext() {
                    let studentMockExamId={!! json_encode($studentMockExamId) !!};
                    $.ajax({
                        type: 'post',
                        url: '/user/practicetest/update',
                        data: {
                            'studentMockExamId':studentMockExamId,
                            'answerOption': this.answer,
                            'answerable': this.sectionquestions[this.activeSection][this.activequestion]['answer'],
                            'questionId': this.sectionquestions[this.activeSection][this.activequestion]['id']
                        }
                    }).done(res => {
                        console.log(res)

                        this.sectionquestions[this.activeSection][this.activequestion]['mockexamsheet'] = res

                    });
                    if (this.activequestion != this.sectionquestions[this.activeSection].length - 1) {
                        this.changeQuestion(this.activeSection, ++this.activequestion);
                    } else {
                        console.log('Active section', this.activeSection)
                        console.log('Total section', this.sections.length - 1)
                        if (this.activeSection < this.sections.length - 1) {
                            this.activeSection++;
                            this.activequestion = 0;
                            this.changeQuestion(this.activeSection, this.activequestion);
                        }

                    }

                },
                submit() {
                    $.ajax({
                        type: 'post',
                        url: '/user/practicetest/exam',
                        data: {
                            'studentMockExamId': this.studentMockExamId
                        }
                    }).done(res => {
                        window.location.href = '/user/mockexam/result/' + this.studentMockExamId+'/'
                    })
                }
            }
        })

        new Vue({
            el: '#app',
            data: {
                message: 'Ok'
            }
        });
    </script>
@endsection