@extends('Front.PatientLayout.mainLayout')
@section('title', 'Quiz')
@section('css')
    <style>
        .progressBar {
            background-color: #c1cfe4;
            width: 100%;
            height: 5px;
        }

        .innerProgress {
            background-color: #4587eb;
            height: 5px;
        }

        .border-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 13rem;
            /* Size including the border */
            height: 13rem;
            border-radius: 50%;
            background: conic-gradient(transparent 120deg, white, transparent);
            background-size: 300% 300%;
            animation: rotateGradient 2s linear;
            padding: 5px;
            /* Adjust to match the border thickness */
        }

        .scoreDisplay {
            width: 12rem;
            height: 12rem;
            border-radius: 50%;
            background-color: #0d3675;
            /* Background color for the inner circle */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

        }

        @keyframes rotateGradient {


            100% {
                background-position: 0% 30%;
            }

            50% {
                background-position: 30% 70%;
            }

            0% {
                background-position: 70% 100%;
            }
        }
    </style>
@endsection
@section('content')
    <div class="container-fluid p-0 bgDarkBlue rounded-0 ">
        <nav class="sticky-top ">
            <div class="">
                <a href="{{ route('front.patient.gamification.view') }}">
                    <i class=" mt-4 p-2 fa fa-arrow-left text-white fs-4 float-start ms-2 ">
                    </i>
                </a>
            </div>
        </nav>
        <div class="container mt-5">
            <h3 class="text-center text-white">Month {{ $month }} Quiz</h3>
            <form id="quizForm">
                <input type="hidden" name="question_count" value="{{ $questions->questions_count }}">
                <input type="hidden" name="category_id" value="{{ $questions->id }}">
                <input type="hidden" name="score" id="score" value="0">
                @forelse($questions->quiz as $question)
                    <section id="question-{{ $loop->index }}" @if ($loop->index !== 0) hidden @endif
                        data-id="{{ $question->id }}">
                        <input type="hidden" id="question_{{ $loop->index }}_ans" value="{{ $question->answer }}">
                        <input type="hidden" name="questions[{{ $loop->index }}][question_id]"
                            value="{{ $question->id }}">
                        <div class="my-5 d-flex justify-content-center">
                            <div class="card col-sm-10 col-md-8 col-lg-6 col-12"
                                style="box-shadow: 2px 25px 10px -5px  #e2efff9c;">
                                <div hidden
                                    class="text-center m-2  alert alert-secondary text-white validationErr_{{ $loop->index }}">
                                    Select One Option</div>
                                <div class="card-body">
                                    <div class="d-flex justify-content-center">
                                        <h2>{{ $loop->iteration }}</h2>
                                        <p class="fs-5 fw-bold mt-2 mx-1 ">
                                            of {{ $questions->questions_count }}
                                        </p>
                                    </div>
                                    <div class="row  progressBar  m-2 mb-3">
                                        <div class="innerProgress"></div>
                                    </div>
                                    <div class="my-2">
                                        <h5 class="lh-base">{{ $question->question_eng }}</h5>
                                        <div class="mt-4">
                                            @foreach ($question->options as $option)
                                                <div class="col-12 my-2">
                                                    <input type="radio" class="btn-check "
                                                        id="option_{{ $option->id }}" autocomplete="off"
                                                        name="questions[{{ $loop->parent->index }}][option_id]"
                                                        value="{{ $option->id }}">
                                                    <label
                                                        class="col-12 text-start border-2 fw-bold lh-base border-light btn
                                                    btn-custom-dark "
                                                        for="option_{{ $option->id }}">{{ $option->option_eng }}</label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-6 d-flex justify-content-center">
                            <button data-id="{{ $loop->index }}" type="button"
                                class="nextBtn btn btn-white col-4 ">{{ __('dashboard.Next') }}
                            </button>
                        </div>
                        @if ($loop->index !== 0)
                            <div class="mt-3 d-flex justify-content-center">
                                <button type="button" class="backBtn btn btn-white col-4 ">{{ __('dashboard.Back') }}
                                </button>
                            </div>
                        @endif
                    </section>
                @empty
                    <h2>No data found!</h2>
                @endforelse
            </form>
            <div class="my-5" id="resultPage" hidden>
                <div class="d-flex justify-content-center flex-wrap">
                    <div class="col-12">
                        <h4 class="mx-3   text-muted text-center">You Scored:
                        </h4>
                    </div>
                    <div class="col-12  d-flex justify-content-center my-4">
                        <div class="border-wrapper">
                            <div class="my-3 scoreDisplay ">
                                <div class="position-absolute top-50 start-50 translate-middle">
                                    <div class="d-flex">
                                        <h1 id="displayScore" class="text-white"></h1>
                                        <h1 class="text-white">/{{ $questions->questions_count }}</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <h2 class="my-3 text-center text-white" id="resultText1"></h2>
                <h5 class="my-3 text-center text-white" id="resultText"></h5>
                <div class="my-3 d-flex justify-content-center flex-wrap">
                    <div class="col-12 text-center">
                        <button type="button" id="retake"
                            class=" btn btn-white  rounded-pill col-8 col-sm-6 col-md-2">Re-take quiz</button>
                    </div>
                    <div class=" col-12 text-center">
                        <a href="{{ route('front.patient.dashboard') }}"
                            class="btn btn-white rounded-pill col-8 col-sm-6 col-md-2">Finish</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection
