@extends('layouts.frontend')
@section('js_after')
    <script>
        $(window).bind('beforeunload', function(e) {
            return "Unloading this page may lose data. What do you want to do..."
            e.preventDefault();
        });


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });

        var endExam = "{{route('frontend.endExam')}}";

        $(document).on("click","#endexam",function () {
           var result = confirm("Are you sure ?");
            if(result){
                window.location.href = endExam;
            }
        });

        function showAnswerSummaryCount() {
            var answer = $('li.answer').length;
            var noanswer = $('li.noanswer').length;
            var reviewanswer = $('li.reviewanswer').length;
            $('.answer-count').text(answer);
            $('.noanswer-count').text(noanswer);
            $('.reviewanswer-count').text(reviewanswer);
        }

        $(document).on("click",".check-question-answer",function () {
           var exam = $(this).attr('data-examid');
           var question = $(this).attr('data-question');
           var answer = $(this).val();
            $.ajax({
                url: "{{ route('frontend.saveAnswerTmp') }}",
                method: 'get',
                data: {
                    exam: exam,
                    question: question,
                    answer: answer
                },
                success: function(result){

                }});

            currentTab = $(".divs .question-box:visible").attr('qno');
            var examAnswer = $('input[name="examanswer'+currentTab+'"]:checked').val();
            if(examAnswer){
                $('.mlist-'+currentTab).addClass('answer');
                $('.mlist-'+currentTab).removeClass('noanswer');
                $('.mlist-'+currentTab).removeClass('reviewanswer');
                showAnswerSummaryCount();
            }
        });
        function disableF5(e) {
            if ( ( (e.which || e.keyCode) == 116 ) || ( e.keyCode == 82 && e.ctrlKey ) ) {
                e.preventDefault();
            }
        }

        $(document).bind("keydown", disableF5);

        function Disable(event) {
            if (event.button == 2)
            {
                window.oncontextmenu = function () {
                    return false;
                }
            }
        }

        document.onmousedown = Disable;


        var currentTab = 0;
        $(document).ready(function() {

            $('.clock').text("{{$onlineexam['duration'].':00'}}");
            countdown();
        });
        var interval;

        function countdown() {
            clearInterval(interval);
            interval = setInterval( function() {
                var timer = $('.clock').html();
                timer = timer.split(':');
                var minutes = timer[0];
                var seconds = timer[1];
                seconds -= 1;
                if (minutes < 0) return;
                else if (seconds < 0 && minutes != 0) {
                    minutes -= 1;
                    seconds = 59;
                }
                else if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;

                $('.clock').html(minutes + ':' + seconds);

                if (minutes == 0 && seconds == 0)  clearInterval(interval);
            }, 1000);
        }

        $("#menulist li").click(function(){
            $(".question-box").hide().eq($(this).index()).show();
            var c = $('.question-box').length;
            var ctb = $(this).index()+1;
            if (ctb==1 ){
                $("#prev").hide();
            }else {
                $("#prev").show();
            }
            if (ctb==c){
                $("#next").hide();
            }else{
                $("#next").show();
            }

            var examAnswer = $('input[name="examanswer'+ctb+'"]:checked').val();
            if(examAnswer){
                $('.mlist-'+ctb).addClass('answer');
                $('.mlist-'+ctb).removeClass('noanswer');
                $('.mlist-'+ctb).removeClass('reviewanswer');
            }else {
                $('.mlist-'+ctb).removeClass('answer');
                $('.mlist-'+ctb).removeClass('reviewanswer');
                $('.mlist-'+ctb).addClass('noanswer');
            }


            /*if (c>0){
                for (var ct=1;ct<=ctb;ct++){
                    var examAnswer = $('input[name="examanswer'+ct+'"]:checked').val();
                    if(examAnswer){
                        $('.mlist-'+ct).addClass('answer');
                    }else {
                        $('.mlist-'+ct).addClass('noanswer');
                    }
                }
            }*/
            showAnswerSummaryCount();
        });

        $(document).ready(function(){
            var currentTab = 0;
            $("#prev").hide();
            $(".divs .question-box").each(function(e) {
                if (e != 0)
                    $(this).hide();
            });

            $("#review").click(function () {
                var c = $('.question-box').length;
                //currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
                //currentTab = $(".divs .question-box:visible").attr('qno');
                currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
                $("#prev").show();
                if (currentTab == (c - 1)) {
                    $("#next").hide();
                } else {
                    $("#next").show();
                }

                if ($(".divs .question-box:visible").next().length != 0) {
                        $(".divs .question-box:visible").next().show().prev().hide();
                }else {
                    $(".divs .question-box:visible").hide();
                    $(".divs .question-box:first").show();
                }
                var examAnswer = $('input[name="examanswer'+currentTab+'"]:checked').val();
                if(examAnswer){
                    $('.mlist-'+currentTab).removeClass('answer');
                    $('.mlist-'+currentTab).removeClass('noanswer');
                    $('.mlist-'+currentTab).removeClass('reviewanswer');
                    $('.mlist-'+currentTab).addClass('reviewanswer');
                }else {
                    $('.mlist-'+currentTab).addClass('reviewanswer');
                    $('.mlist-'+currentTab).removeClass('noanswer');
                    $('.mlist-'+currentTab).removeClass('answer');
                }
                showAnswerSummaryCount();
            });

            $("#clear").click(function(){
                $('.divs .question-box:visible input:radio').each(function() {
                    $(this).prop('checked', false);
                });
                currentTab = $(".divs .question-box:visible").attr('qno');

                    $('.mlist-'+currentTab).removeClass('answer');
                    $('.mlist-'+currentTab).addClass('noanswer');

                showAnswerSummaryCount();
            });


            $("#next").click(function(){
                var c = $('.question-box').length;
                currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
                $("#prev").show();
                if (currentTab == (c - 1)) {
                    $("#next").hide();
                } else {
                    $("#next").show();
                }

                if ($(".divs .question-box:visible").next().length != 0)
                    $(".divs .question-box:visible").next().show().prev().hide();
                else {
                    $(".divs .question-box:visible").hide();
                    $(".divs .question-box:first").show();
                }
               var examAnswer = $('input[name="examanswer'+currentTab+'"]:checked').val();
                if(examAnswer){
                    $('.mlist-'+currentTab).addClass('answer');
                    $('.mlist-'+currentTab).removeClass('noanswer');
                    $('.mlist-'+currentTab).removeClass('reviewanswer');
                }else {
                    $('.mlist-'+currentTab).addClass('noanswer');
                    $('.mlist-'+currentTab).removeClass('answer');
                    $('.mlist-'+currentTab).removeClass('reviewanswer');
                }
                showAnswerSummaryCount();

                return false;
            });

            $("#prev").click(function(){
                var c = $('.question-box').length;
                currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
                if (currentTab == 0) {
                    $("#next").show();
                    $("#prev").hide();
                }
                if (currentTab < (c - 1)) {
                    $("#next").show();
                }

                if ($(".divs .question-box:visible").prev().length != 0)
                    $(".divs .question-box:visible").prev().show().next().hide();
                else {
                    $(".divs .question-box:visible").hide();
                    $(".divs .question-box:last").show();
                }

                var ctpv = currentTab+2;
                var examAnswer = $('input[name="examanswer'+ctpv+'"]:checked').val();
                if(examAnswer){
                    $('.mlist-'+ctpv).addClass('answer');
                    $('.mlist-'+ctpv).removeClass('noanswer');
                    $('.mlist-'+ctpv).removeClass('reviewanswer');
                }else {
                    $('.mlist-'+ctpv).addClass('noanswer');
                    $('.mlist-'+ctpv).removeClass('answer');
                    $('.mlist-'+ctpv).removeClass('reviewanswer');
                }

                showAnswerSummaryCount();
                return false;
            });
        });
    </script>
