@extends('frontend.layouts.app')
@section('content')

<style>
    .exam-back {
        background-image: url("{{ asset('/frontend/assets/images/back.jpg') }}");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 770px;
        opacity: 90%;
    }
</style>

<section class="space-top space-extra2-bottom exam-back">
    <div class="container">
        <div class="row">

            <div style="margin:0 auto; background:rgb(255, 255, 255); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius:6px;"
                class="mt-5 mb-5 col-xl-8 col-lg-8 order-lg-2 question-first-part">
                
                <div class="d-flex justify-content-between">
                    <div style="display:flex">
                        <img style="width:55px; height:55px; margin-bottom:35px; margin-top:15px" src="{{ asset('/frontend/assets/images/e.png') }}" />
                        @php
                        $user = Auth::user();
                        $data  = \app\Models\user::with('course')->find($user->id);
                        @endphp
                        
                        <div style="margin-top:15px; margin-left:12px">
                            <h6 class="p-0 m-0">Mock Exam</h6>
                            <p style="margin-top:-5px"> Courses: <span style="font-size:12px">{{$data->course->name}} </span></p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <p style="margin-right:25px;font-size:14px">QUESTION <span id="EcountQ">1</span> OF <span>120</span></p>
                    </div>


                </div>
                <hr style="margin-top:-10px; margin-bottom:17px">
                <p id="EquestionText"></p>
                <div class="p-3 row">

                    <input type="hidden" name="id" id="EquestionId" />
                    <input type="hidden" name="correct_answer" id="Ecorrect_answer" />
                    <input type="hidden" name="see_answer" id="Esee_answer" />
                    <div class="answer_correct" id="EanswersContainer">
                    </div>

                    <div class="mt-3" style="float:right">
                        <div class="d-flex" style="float: right">
                            <button type="button" class="px-4 mb-4 btn btn-primary me-2" id="EpreviousButton"
                                style="display: none;">Previous</button>
                            <button type="button" class="px-4 mb-4 btn btn-danger me-2" id="endExam">End Exam</button>
                            <a class="px-4 mb-4 btn btn-primary disabled me-2" id="endButton"
                                style="display: none;">End</a>
                            <button type="submit" id="EnextSubmit" class="px-4 mb-4 btn btn-primary">Next</button>
                        </div>
                    </div>
                </div>
            </div>

            <div style="margin:0 auto; background:rgb(255, 255, 255); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius:6px;"
                class="mt-5 col-xl-4 col-lg-4 order-lg-2 p-4 question-second-part">
                <div class="d-flex justify-content-between">
                    <div>
                        <p>TIME REMAINING</p>
                    </div>
                    <div>
                        <p style="margin-right:25px" id="timeSchedule">00:00 </p>
                    </div>
                </div>
                <hr style="margin-top: -10px">
                <div>
                    <p class="mt-3">QUESTIONS:</p>
                    <hr style="margin-top: -10px">

                    <div class="d-flex justify-content-between">
                        <ul class="list-group w-100" id="totalAnswerQuestion">
                        </ul>
                    </div>

                </div>
            </div>

        </div>

    </div>
</section>