@section('js')
    <script nonce="{{ $cspNonce }}">
        let currentIndex = 0;
        let score = [];
        let finalScore = 0;
        const MaxCount = ('{{ $questions->questions_count }}') - 1;
        let DefaultprogracessPercentage = 100 / (MaxCount + 1);
        let progracessPercentage = DefaultprogracessPercentage;
        $('.innerProgress').css('width', `${progracessPercentage}%`)


        $('.nextBtn').click(function(e) {

            if (currentIndex < 0 || currentIndex > MaxCount) return
            let currentQueVal = $(`input[name="questions[${currentIndex}][option_id]"]:checked`).val();
            if (!currentQueVal) {
                $(`.validationErr_${currentIndex}`).prop("hidden", false);
                return
            } else {
                $(`.validationErr_${currentIndex}`).prop("hidden", true);
                let ans = $(`#question_${currentIndex}_ans`).val();
                if (currentQueVal == ans) {
                    score[currentIndex] = 1
                } else {
                    score[currentIndex] = 0
                }
            }

            if (currentIndex === MaxCount) {
                sum(score);
                let quizForm = document.getElementById('quizForm');
                let quizData = new FormData(quizForm);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    }
                });
                $.ajax({
                    type: "post",
                    url: "{{ route('front.patient.quiz.questions.store') }}",
                    data: quizData,
                    processData: false,
                    contentType: false,
                    error: (err) => {
                        $("#quizForm").prepend(
                            '<h3 class="text-white text-center">Something went wrong try again later ! </h3>'
                        );
                        setTimeout(() => {
                            window.location.reload();
                        }, 2000);
                    }
                });

                $("#quizForm").prop("hidden", true);
                $("#resultPage").prop("hidden", false);


                $(`#question-${currentIndex}`).prop('hidden', true);
            } else {
                progracessPercentage = progracessPercentage + DefaultprogracessPercentage;
                $('.innerProgress').css('width', `${progracessPercentage}%`)
                $(`#question-${currentIndex}`).prop('hidden', true);
                currentIndex++;
                $(`#question-${currentIndex}`).prop('hidden', false);
            }
        });

        $('.backBtn').click(function(e) {
            if (currentIndex <= 0 || currentIndex > MaxCount) return
            progracessPercentage = progracessPercentage - DefaultprogracessPercentage;
            $('.innerProgress').css('width', `${progracessPercentage}%`)
            $(`#question-${currentIndex}`).prop('hidden', true);
            currentIndex--;
            $(`#question-${currentIndex}`).prop('hidden', false);
        });

        let Total = MaxCount + 1;

        const sum = (arr) => {
            arr.map((num) => finalScore += num);
            $("#score").val(finalScore);
            $("#displayScore").text(finalScore);
            if (finalScore === Total) {
                $("#resultText1").text(`Congratulations!`);
                $("#resultText").text(`Congratulations! You got ${finalScore}/${Total} and earned 10 points.`);
                $("#retake").prop("hidden", true);
            } else {
                $("#resultText1").text(`Good try!.`);
                $("#resultText").text("Unfortunately at this time, you did not pass the quiz.");
            }
        }

        $("#retake").click(() => {
            $('.innerProgress').css('width', `${DefaultprogracessPercentage}%`)
            progracessPercentage = DefaultprogracessPercentage;

            $("#quizForm").prop("hidden", false);
            $("#resultPage").prop("hidden", true);
            currentIndex = 0;
            finalScore = 0;
            $(`#question-${currentIndex}`).prop('hidden', false);
        });
    </script>
@endsection