@extends('frontend.layouts.app')



@section('content')
<style>
    .disabled {
        opacity: 0.2;
        /* Dim the button */
        pointer-events: none;
        /* Prevent pointer events (clicks) */
    }


    #previous-button {
        float: left;
    }

    #next-button,
    #submit-button {
        float: right;
    }


    .answer-container {
        border: 1px solid rgb(197, 196, 196);
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .correct-answer {
        background-color: rgba(0, 255, 0, 0.3) !important;
        /* Light green */
        border: 1px solid green;
        width: 100%;
    }

    .incorrect-answer {
        background-color: rgba(255, 0, 0, 0.3) !important;
        /* Light red */
        border: 1px solid red;
    }

    .percentage {
        font-size: 14px;
        margin-left: 10px;
    }

    .answer-container span {
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
    }

    .selected {
        background-color: #2e2a2a;
        font-weight: bold;
        color: #dad4d4
    }

    .question-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 question-back">
    <div class="container">
        <div class="row justify-content-center">
            <!-- Add margin-bottom to create space below this 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="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:12px"
                            src="{{ asset('/frontend/assets/images/r.png') }}" />
                        <div style="margin-top:15px; margin-left:12px">
                            <h6 class="p-0 m-0">Demo Revision</h6>
                            <p style="margin-top:-5px"> Source: <span style="font-size:12px">Free</span></p>
                        </div>
                    </div>
                    {{-- <div class="mt-4">
                        <p style="margin-right:25px" id="timeSchedule">00:00 </p>
                    </div> --}}
                </div>
                <hr style="margin-top:-10px; margin-bottom:17px">
                <p id="questionText"></p>
                <div class="p-3 row">
                    <input type="hidden" name="id" id="questionId" />
                    <input type="hidden" name="correct_answer" id="correct_answer" />
                    <input type="hidden" name="see_answer" id="see_answer" />
                    <div class="answer_correct" id="answersContainer"></div>
                    <span class="mt-2 alert alert-danger" id="answerError" style="display: none;">This field is
                        required.</span>
                    <a style="background:rgb(19, 125, 151); font-size:25px; border:1px solid rgb(19, 125, 151); color:white; border-radius:4px; text-align:center; padding-left:5px; padding-right:5px; padding-top:6px; padding-bottom:6px; float:left; width:14%;"
                        class="btn me-2 btn-primary see-btn" id="seeAnswer" disabled>See Answer</a>

                    <div class="" style="float:right; margin-top:-38px">
                        <div class="d-flex" style="float: right">
                            <button type="button" class="px-4 mb-4 btn btn-primary me-2" id="previousButton"
                                style="display: none;">Previous</button>
                            <a class="px-4 mb-4 btn btn-primary disabled me-2" id="endButton"
                                style="display: none;">End</a>
                            <a href="{{route('frontend.demo.history')}}" style="display:none" type="submit" id="result"
                                class="px-4 mb-4 btn btn-primary">See Result</a>
                            <button type="submit" id="nextSubmit" 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="p-5 col-xl-4 col-lg-4 order-lg-2 question-second-part">

                {{-- <p class="mt-3">Questions Review:</p>
                <hr style="margin-top: -10px"> --}}

                {{-- <div>
                    <label class="mt-4" for="file">Showing progress:</label>
                    <progress style="width:100%" id="file" value="70" max="100"> 70% </progress>
                </div> --}}

                <div>
                    <p class="mt-3">Answer Overview :</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')
            }
        });

        function jumpQuestion(question_id=null) {

            $.ajax({
                    url: "{{ route('frontend.load.question') }}",
                    type: 'GET',
                    data:{ question_id: question_id },
                    success: function(response) {
                        console.log(response);
                        setCookie('answers', JSON.stringify([]), 365);
                        setCookie('nextq', response.nextq, 365);
                        setCookie('correctans', 0, 365);
                        setCookie('wrongans', 0, 365);
                        setCookie('correctanswer', JSON.stringify([]), 365);
                        setCookie('endOfQuestions', response.endOfQuestions, 365);
                        setCookie('seeAnswerState', JSON.stringify([]), 365);
                        populateQuestion(response);
                        $('#questionStatus_' + question_id).addClass('selected');
                    }
                });

        }


        // Function to handle showing the first question
        function showQuestion() {


                $.ajax({
                    url: "{{ route('frontend.demo.question') }}",
                    type: 'GET',
                    success: function(response) {
                        console.log(response);
                        setCookie('answers', JSON.stringify([]), 365);
                        setCookie('nextq', response.nextq, 365);
                        setCookie('correctans', 0, 365);
                        setCookie('wrongans', 0, 365);
                        setCookie('correctanswer', JSON.stringify([]), 365);
                        setCookie('endOfQuestions', response.endOfQuestions, 365);
                        setCookie('seeAnswerState', JSON.stringify([]), 365);
                        populateQuestion(response);
                    }
                });
            }


            // 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: "Opps...",
            //             text: "Time's up!",
            //             icon: "info"
            //         });

            //         }
            //     }, 1000);
            // }

        //End  add question status code

            // Function to populate the question and answers
            function populateQuestion(response) {

                $('#questionText').text(response.question.question);
                $('#questionId').val(response.question.id);
                $('#correct_answer').val(response.correctAnswerId);
                $('#countQ').text(response.nextq);
                let answersHtml = '';
                response.question.answer.forEach(function(answer) {

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

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

                if (response.endOfQuestions) {
                    $('#endButton').css('display', 'block');
                    $('#result').css('display', 'block');
                    $('#nextSubmit').css('display', 'none');
                } else {
                    $('#endButton').css('display', 'none');
                    $('#nextSubmit').css('display', 'block');
                }

                // Restore see answer state

                if (response.seeAnswer) {
                    console.log(response.seeAnswer)
                    let correctAnswerId = $('#correct_answer').val();
                    let selectedAnswerId = $("input[name='selected_answer']:checked").val();
                    let selectedAnswerElement = document.querySelector('.answer_' + selectedAnswerId);
                    let correctAnswerElement = document.querySelector('.answer_' + correctAnswerId);
                    var selectedAnswerContainer = selectedAnswerElement.closest('.answer-container');
                    var correctAnswerContainer = correctAnswerElement.closest('.answer-container');
                    if (selectedAnswerId !== correctAnswerId) {
                        // selectedAnswerElement.classList.add('incorrect-answer');
                        selectedAnswerContainer.classList.add('incorrect-answer');
                    }
                    // correctAnswerElement.classList.add('correct-answer');
                    correctAnswerContainer.classList.add('correct-answer');
                }

            //Start the timer
            //let threeMinutes = 60 * 1,
            //display = $('#timeSchedule');
            //clearInterval(timerInterval); 
            //startTimer(threeMinutes, display);


            // Initialize or update the question status

            let currentQuestion = response.nextq;

            let status = response.userSelectedanswers[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="mt-2 list-group-item selected" onclick="jumpQuestion(${currentQuestion})" 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`);
            });


            }

            // Initial call to show the first question
            showQuestion();



              // Add click event listeners to question status list items
            //   $('#totalAnswerQuestion li').on('click', function() {
            //     let questionIndex = $(this).data('question-index');
            //     showQuestion(questionIndex);
            //     // loadQuestion(questionIndex);
            // });




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

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


                // Clear any previous error messages
                $('#answerError').css('display', 'none');

                // Check if an answer is selected
                //if (!$('input[name="selected_answer"]:checked').val()) {
                    //$('#answerError').css('display', 'block');
                    //return;
                //}

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

                        // Retrieve correctans and wrongans from cookies or initialize them
                        let correctans = parseInt(getCookie('correctans')) || 0;
                        let wrongans = parseInt(getCookie('wrongans')) || 0;

                        // Update the cookies with the new values
                        setCookie('answers', JSON.stringify(response.userSelectedanswers), 365);
                        setCookie('nextq', response.nextq, 365);
                        setCookie('correctans', correctans, 365);
                        setCookie('wrongans', wrongans, 365);
                        setCookie('correctanswer', JSON.stringify(response.correctanswer), 365);
                        setCookie('seeAnswerState', JSON.stringify(response.seeAnswer), 365);
                        setCookie('endOfQuestions', response.endOfQuestions, 365);
                        populateQuestion(response);
                    }
                });
            });


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

                        // Update the cookies with the new values
                        // setCookie('answers', JSON.stringify(response.session.userSelectedanswers), 365);
                        setCookie('nextq', response.nextq, 365);
                        setCookie('correctans', correctans, 365);
                        setCookie('wrongans', wrongans, 365);
                        setCookie('correctanswer', JSON.stringify(response.correctanswer), 365);
                        setCookie('endOfQuestions', response.endOfQuestions, 365);
                        setCookie('seeAnswerState', JSON.stringify(response.seeAnswer), 365);
                        populateQuestion(response);
                    }
                });
            });




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

        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=/";
        }



        // End first question code

        // End next question get code

        // see answer code start
        document.getElementById('seeAnswer').addEventListener('click', function() {

            if (!$('input[name="selected_answer"]:checked').val()) {
                Swal.fire({
                    title: "Question",
                    text: "Select Any Answer",
                    icon: "question"
                });
            }
            var selectedAnswerId = document.querySelector('input[type="radio"][name="selected_answer"]:checked')
                .value;
            var correctAnswerId = document.getElementById('correct_answer').value;
            $('#see_answer').val(correctAnswerId);
            var selectedAnswerElement = document.querySelector('.answer_' + selectedAnswerId);
            var correctAnswerElement = document.querySelector('.answer_' + correctAnswerId);
            var selectedAnswerContainer = selectedAnswerElement.closest('.answer-container');
            var correctAnswerContainer = correctAnswerElement.closest('.answer-container');
            if (selectedAnswerId !== correctAnswerId) {
                // selectedAnswerElement.classList.add('incorrect-answer')
                selectedAnswerContainer.classList.add('incorrect-answer');
            }
            // correctAnswerElement.classList.add('correct-answer');
            correctAnswerContainer.classList.add('correct-answer');

            let seeAnswerState = JSON.parse(getCookie('seeAnswerState')) || {};
            seeAnswerState[$('#questionId').val()] = true;
            setCookie('seeAnswerState', JSON.stringify(seeAnswerState), 365);

        });

        //End of  see answer code
</script>
@endpush