@endsection
@section('content')
    <style>
        .answer-review-small {
            background: #097a80;
            width: 35px;
            height: 35px;
            text-align: center;
            display: block;
            color: #fff;
            border-radius: 50%;
            line-height: 36px;
        }
        .question-total li.reviewanswer a{
            background: #097a80;
            color: #fff;
        }
    </style>
    <div class="banner">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="page-title">EXAM NAME: {{$onlineexam['name']}}</h2>
                </div>
            </div>
        </div>
        <a href="#" class="btn-chat">Chat With Us</a>
    </div>
    <section class="main-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <div class="row">
                        <div class="col-md-12 mb-3">

                            <div class="divs">
                                @if(isset($exam_question_list) && count($exam_question_list)>0)
                                    @php
                                        $i=1;
                                    @endphp
                                    @foreach($exam_question_list as $question)
                                        <div class="question-box cls1" qno="{{$i}}">
                                            <h5 class="question-step">QUESTION {{$i}} OF {{$exam_question_list->count()}} <span class="badge badge-success">{{$question->question_bank_id?$question->questionDetails->mark:0}} Mark</span></h5>
                                            <p class="question">{{$question->question_bank_id?strip_tags($question->questionDetails->question):''}}</p>
                                            <div class="row">
                                                @php
                                                    $questionOptions = $question->question_bank_id?$question->questionDetails->qusetionOptions:[];
                                                @endphp
                                                @if(isset($questionOptions) && count($questionOptions)>0)
                                                    @php
                                                        $iopt = 'A';
                                                    @endphp
                                                    @foreach($questionOptions as $qoption)
                                                            <div class="col-md-6">
                                                                <div class="form-check">
                                                                    <div class="option-num">
                                                                        {{$iopt}}.
                                                                    </div>
                                                                    <div class="custom-control custom-radio">
                                                                        <input
                                                                                data-examid="{{$onlineexam['id']}}"
                                                                                data-question="{{$question->question_bank_id}}"
                                                                                type="radio" id="customRadio{{$qoption['id']}}"
                                                                                name="examanswer{{$i}}"
                                                                                value="{{$qoption['id']}}"
                                                                                class="custom-control-input check-question-answer">
                                                                        <label class="custom-control-label" for="customRadio{{$qoption['id']}}">{{$qoption['title']}}</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @php
                                                            $iopt++;
                                                        @endphp
                                                    @endforeach
                                                @endif

                                                </div>
                                            </div>
                                        @php
                                            $i++;
                                        @endphp
                                    @endforeach
                                @endif

                            </div>
                            <div class="question-action-button mt-3">
                                <button id="prev" class="btn btn-primary btn-round mr-1">Back</button>
                                <button id="review" class="btn btn-info btn-round mr-1">Mark For Review Later</button>
                                <button id="next" class="btn btn-primary-outline btn-round mr-1">Next</button>
                                <button id="clear" class="btn btn-info btn-round mr-1">Clear Answer</button>
                                <button id="endexam" class="btn btn-danger btn-round mr-1">End Exam</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="category-box mb-4">
                        <h3>TIME LEFT</h3>
                        <h2 class="clock countDown text-center"></h2>
                        <span>Min</span>
                    </div>
                    <div class="category-box mb-4">
                        <h3>Review Your Answer</h3>
                        <ul id="menulist" class="question-total">
                            @if(isset($exam_question_list) && count($exam_question_list)>0)
                                @php
                                    $i=1;
                                @endphp
                                @foreach($exam_question_list as $question)
                                    <li class="mlist-{{$i}}">
                                        <a href="javascript:void(0);">{{$i}}</a>
                                    </li>
                                    @php
                                        $i++;
                                    @endphp
                                @endforeach
                            @endif
                        </ul>
                    </div>
                    <div class="category-box mb-4">
                        <h3>Summary</h3>
                        <table class="table">
                            <tr>
                                <td>
                                    Answered
                                </td>
                                <td>
                                    <span class="answer-small answer-count">0</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Marked
                                </td>
                                <td>
                                    <span class="answer-review-small reviewanswer-count ">0</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Not Answered
                                </td>
                                <td>
                                    <span class="not-answer-small noanswer-count">0</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="btm-shape-prt">
            <img class="img-fluid" src="{{url('/')}}/images/shape2.png" alt="" />
        </div>
    </section>


@endsection