@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
    }
    </style>

    <div class="breadcumb-wrapper" data-bg-src="{{ asset('frontend') }}/assets/img/bg/breadcumb-bg.jpg" data-overlay="title"
        data-opacity="8">
        <div class="breadcumb-shape" data-bg-src="{{ asset('frontend') }}/assets/img/bg/breadcumb_shape_1_1.png"></div>
        <div class="shape-mockup breadcumb-shape2 jump d-lg-block d-none" data-right="30px" data-bottom="30px"><img
                src="{{ asset('frontend') }}/assets/img/bg/breadcumb_shape_1_2.png" alt="shape"></div>
        <div class="shape-mockup breadcumb-shape3 jump-reverse d-lg-block d-none" data-left="50px" data-bottom="80px">
            <img src="{{ asset('frontend') }}/assets/img/bg/breadcumb_shape_1_3.png" alt="shape">
        </div>
        <div class="container">
            <div class="text-center breadcumb-content">
                <h1 class="breadcumb-title">Courses Page</h1>
                <ul class="breadcumb-menu">
                    <li><a href="index.html">Home</a></li>
                    <li>Courses</li>
                </ul>
            </div>
        </div>
    </div>
    <section class="space-top space-extra2-bottom">
        <div class="container">
            <div class="row">

                <div style="margin:0 auto; background:rgb(255, 255, 255); box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; border-right:2px solid rgb(16, 126, 126)"
                    class="mt-5 col-xl-8 col-lg-8 order-lg-2">
                    <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="countQ"></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:19px; border:1px solid rgb(19, 125, 151); color:white; border-radius:4px; text-align:center; padding-left:20px; padding-right:20px; padding-top:6px; padding-bottom:6px; float:left; width:16%"
                            class="btn me-2 btn-primary " id="seeAnswer" disabled>See Answer</a>

                        <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="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>
                                <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(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; border-right:2px solid rgb(16, 126, 126)"
                    class="mt-5 col-xl-4 col-lg-4 order-lg-2 p-5">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p>Score</p>
                        </div>
                        <div>
                            <p>10%</p>
                        </div>
                    </div>
                    <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');
                    $('#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); // Clear any existing interval
            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="list-group-item mt-2 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