@extends('frontend.layouts.app')
@php
$cookie = \Illuminate\Support\Facades\Cookie::get('RuserSelectedanswers');
$userSelectedAnswers = json_decode($cookie, true);

$username = Auth::user()->name;

$totalQuestions = count($questions);
$correctCount = 0;
$incorrectCount = 0;

foreach ($questions as $question) {
$selectedAnswer = $userSelectedAnswers[$question->id] ?? null;
$correctAnswer = $question->answer->where('is_correct', '1')->first();

if ($selectedAnswer && $correctAnswer && $selectedAnswer == $correctAnswer->id) {
$correctCount++;
} elseif ($selectedAnswer) {
$incorrectCount++;
}
}
@endphp

@push('css')
<style>
    .question-item {
        border: 1px solid #ddd;
        /* 1px border around each question */
        padding: 10px;
        border-radius: 5px;
        /* Optional: adds slight rounding to the corners */
    }

    .icon-circle {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #ddd;
        /* 1px border around each icon */
        border-radius: 50%;
        /* Makes the icon area circular */
        margin-right: 10px;
        /* Space between icon and question text */
    }

    .correct-icon {
        color: green;
        border-color: green;
    }

    .incorrect-icon {
        color: red;
        border-color: red;
    }

    .neutral-icon {
        color: #747171;
        border-color: #747171;
    }

    .question-item:hover {
        background-color: #f0f0f0;
        /* Light gray background on hover */
        cursor: pointer;
        /* Changes cursor to pointer on hover */
    }

    .progress-container {
        width: 100%;
        height: 12px;
        background-color: red;
        /* Color for incorrect answers */
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .progress-bar {
        height: 100%;
        background: linear-gradient(to right, green 50%, transparent 50%);
        text-align: center;
        line-height: 20px;
        color: white;
        font-weight: bold;
        border-radius: 10px 0 0 10px;
    }

    .filter_design {
        border: 1px solid #ddd;
        padding: 5px;
        color: inherit;
        text-decoration: none;
        margin-right: 4px
    }


    .review-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>

@endpush
@section('content')

<section class="space-top space-extra2-bottom review-back">
    <div class="container">
        <div class="row mb-5">

            <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; height:710px; overflow-y: scroll;"
                class="mt-5 mb-5 col-xl-4 col-lg-4 order-lg-2 question-first-part p-4">

                <div style="border:1px solid gray; margin-top: 1px; margin-bottom:15px; width:60px; height:60px; border-radius:50%; padding:8px; margin-left:-5px">
                    <img style="" width="50px" src="{{asset('/frontend/assets/images/score.png')}}" />
                </div>

                {{-- progress bar start  --}}
                <div class="d-flex justify-content-between mt-4">
                    <div>
                        <p>Final Score</p>
                    </div>
                    <div>
                        <p>{{ number_format(($correctCount / $totalQuestions) * 100, 2) }}%</p>
                    </div>
                </div>
                <hr style="margin-top: -10px">
                <span style="float: left" class="correct-icon"><i class="fa-solid fa-check"></i> {{ $correctCount }} </span> <span style="float: right" class="incorrect-icon"> <i class="fa-solid fa-xmark"></i> {{ $totalQuestions }}</span>
                <div class="progress-container">
                    <div class="progress-bar" style="width: {{ ($correctCount / $totalQuestions) * 100 }}%;"></div>
                </div>
                {{-- progress bar End  --}}


                <div>
                    <p class="mt-5">Revision 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 style="margin:0 auto; background:rgb(255, 255, 255); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius:6px; margin-bottom:20px"
                class="mt-5 mb-5 col-xl-8 col-lg-8 order-lg-2 p-4 question-second-part">

                <div class="d-flex justify-content-between">
                    <div style="display:flex">
                        <h6>Revision Review</h6>
                    </div>
                    <div class="mt-4">
                        <p style="margin-right:25px;font-size:14px">QUESTION <span id="reviewCountQ"></span> OF <span id="total_question"></span></p>
                    </div>
                </div>
                <hr style="margin-top:-10px; margin-bottom:17px">
                <p id="reviewQuestion"></p>
                <div class="p-3 row">

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

                    <div class="answer_section">
                        <p style="font-weight: bold">Answer</p>
                        <p id="question_content"></p>
                    </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="submit" id="RnextSubmit" class="px-4 mb-4 btn btn-primary">Next</button>
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>
</section>

@endsection

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


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

    function jumpQuestion(question_id = null) {

        $.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);
                TotalFunctionality(response);
                $('#questionStatus_' + question_id).addClass('selected');
            }
        });

    }

    var currentQuestionIndex = 0; // Variable to keep track of the current question index
    var questions = []; // Array to store the list of questions
    var totalQuestions = 0; // Total number of questions

    function showQuestion() {
        var requestURL = window.location.href;
        $.ajax({
            url: "{{ route('frontend.load.revise_question') }}",
            type: 'GET',
            data: {
                requestURL: requestURL
            },
            success: function(response) {
                console.log(response);

                questions = response.review_question;
                totalQuestions = response.total_question;

                $('#total_question').text(totalQuestions);

                // Show the first question
                currentQuestionIndex = 0;
                updateReviseQuestionContent(questions[currentQuestionIndex], currentQuestionIndex + 1, totalQuestions);

                // Populate the list of all questions
                $('#totalAnswerQuestion').empty(); // Clear existing questions
                questions.forEach((question, index) => {
                    $('#totalAnswerQuestion').append(`
                    <li class="mt-2 list-group-item selected question-item" data-id="${question.id}" style="cursor:pointer">
                        ${question.question}
                    </li>
                `);
                    $('#question_content').html(question.description);
                });

                // Handle question item click
                $('.question-item').click(function() {
                    let clickedId = $(this).data('id');
                    currentQuestionIndex = questions.findIndex(q => q.id == clickedId);
                    updateReviseQuestionContent(questions[currentQuestionIndex], currentQuestionIndex + 1, totalQuestions);
                });

                // Handle Previous and Next button clicks
                $('#RpreviousButton').click(function() {
                    if (currentQuestionIndex > 0) {
                        currentQuestionIndex--;
                        updateReviseQuestionContent(questions[currentQuestionIndex], currentQuestionIndex + 1, totalQuestions);
                        updateButtonVisibility();
                    }
                });

                $('#RnextSubmit').click(function() {
                    if (currentQuestionIndex < totalQuestions - 1) {
                        currentQuestionIndex++;
                        updateReviseQuestionContent(questions[currentQuestionIndex], currentQuestionIndex + 1, totalQuestions);
                        updateButtonVisibility();
                    }
                });

                // Initialize button visibility
                updateButtonVisibility();
            },
            error: function() {
                console.log('Failed to load questions');
            }
        });
    }

    function updateButtonVisibility() {
        // Show or hide Previous button
        $('#RpreviousButton').toggle(currentQuestionIndex > 0);

        // Show or hide Next button
        $('#RnextSubmit').toggle(currentQuestionIndex < totalQuestions - 1);
    }

    function updateReviseQuestionContent(question, questionIndex, totalQuestions) {
        $('#reviewCountQ').text(questionIndex);
        $('#reviewQuestion').text(question.question);
        $('#reviewQuestionId').val(question.id);

        let selectedAnswerId = userSelectedAnswers[question.id] ?? null;
         
        
        let correctAnswerId = question.answer.find(answer => answer.is_correct == 1).id;
        // Populate answer options
        let answersHtml = '';
        question.answer.forEach(answer => {
            const isCorrect = answer.is_correct == 1 ? 'correct-answer' : '';
            const isChecked = selectedAnswerId == answer.id ? 'checked' : '';
            const isIncorrect = selectedAnswerId == answer.id && selectedAnswerId != correctAnswerId ? 'incorrect-answer' : '';
            let backgroundColor = '';
            if (isCorrect) {
                backgroundColor = 'background-color: rgba(0, 255, 0, 0.3);'; 
            } else if (isIncorrect) {
                backgroundColor = 'background-color: rgba(255, 0, 0, 0.3);';
            } else {
                backgroundColor = 'background-color: #f8f9fa;';
            }


            answersHtml += `
            <div style="border:1px solid gray; border-radius:6px; ${backgroundColor}" 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} ${isCorrect} ${isIncorrect}" style="font-size: 18px; text-align: left; font-size: 17px;">
                    ${answer.answer}
                </label>
            </div>
        `;




        });
        $('#reviewAnswersContainer').html(answersHtml);
    }

    showQuestion(); // Call the function to load and display the first question


    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