@extends('backend.student.layouts.right_side_bar')
@section('studentBody')
    @php
        $questionIds = \App\Model\NewQuestion::where('exam_id',$exam->id)->select('id');
        $studentQuestions = \App\Model\NewStudentQuestion::where('student_id',$student->id)->whereIn('question_id',$questionIds)->count();
    @endphp
    <!-- Main Container -->
    <main id="main-container">
        <!-- Hero -->
        <div class="bg-body-light">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <h1 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2">{{$heading}}</h1>
                </div>
            </div>
        </div>
        <!-- END Hero -->

        <div class="content pr-0 pl-0">
            <!-- Patients -->
            <div class="block block-rounded js-appear-enabled animated fadeIn" data-toggle="appear">
                <div class="block-content block-content-full">
                    <div class="row justify-content-center">

                        @if(count($questions)>0)
                            @foreach($questions as $key=>$question)
                                @php
                                $mainKey = $key;
                                $allQuestions = $exam->objectiveQuestions;
                                if (isset($question->exam_time)){
                                $examTime = $question->exam_time;
                                }elseif($question->group->default_time){
                                $examTime = $question->group->default_time;
                                }else{
                                $examTime = $exam->default_time;
                                }
                                $questionId = $question->id;
                                @endphp
                                <div class="col-sm-12 mb-3 text-left">
                                    <div class="border-bottom p-2 mb-2">
                                        <span class="font-weight-bold text-primary-dark font-size-h5">Question {{$mainKey + $studentQuestions+1}} of {{count($allQuestions)}} </span>
                                        @if(isset($question->group->name)) <span class="btn btn-outline-dark btn-sm btn-rounded" style="float:right;">Group: {{$question->group->name}}</span>@endif
                                    </div>
                                    <div style="float: right">
                                        <span class="btn btn-danger">Remaining Time: <strong id="timer">{{$examTime}}</strong></span><br>
                                    </div>
                                    <div>
                                        @if($question->use_image=='yes')
                                            @if(isset($question->name))
                                                {{$question->name}}
                                                <a title="Click here to view in large" onclick="window.open('{{config('filesystems.asset').'/'.'online_exams/questions'.'/'.$question->image}}', 'popup', 'height=500,width=600,scrollbars=yes,resize=no,status=no,left=100,top=100');" href="javascript:void(0)">
                                                    <img src="{{config('filesystems.asset').'/'.'online_exams/questions'.'/'.$question->image}}" alt="" style="width: 200px;">
                                                </a>
                                            @else
                                                <a title="Click here to view in large" onclick="window.open('{{url('public/uploads/online_exams/questions'.'/'.$question->image)}}', 'popup', 'height=500,width=600,scrollbars=yes,resize=no,status=no,left=100,top=100');" href="javascript:void(0)">
                                                    <img src="{{config('filesystems.asset').'/'.'online_exams/questions'.'/'.$question->image}}" alt="" style="width: 200px;">
                                                </a>
                                            @endif
                                        @else
                                            <span class="font-size-h5 font-italic font-weight-bold text-dark">
                                                {{$question->name}}
                                            </span>
                                        @endif
                                    </div>
                                    <hr>
                                    <form action="{{url('student/exams'.'/'.$exam->id.'/'.$question->id.'/answer')}}" method="post">
                                        {{csrf_field()}}
                                        <div class="row">
                                            @foreach($question->questionOptions as $optionKey=>$option)
                                                @php
                                                    $keyValue = $optionKey;
                                                    $alpha = range('A', 'Z');
                                                @endphp
                                                <div class="col-md-6 mb-2">
                                                    <div class="custom-control custom-block custom-control-success">
                                                        <span class="badge badge-primary badge-pill">{{$alpha[$keyValue]}}</span>
                                                        <input type="radio" value="{{$option->id}}" class="custom-control-input" id="example-cb-custom-block{{$option->id}}" name="option" required>
                                                        @if($option->use_image=='yes')

                                                            <label class="custom-control-label" for="example-cb-custom-block{{$option->id}}">
                                                                <span class="d-block text-center">
                                                                    <img src="{{config('filesystems.asset').'/'.'online_exams/questions'.'/'.$option->image}}" alt="" style="width: 50px;">
                                                                </span>
                                                            </label>

                                                        @else
                                                            <label class="custom-control-label p-3" for="example-cb-custom-block{{$option->id}}">
                                                    <span class="d-block text-center">
                                                            {{$option->name}}
                                                        </span>
                                                            </label>
                                                        @endif
                                                        <span class="custom-block-indicator">
                                                    <i class="fa fa-check"></i>
                                                </span>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="mt-5 text-center">
                                            <a href="javascript:void(0)" id="skip_form_button" class="btn btn-warning" onclick="document.getElementById('skip_form').submit();"><i class="fa fa-fast-forward"></i> Skip</a>
                                            <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Confirm & Next</button>
                                        </div>
                                    </form>
                                        <form id="skip_form" action="{{url('student/exams'.'/'.$exam->id.'/'.$question->id.'/answer')}}" method="post">
                                            {{csrf_field()}}
                                            <input type="hidden" name="skip" value="yes">
                                        </form>
                                    <hr>
                                </div>

                            @endforeach
                        @else
                            <div class="col-sm-12 mb-3 text-center">
                                <span class="font-size-h5 font-italic font-weight-bold text-success">
                                    Thank you for attending the {{$exam->title}} of {{$exam->semester->name}} ({{$exam->subject->name}}).<br>We will provide you the scholarship offers later through email or call.
                                </span>
                                <br>
                                <a href="{{url('student/exams')}}" class="btn btn-primary mt-2"><i class="fa fa-home"></i> Go to Main Page</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <!-- END Patients -->

        </div>
    </main>
    <!-- END Main Container -->
@endsection
@if(count($questions)>0)
    @section('after_js')
        <script>
            var timeleft = '';
            var downloadTimer = setInterval(function(){
                if(timeleft <= 0){
                    clearInterval(downloadTimer);
                    Snackbar.show({backgroundColor:'#ff9900',actionTextColor: '#fff',showAction: true, pos: 'top-right',text: 'Time Out for this question, Try Next Question'});
                    setTimeout(function(){
                        window.location.href = '{{url('student/exams'.'/'.$exam->id.'/startExam?question_id='.$questionId)}}';
                    }, 3000);
                } else {
                    document.getElementById("timer").innerHTML = timeleft;
                }
                timeleft -= 1;
            }, 1000);
            $(document).bind("contextmenu",function(e) {
                e.preventDefault();
            });
            $(function () {
                $(document).keydown(function (e) {
                    return (e.which || e.keyCode) != 116;
                });
            });
        </script>
    @endsection
@endif