@extends('layouts.master', ['title' => 'Job Seeker Exam Paper'])
@section('content')
    <style>
        body {
            background-color: #eee;
            -webkit-user-select: none;
            /* Safari */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* IE10+/Edge */
            user-select: none;
        }

        label.radio {
            cursor: pointer;
        }

        label.radio input {
            position: absolute;
            top: 0;
            left: 0;
            visibility: hidden;
            pointer-events: none;
        }

        label.radio span {
            padding: 4px 0px;
            border: 1px solid red;
            display: inline-block;
            color: red;
            width: 100px;
            text-align: center;
            border-radius: 3px;
            margin-top: 7px;
            text-transform: uppercase;
        }

        label.radio input:checked+span {
            border-color: red;
            background-color: red;
            color: #fff;
        }

        .ans {
            margin-left: 36px !important;
        }

        .btn:focus {
            outline: 0 !important;
            box-shadow: none !important;
        }

        .btn:active {
            outline: 0 !important;
            box-shadow: none !important;
        }
    </style>



    <div class="content-wrapper" onContextMenu="return false">
        <div class="row">
            <div class="col-12 grid-margin">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title float-left">Exam Paper {{ session()->get('examstarted') }}</h4>
                        <br>
                        <p class="text-danger float-left">*Note: Page refresh is not allowed, if you trying to refresh then your exam is cancelled.</p>
                        <div class="card-title float-right" id="timer">Time allowed :
                            {{ $papers[0]->examsDetails->max_time_allowed }}</div>
                        <form action="{{ route('jobseekerdashboard.store') }}" method="post" class="form-sample"
                            id="examForm">
                            @csrf
                            <input type="hidden" name="selected_option[]" id="selected_option" />
                            <input type="hidden" name="exam_id" value="{{ $papers[0]->exam_id }}" />
                            <div class="container mt-5">
                                <div class="d-flex justify-content-center row">
                                    <div class="col-md-10 col-lg-10">
                                        <div class="border">
                                            <div class="question bg-white p-3 border-bottom">
                                                <div class="d-flex flex-row justify-content-between align-items-center mcq">
                                                    <h4>MCQ Quiz</h4><span id="questionCount">(1 of
                                                        {{ $totalQuestions }})</span>
                                                </div>
                                            </div>

                                            <div class="questionContainer">
                                                <div class="d-flex flex-row align-items-center question-title">
                                                    <h3 class="text-danger">Q.</h3>
                                                    <h5 class="mt-1 ml-2">{{ $papers[0]->question }}?</h5>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="ans ml-2">
                                                            <label>
                                                                <input type="radio" name="option" value="option_one">
                                                                <span>{{ $papers[0]->option_one }}</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="ans ml-2">
                                                            <label>
                                                                <input type="radio" name="option" value="option_two">
                                                                <span>{{ $papers[0]->option_two }}</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="ans ml-2">
                                                            <label>
                                                                <input type="radio" name="option" value="option_three">
                                                                <span>{{ $papers[0]->option_three }}</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="ans ml-2">
                                                            <label>
                                                                <input type="radio" name="option" value="option_four">
                                                                <span>{{ $papers[0]->option_four }}</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div
                                                class="d-flex flex-row justify-content-between align-items-center p-3 bg-white">
                                                <button
                                                    class="btn btn-primary border-success align-items-center btn-success"
                                                    type="button" id="nextButton">Next<i
                                                        class="fa fa-angle-right ml-2"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="submitModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Submit</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="text-danger">Are you want to submit this Assesment ?</p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" id="submitForm" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
<script>
    // Set the time limit in seconds
    var timeLimit = "{{ $papers[0]->examsDetails->max_time_allowed }}"; // 1 hour (3600 seconds)
