@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 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:100%" src="{{ asset('/frontend/assets/img/pharmacology.svg') }}" /> --}}
                        {{-- <div style="margin-top:15px; margin-left:12px">
                            <h6 class="p-0 m-0">Pharmacology</h6>
                            <p style="margin-top:-5px"> Questions: <span id="EcountQ"></span></p>
                        </div> --}}
                    </div>
                    <div class="mt-4">
                        <p style="margin-right:25px;font-size:14px">QUESTION <span id="RcountQ">1</span> OF <span
                                id="total_question">{{$total_question ?? ''}}</span></p>
                    </div>


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

                    <input type="hidden" name="id" id="RquestionId" />
                    <input type="hidden" name="correct_answer" id="Rcorrect_answer" />
                    <input type="hidden" name="see_answer" id="Rsee_answer" />
                    <div class="answer_correct" id="RanswersContainer">
                    </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="RpreviousButton"
                                style="display: none;">Previous</button>
                            <button type="button" class="px-4 mb-4 btn btn-danger me-2" id="endRevise">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="RnextSubmit" 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>
                    <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')
            }
        });

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

        var username = "{{ Auth::user()->name }}";
        Swal.fire({
            title: "Ending Revision",
            text: "This will end your current revision 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) {
            
            //setCookie('Rstatus', 0, 365);
           

            // Give a short delay before redirecting (to ensure cookie is set)
            setTimeout(function() {
                window.location.href = '/revision-history/' + username;
            }, 100);  // Delay of 100ms
        }
        });

        });

        function jumpQuestion(question_id=null) {
        // alert(question_id);

$.ajax({
        url: "{{ route('frontend.load.revise.question') }}",
        type: 'GET',
        data:{ question_id: question_id },
        success: function(response) {
            console.log(response);
            setCookie('Ranswers', JSON.stringify([]), 365);
            setCookie('Rnextq', response.Rnextq, 365);
            setCookie('Rcorrectans', 0, 365);
            setCookie('Rwrongans', 0, 365);
            setCookie('Rcorrectanswer', JSON.stringify([]), 365);
            setCookie('RendOfQuestions', response.endOfQuestions, 365);
            setCookie('RseeAnswerState', JSON.stringify([]), 365);
            TotalManagement(response);
            $('#questionStatus_' + question_id).addClass('selected');
        }
    });

}        

       

        


        function showQuestion() {
            $.ajax({
                url: "{{ route('frontend.revise.question') }}",
                type: 'GET',
                success: function (response) {
                    console.log(response);
                    setCookie('Ranswers', JSON.stringify([]), 365);
                    setCookie('Rnextq', response.Rnextq, 365);
                    setCookie('Rcorrectans', 0, 365);
                    setCookie('Rwrongans', 0, 365);
                    setCookie('Rcorrectanswer', JSON.stringify([]), 365);
                    setCookie('RendOfQuestions', response.RendOfQuestions, 365);
                    setCookie('RseeAnswerState', JSON.stringify([]), 365);
                    

                    TotalManagement(response);

                }
            });
        }

        

        let currentQuestionIndex = 1;

        function TotalManagement(response) {

            $('#RquestionText').text(response.Rquestion.question);
            $('#RquestionId').val(response.Rquestion.id);
            $('#Rcorrect_answer').val(response.RcorrectAnswerId);
            $('#RcountQ').text(response.Rnextq);

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

                const isChecked = response.RselectedAnswer == 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>
                `;
            });
            $('#RanswersContainer').html(answersHtml);

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

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

            let currentQuestion = response.Rnextq;
            let questionId = response.RquestionId;
            let status = response.RuserSelectedanswers[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>`;
                let questionStatusHtml = `<li id="questionStatus_${questionId}" class="list-group-item mt-2 selected" onclick="jumpQuestion(${questionId})" 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();




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

            const selectedAnswer = $("input[name='selected_answer']:checked").val();
            const questionId = $('#RquestionId').val();
            const correctAnswer = $('#Rcorrect_answer').val();
            const seeAnswer = $('#Rsee_answer').val();

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

                    let Rcorrectans = parseInt(getCookie('Rcorrectans')) || 0;
                    let Rwrongans = parseInt(getCookie('Rwrongans')) || 0;

                    // Update the cookies with the new values
                    setCookie('Ranswers', JSON.stringify(response.RuserSelectedanswers), 365);
                    setCookie('Rnextq', response.Rnextq, 365);
                    setCookie('Rcorrectans', Rcorrectans, 365);
                    setCookie('Rwrongans', Rwrongans, 365);
                    setCookie('Rcorrectanswer', JSON.stringify(response.Rcorrectanswer), 365);
                    setCookie('RseeAnswerState', JSON.stringify(response.RseeAnswer), 365);
                    setCookie('RendOfQuestions', response.RendOfQuestions, 365);


                    TotalManagement(response);


                }
            });
        });

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

                    // Update the cookies with the new values
                    // setCookie('answers', JSON.stringify(response.session.userSelectedanswers), 365);
                    setCookie('Rnextq', response.Rnextq, 365);
                    setCookie('Rcorrectans', correctans, 365);
                    setCookie('Rwrongans', wrongans, 365);
                    setCookie('Rcorrectanswer', JSON.stringify(response.Rcorrectanswer), 365);
                    setCookie('RendOfQuestions', response.RendOfQuestions, 365);
                    setCookie('RseeAnswerState', JSON.stringify(response.RseeAnswer), 365);
                    TotalManagement(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