@extends('user.layout.mocktest')

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

@section('pages')
{{--    {{dd(request()->all())}}--}}
    <div class="card">
        <div class="card-body">
            <div id="main" class="tab-pane active">
                <div class="row">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div id="main" class="tab-pane active">
                                    @foreach($questions as $key => $question)
                                        <span onclick="changeQuestion({{$key+1}},{{$question->id}})"
                                              class="badge-info custombadge" id="q-{{$question->id}}" >{{$key + 1}}</span>
{{--                                              class="badge-info custombadge {{$question->answer > 0 ? 'customBadgeAnswered':''}} " id="q-{{$question->id}}" >{{$key + 1}}</span>--}}
                                    @endforeach

{{--                                    @for($i=1;$i<=$questions->count();$i++)--}}
{{--                                        <span onclick="changeQuestion({{$i}})"--}}
{{--                                              class="badge-info custombadge">{{$i}}</span>--}}
{{--                                    @endfor--}}
                                </div>
                            </div>
                        </div>

                        <div class="form-group align-center">
                            <label id="q-ans">Select Answer</label>
                        </div>

                        <div class="form-group align-center">
                            <select id="answer" class="form-control">
                                <option value="0">select answer</option>
                                <option value="1">A</option>
                                <option value="2">B</option>
                                <option value="3">C</option>
                                <option value="4">D</option>
                            </select>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-xs-6 col-sm-6 align-center">
                                <input data-qno="" id="saveandnext" data-qid="" onclick="next()" type="submit"
                                       class="btn btn-primary" value="Next">
                            </div>
                            <div class="col-md-6 col-xs-6 col-sm-6 align-center">
                                <input onclick="previous()" type="button" class="btn btn-primary" value="previous">
                            </div>


                        </div>
                        <div class="row">
                            <div class="col-md-6 col-xs-6 col-sm-6" style="margin-top: 30px">
                                <input onclick="finishExam()" type="button" class="btn btn-primary" value="Finish Exam">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9 mb10">
                        <iframe src="{{$pdf}}" width="100%" height="500px;"></iframe>
                        {{--                    <textarea id="question" class="form-control" placeholder="Question"></textarea>--}}
                    </div>
                </div>
                {{--            <div class="row">--}}
                {{--                <div class="col-md-12 mb10">--}}
                {{--                    <input id="option2" type="text" class="form-control"  placeholder="option2">--}}
                {{--                </div>--}}
                {{--            </div>--}}
                {{--            <div class="row">--}}
                {{--                <div class="col-md-12 mb10">--}}
                {{--                    <input id="option3" type="text" class="form-control"  placeholder="option3">--}}
                {{--                </div>--}}
                {{--            </div>--}}
                {{--            <div class="row">--}}
                {{--                <div class="col-md-12 mb10">--}}
                {{--                    <input id="option4" type="text" class="form-control"  placeholder="option4">--}}
                {{--                </div>--}}
                {{--            </div>--}}

                {{--            <div class="row">--}}
                {{--                <div class="col-md-12 mb10">--}}
                {{--                    <input id="answer" type="text" class="form-control"  placeholder="answer">--}}
                {{--                </div>--}}
                {{--            </div>--}}

                {{--            <div class="row">--}}
                {{--                <div class="col-md-12 mb10">--}}
                {{--                    <textarea id="explaination" class="form-control" placeholder="Explaination"></textarea>--}}
                {{--                </div>--}}
                {{--            </div>--}}
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script>
        let questions;

        $(function () {
            questions = {!! json_encode($questions) !!};
            changeQuestion(1,questions[0].id);
            questions.forEach(function (item) {
                if(item.answer > 0) $('#q-' + item.id).addClass('customBadgeAnswered');
            })

        });

        function changeQuestion(qno,questionId) {
            $('#q-ans').text('Select Answer of Question no ' + qno)
            let question = questions.find(function (item) {
                return item.id == questionId
            });
            $('.custombadge').removeClass('selectedcustombadge');
            $('#q-' + question.id).addClass('selectedcustombadge');
            $('#answer').val(question.answer);
            let saveandnext = $('#saveandnext');
            saveandnext.data('qid', question.id);
            saveandnext.data('qno', qno)
        }

        function previous() {
            let qid = $('#saveandnext').data('qid');
            let currentQuestionIndex = questions.findIndex(function (item) {
                return item.id == qid;
            });
            let prevQuestion = questions[currentQuestionIndex-1];
            if(prevQuestion) {
                $('#q-' + prevQuestion.id).addClass('selectedcustombadge');
                changeQuestion(currentQuestionIndex - 2, prevQuestion.id);
            }
        }

        function next() {
            let fd = new FormData();
            let questionAnswer = $('#answer').val();
            if(questionAnswer == null || questionAnswer <= 0) return alert('please select answer');
            fd.append('answer', questionAnswer);
            let qid=$('#saveandnext').data('qid');
            $.ajax({
                type: 'post',
                url: '/tutor/mockexam/' + qid + '/updateQuestion',
                data: fd,
                processData: false,
                contentType: false,
            }).done(res => {
                $('#q-'+qid).addClass('customBadgeAnswered');
                let currentQuestionIndex = questions.findIndex(function (item) {
                    return item.id == qid;
                });
                questions[currentQuestionIndex] = res.updateQuestion;
                let nextQuestion = questions[currentQuestionIndex+1];
                if(nextQuestion) {
                    $('#q-' + nextQuestion.id).addClass('selectedcustombadge');
                    changeQuestion(currentQuestionIndex + 2, nextQuestion.id);
                }
            });
        }

        function finishExam() {
            let id={!! json_encode($id) !!};

            $.ajax({
                type:'get',
                url:'/tutor/mockexam/'+id+'/check-answers-updated'
            }).done(res => {
                if(!res)
                    alert('Please Update Answers of all Questions First')
                else
                    window.location.href='/tutor/edit-practice-test/{{$examid}}'
            }).fail(res=>{
                console.log("CHECK ANSWERS UPDATED FAIL",res);
            })
        }
    </script>
@endsection