</script>
<script src="{{asset('assets/js/exam/attempt.js')}}"></script>
    <script>
        $(document).ready(function() {
            var currentQuestionIndex = 0;
            var totalQuestions = {{ $totalQuestions }};
            var papers = {!! json_encode($papers) !!}; // Papers data
            var selectedOptions = [];
            
            // console.log(selectedOptions);
            // Array to store selected options

            function togglePrevButton() {
                if (currentQuestionIndex === 0) {
                    $('#prevButton').prop('disabled', true);
                } else {
                    $('#prevButton').prop('disabled', false);
                }
            }

            function updateQuestionCount() {
                $('#questionCount').text('(' + (currentQuestionIndex + 1) + ' of ' + totalQuestions + ')');
            }

            $('#nextButton').click(function() {
                // Capture selected option
                var indexcount = currentQuestionIndex + 1
                if (totalQuestions == indexcount) {
                    $('#submitModal').modal('show');
                }

                var selectedOption = $('input[name="option"]:checked').val();
                var question_id = {{ $papers[0]->id }} + currentQuestionIndex;
                selectedOptions[currentQuestionIndex] = {
                    index: currentQuestionIndex,
                    option: selectedOption,
                    question_id: question_id
                };
                $('#selected_option').val(JSON.stringify(
                    selectedOptions)); // Store selected options in a hidden input field
                if (currentQuestionIndex < totalQuestions - 1) {
                    currentQuestionIndex++;
                    togglePrevButton();
                    $('.questionContainer').html(getQuestionHTML(currentQuestionIndex));
                    updateQuestionCount();

                }
            });

            $('#prevButton').click(function() {
                if (currentQuestionIndex > 0) {
                    currentQuestionIndex--;
                    togglePrevButton();
                    $('.questionContainer').html(getQuestionHTML(currentQuestionIndex));
                    updateQuestionCount();
                }
            });

            togglePrevButton();
            updateQuestionCount();
            $('.questionContainer').html(getQuestionHTML(currentQuestionIndex));

            function getQuestionHTML(index) {

                var question = papers[index];
                var currentIndexCount = index + 1;

                var html = '<div class="d-flex flex-row align-items-center question-title">' +
                    '<h3 class="text-danger">Q.</h3>' +
                    '<h5 class="mt-1 ml-2">' + question.question + '?</h5>' +
                    '</div>' +
                    '<div class="row">' +
                    '<div class="col-md-6">' +
                    '<div class="ans ml-2">' +
                    '<label>' +
                    '<input type="radio" name="option" value="option_one"> <span>' + question.option_one +
                    '</span>' +
                    '</label>' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-6">' +
                    '<div class="ans ml-2">' +
                    '<label>' +
                    '<input type="radio" name="option" value="option_two"> <span>' + question.option_two +
                    '</span>' +
                    '</label>' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-6">' +
                    '<div class="ans ml-2">' +
                    '<label>' +
                    '<input type="radio" name="option" value="option_three"> <span>' + question.option_three +
                    '</span>' +
                    '</label>' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-6">' +
                    '<div class="ans ml-2">' +
                    '<label>' +
                    '<input type="radio" name="option" value="option_four"> <span>' + question.option_four +
                    '</span>' +
                    '</label>' +
                    '</div>' +
                    '</div>' +
                    '</div>';

                return html;


            }

            // display remaining time




        

            // prevent copy

            document.addEventListener('content-wrapper', function(event) {
                event.preventDefault();
            });

        });

        $('#submitForm').click(function() {
            localStorage.removeItem('refreshCount');
            $("#examForm").submit();
        });

        // Restrictions are started from here.
        function cancelform() {
            $.ajax({
                url: "{{ route('examstatus.cancel') }}",
                type: "POST",
                dataType: "json",
                async: false,
                data: {
                    _token: "{{ csrf_token() }}",
                    exam_id: {{ $papers[0]->exam_id }}
                },
                success: function(data) {
                    if (data.cancelled) {
                        window.location.href = "{{ route('jobseekerdashboard.index') }}";
                    }
                },
                error: function(data) {
                    // console.log('Error:', data);
               }
           })
           // The user is leaving.  You can do a little cleanup here if you need to.      
        }
    </script>   
@endsection