@extends('Layouts.Application')

@section('MainContent')

<style>
    .vCenter {
        vertical-align: middle !important;
    }
</style>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML"></script>

<div class="row">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>
                    {{ isset($OnlineExam->subject->subject_name) ? $OnlineExam->subject->subject_name : '' }} - {{ $OnlineExam->title }}

                    <a class="btn btn-warning btn-xs pull-right" href="{{ route('LoggedIn.StudentModule.StudentOnlineExam.index') }}">
                        <i class="fa fa-chevron-left"></i> Go Back
                    </a>

                    <span class="pull-right" style="padding-right: 20px;">
                        Duration: <strong><span class="exam_duration">{{ $remainingMinutes }}<span></strong> min
                    </span>
                </strong>
            </div>
            <div class="form-group form-group-sm" style="padding-top: 0;">
                <form class="form-horizontal" id="submitQuestionForm" method="POST"  action="{{ route('LoggedIn.StudentModule.StudentOnlineExam.submitAnswers') }}" style="font-size:14px;">
                    <p>Click/Press on the circle beside the correct answer</p>
                    {{ csrf_field() }}

                    <input type="hidden" name="online_exam_id" value="{{ $OnlineExam->id }}">
                    <input type="hidden" name="exam_type_id" value="{{ $OnlineExam->exam_type_id }}">
                    <input type="hidden" name="submit_type" value="Auto" id="submit_type">

                    @if ($OnlineExam->description)
				        <p><span class="math-tex">{!! $OnlineExam->description !!}</span></p>
				    @endif

                    @if (!empty($OnlineExam->questions))
                        @foreach ($OnlineExam->questions as $key => $value)
                            <input type="hidden" name="questions[{{ $key }}][question_id]" value="{{ $value->id }}">
                            <div class="form-group form-group-sm">
                                <div class="panel-heading">
                                    <h5 style="margin-bottom: 10px;">{{ $key + 1 }})</h5>
                                    <h3 class="panel-title" style="display: flex; align-items: center;">
                                        <div style="word-wrap: break-word;">{!! $value['question'] !!}</div>
                                    </h3>
                                </div>
                                <div class="form-group form-group-sm">
                                    <div class="form-group form-group-sm">
                                        <div class="col-sm-4">
                                            <div class="well well-sm margin-bottom-none rightOrWrongAlert">
                                                <label class="radio-inline">
                                                    <input type="radio" name="questions[{{ $key }}][answer]" value="1"> {!! $value['option_1'] !!}
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="well well-sm margin-bottom-none rightOrWrongAlert">
                                                <label class="radio-inline">
                                                    <input type="radio" name="questions[{{ $key }}][answer]" value="2"> {!! $value['option_2'] !!}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group form-group-sm">
                                         <div class="col-md-4">
                                            <div class="well well-sm margin-bottom-none rightOrWrongAlert">
                                                <label class="radio-inline">
                                                    <input type="radio" name="questions[{{ $key }}][answer]" value="3"> {!! $value['option_3'] !!}
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="well well-sm margin-bottom-none rightOrWrongAlert">
                                                <label class="radio-inline">
                                                    <input type="radio" name="questions[{{ $key }}][answer]" value="4"> {!! $value['option_4'] !!}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                    <div class="form-group">
                         <div class="col-md-8 text-center">
                        <button class="btn btn-success" type="button" id="submitAnswerBtn">Submit</button>
                     </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
var timer2 = "";

var interval = setInterval(function() {
    var timer = timer2.split(':');
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);

    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;

    if (minutes < 0) {
        clearInterval(interval);
    }

    if (minutes < 0 && seconds < 0) {
        seconds = 0;
        minutes = 0;

        $('#submitQuestionForm').submit();
    } else {
        seconds = (seconds < 0) ? 59 : seconds;
        seconds = (seconds < 10) ? '0' + seconds : seconds;
    }

    $('.exam_duration').html(minutes + ':' + seconds);
    timer2 = minutes + ':' + seconds;
}, 1000);

$("#submitAnswerBtn").on('click', function() {
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to submit again!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Confirmed!'
    }).then((result) => {
        if (result.value) {
            $("#submit_type").val('Manual');
            $("#submitQuestionForm").submit();
        }
    });
});
</script>

@endsection