@extends('admin.newlayout.layout',['breadcom'=>['mock test','Sections','Edit']])

@section('title')
    Question Panel
@endsection

@section('page')
    <div class="card">
        <div class="card-body">
            <div id="main" class="tab-pane active">
                @for($i=1;$i<=$questions->count();$i++)
                    <span onclick="changeQuestion({{$i}})" class="badge-info custombadge">{{$i}}</span>
                @endfor
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div id="main" class="tab-pane active">
                <div class="row">
                    <div class="col-md-12 mb10">
                        <textarea id="question" class="form-control" placeholder="Question"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 mb10">
                        <input id="option1" type="text" class="form-control" placeholder="option1">
                    </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 class="row">
                    <div class="col-md-6 col-xs-6 col-sm-6">
                        <input onclick="previous()" type="button" class="btn btn-primary" value="previous" >
                    </div>
                    <div class="col-md-6 col-xs-6 col-sm-6 align-right">
                        <input data-qno="" id="saveandnext" data-qid="" onclick="next()" type="submit" class="btn btn-primary" value="Next" >
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


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

        $(function () {
            questions={!! json_encode($questions) !!};
            changeQuestion(1);
            {{--let quesionset=questions[0];--}}
            {{--$('#question').text(quesionset.questionText)--}}
            {{--$('#option1').val(quesionset.option1)--}}
            {{--$('#option2').val(quesionset.option2)--}}
            {{--$('#option3').val(quesionset.option3)--}}
            {{--$('#option4').val(quesionset.option4)--}}
            {{--$('#answer').val(quesionset.answer)--}}
            {{--$('#explaination').val(quesionset.explaination)--}}

            // saveandnext.data('qid',quesionset.id)
            // saveandnext.data('qno',1)
        });

        function changeQuestion(qno) {

            console.log('UPATE',qno);
            let quesionset=questions[qno-1];

            $('#question').val(quesionset.questionText)
            $('#option1').val(quesionset.option1)
            $('#option2').val(quesionset.option2)
            $('#option3').val(quesionset.option3)
            $('#option4').val(quesionset.option4)
            $('#answer').val(quesionset.answer)
            let explaination=quesionset.explaination!=''?quesionset.explaination:'No Explaination'
            $('#explaination').val(explaination)

            let saveandnext=$('#saveandnext');

            saveandnext.data('qid',quesionset.id)
            saveandnext.data('qno',qno)
        }

        function previous() {
            let qno=$('#saveandnext').data('qno');

            console.log(qno)
            if(qno!=1)
            {
                $('#saveandnext').data('qno',qno--)

                changeQuestion(qno--);
            }else
            {
                console.log('Lower Limit Cross')
            }
        }
        function next() {
            let fd=new FormData();
            fd.append('questionText',$('#question').val())
            fd.append('option1',$('#option1').val())
            fd.append('option2',$('#option2').val())
            fd.append('option3',$('#option3').val())
            fd.append('option4',$('#option4').val())
            fd.append('answer',$('#answer').val())
            fd.append('explaination',$('#explaination').val())

            let qid=$('#saveandnext').data('qid');

            $.ajax({
                type:'post',
                url:'/admin/request/'+qid+'/updateQuestion',
                data:fd,
                processData: false,
                contentType: false,
            }).done(res=>{

                let qno=$('#saveandnext').data('qno');

                questions[qno-1]=res.updateQuestion
                if(qno!=questions.length)
                {
                    // questions[qno]=res.updateQuestion;

                    $('#saveandnext').data('qno',qno++)

                    changeQuestion(qno++);
                }else
                {
                    console.log('Upper Limit Cross')
                }

            })
        }
    </script>
@endsection