@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>
    $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#endExam').on('click',function(){

            var username = "{{ Auth::user()->name }}";
            Swal.fire({
                title: "Ending Mock Exam",
                text: "This will end your current exam and show your results. Unanswered questions will be marked as incorrect. Do you wish to continue?",
                icon: "info",
                showCancelButton: true,
                confirmButtonText: "Confirm",
                allowOutsideClick: false,
                allowEscapeKey: false,
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = '/exam-history/' + username;
                }
            });

        });

        function jumpQuestion(question_id=null) {

        $.ajax({
                url: "{{ route('frontend.load.exam.question') }}",
                type: 'GET',
                data:{ question_id: question_id },
                success: function(response) {
                    console.log(response);
                    setCookie('Eanswers', JSON.stringify([]), 365);
                    setCookie('Enextq', response.Enextq, 365);
                    setCookie('Ecorrectans', 0, 365);
                    setCookie('Ewrongans', 0, 365);
                    setCookie('Ecorrectanswer', JSON.stringify([]), 365);
                    setCookie('EendOfQuestions', response.endOfQuestions, 365);
                    setCookie('EseeAnswerState', JSON.stringify([]), 365);
                    TotalFunctionality(response);
                    $('#questionStatus_' + question_id).addClass('selected');
                }
            });

        }


        function showQuestion() {
            $.ajax({
                url: "{{ route('frontend.exam.question') }}",
                type: 'GET',
                success: function (response) {
                    console.log(response);
                    setCookie('Eanswers', JSON.stringify([]), 365);
                    setCookie('Enextq', response.Enextq, 365);
                    setCookie('correctans', 0, 365);
                    setCookie('Ewrongans', 0, 365);
                    setCookie('Ecorrectanswer', JSON.stringify([]), 365);
                    setCookie('EendOfQuestions', response.EendOfQuestions, 365);
                    setCookie('EseeAnswerState', JSON.stringify([]), 365);
                    startTimer(response.timeLeft);

                    TotalFunctionality(response);

                }
            });
        }

        // Timer section here
        let timerInterval;
        let currentQuestionIndex = 1;
        function startTimer(duration, display) {
            
            let timer = duration, minutes, seconds, html;
            timerInterval = setInterval(function () {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;
                html = '<i class="fa-solid fa-question" title="In the exam you have one minute to answer each question."></i>';
                display.html(minutes + ": " + seconds + "  " + html);

                if (--timer < 0) {
                    clearInterval(timerInterval);
                    Swal.fire({
                        title: "Oops...",
                        text: "Time's up!",
                        icon: "info",
                        showCancelButton: true,
                        confirmButtonText: "Submit",
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                    }).then((result) => {
                       if (result.isConfirmed) {
                       var username = "{{ Auth::user()->name }}";
                       window.location.href = '/exam-history/' + username;
                       }
                    });

                }
            }, 1000);
        }



        function TotalFunctionality(response) {

            $('#EquestionText').text(response.Equestion.question);
            $('#EquestionId').val(response.Equestion.id);
            $('#Ecorrect_answer').val(response.EcorrectAnswerId);
            $('#EcountQ').text(response.Enextq);

            let answersHtml = '';
            response.Equestion.answer.forEach(function (answer) {

                const isChecked = response.EselectedAnswer == answer.id ? 'checked' : '';
                answersHtml += `
                    <div class="p-3 mb-4 col-xl-12 col-lg-12 answer-container">
                        <input type="radio" class="selected_answer" name="selected_answer" id="answer_${answer.id}" value="${answer.id}" ${isChecked} />
                        <label for="answer_${answer.id}" class="answer_${answer.id}" style="font-size: 18px; text-align: left; font-size: 17px;">
                            ${answer.answer}
                        </label>
                    </div>
                `;
            });
            $('#EanswersContainer').html(answersHtml);

            if (response.Enextq > 1) {
                $('#EpreviousButton').css('display', 'block');
            } else {
                $('#EpreviousButton').css('display', 'none');
            }

            if (response.EendOfQuestions) {
                $('#endButton').css('display', 'block');
                $('#EnextSubmit').css('display', 'none');
            } else {
                $('#endButton').css('display', 'none');
                $('#EnextSubmit').css('display', 'block');
            }

            let currentQuestion = response.Enextq;
            let examquestionId = response.EquestionId;
            let status = response.EuserSelectedanswers[currentQuestion] ? 'Answered' : 'Unanswered';
            let questionStatusElement = $('#questionStatus_' + currentQuestion);


            // Remove 'selected' class from all question status items
            $('#totalAnswerQuestion li').removeClass('selected');
            if (questionStatusElement.length === 0) {
                // Append new status if it doesn't exist
                // let questionStatusHtml = `<li id="questionStatus_${currentQuestion}" class="list-group-item mt-2 selected" onclick="jumpQuestion(${currentQuestion})" style="cursor:pointer">Question ${currentQuestion}: ${status}</li>`;
                // $('#totalAnswerQuestion').append(questionStatusHtml);
                let questionStatusHtml = `<li id="questionStatus_${examquestionId}" class="list-group-item mt-2 selected" onclick="jumpQuestion(${examquestionId})" style="cursor:pointer">Question ${currentQuestion}: ${status}</li>`;
                $('#totalAnswerQuestion').append(questionStatusHtml);
            } else {
                // Update existing status
                questionStatusElement.text(`Question ${currentQuestion}: ${status}`);
            }
            // Add event listeners to update the question status list on answer selection
            $('.selected_answer').on('change', function() {
                $('#questionStatus_' + currentQuestion).text(`Question ${currentQuestion}: Answered`);
            });

        }

        showQuestion();

        $(document).ready(function(){
             //Start the timer
             let thirtyMinutes = 60 * 30,
                display = $('#timeSchedule');
            clearInterval(timerInterval); // Clear any existing interval
            startTimer(thirtyMinutes, display);
            // Initialize or update the question status
        })

        $('#EnextSubmit').click(function () {
            currentQuestionIndex++;

            const selectedAnswer = $("input[name='selected_answer']:checked").val();
            const questionId = $('#EquestionId').val();
            const correctAnswer = $('#Ecorrect_answer').val();
            const seeAnswer = $('#Esee_answer').val();

            $.ajax({
                url: "{{ route('frontend.exam.questions.next') }}",
                type: 'POST',
                data: {
                    id: questionId,
                    selected_answer: selectedAnswer,
                    correct_answer: correctAnswer,
                    see_answer: seeAnswer,
                },
                success: function (response) {
                    console.log(response);

                    let Ecorrectans = parseInt(getCookie('Ecorrectans')) || 0;
                    let Ewrongans = parseInt(getCookie('Ewrongans')) || 0;

                    // Update the cookies with the new values
                    setCookie('Eanswers', JSON.stringify(response.EuserSelectedanswers), 365);
                    setCookie('Enextq', response.Enextq, 365);
                    setCookie('Ecorrectans', Ecorrectans, 365);
                    setCookie('Ewrongans', Ewrongans, 365);
                    setCookie('Ecorrectanswer', JSON.stringify(response.Ecorrectanswer), 365);
                    setCookie('EseeAnswerState', JSON.stringify(response.EseeAnswer), 365);
                    setCookie('EendOfQuestions', response.EendOfQuestions, 365);


                    TotalFunctionality(response);


                }
            });
        });

        // Handle the previous button click
        $('#EpreviousButton').click(function () {
            currentQuestionIndex--;
            $('#totalAnswerQuestion li').removeClass('selected');
            $('#questionStatus_' + currentQuestionIndex).addClass('selected');
            $.ajax({
                url: "{{ route('frontend.exam.questions.previous') }}",
                type: 'POST',
                success: function (response) {
                    console.log(response);
                    // Retrieve correctans and wrongans from cookies or initialize them
                    let correctans = parseInt(getCookie('Ecorrectans')) || 0;
                    let wrongans = parseInt(getCookie('Ewrongans')) || 0;

                    // Update the cookies with the new values
                    // setCookie('answers', JSON.stringify(response.session.userSelectedanswers), 365);
                    setCookie('Enextq', response.Enextq, 365);
                    setCookie('Ecorrectans', correctans, 365);
                    setCookie('Ewrongans', wrongans, 365);
                    setCookie('Ecorrectanswer', JSON.stringify(response.Ecorrectanswer), 365);
                    setCookie('EendOfQuestions', response.EendOfQuestions, 365);
                    setCookie('EseeAnswerState', JSON.stringify(response.EseeAnswer), 365);
                    TotalFunctionality(response);
                }
            });
        });

        function setCookie(name, value, days) {
            let expires = "";
            if (days) {
                let date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "") + expires + "; path=/";
        }

        function getCookie(name) {
            let value = "; " + document.cookie;
            let parts = value.split("; " + name + "=");
            if (parts.length === 2) return parts.pop().split(";").shift();
        }


</script>
@endpush