@php
    use App\Models\StudentQuizResult;
    // use Carbon\Carbon;
    $getStudentClassSessionQuizzes = $allResults['getStudentClassSessionQuizzes'];
    // dd($getStudentClassSessionQuizzes);
    $student_id = Auth::user()->student->id;
@endphp
<x-student-layout>
    <div class="pagetitle" style="padding-bottom: 10px"></div>
    <section class="section dashboard">
        <div class="row">
            <div class="pagetitle" style="padding-bottom: 10px">
                <h1>Quizzes</h1>
            </div>
                    </div>
    </section>

    
    <div class="modal fade" id="quiz-question-load" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Quiz</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="" method="POST" id="assign-project-quiz-form">
                    @csrf

                    <div class="row" id="load-question">
                        
                    </div>

                    <div class="col-12">
                        {{-- <div class=" align-items-center justify-content-end mt-4 gap-3">
                            <a class="btn btn-light" href="/quiz-list">Back</a>
                            <button type="button" class="btn btn-primary float-end">Assign</button>
                            
                            <button type="button" class="btn btn-secondary" id="prevBtn"  onclick="getNextQuestion('previous')">Previous</button>
                            <button type="button" class="btn btn-info float-end" id="nextBtn" onclick="getNextQuestion('next')"> Next</button>
                        </div> --}}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="view-quiz-result">
    <div class="modal-dialog modal-lg">
        <div class="modal-content view-quiz-result-load">
        </div>
    </div>
</div>


<div class="modal fade" id="congrats-modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content congrats-result-load">
            <img src="https://www.gifcen.com/wp-content/uploads/2024/05/congratulations-gif-9.gif">
        </div>
    </div>
</div>

    <x-slot name="script"> 

        <script>
            $(document).ready(function () {
                
            });
            
            
    ("use strict");
    function optionInfo(){
        $("#minOneOptionRequired").val(1);
    }

    function getNextQuestion(type){
        var fd = new FormData();
        var quiz_id = $("#quiz_id").val();
        var studentQuizResultId = $("#studentQuizResultId").val();
        var currentQuestionId = $("#currentQuestionId-0").val();
        var minOneOptionRequired = $("#minOneOptionRequired").val();
        var class_session_id = $("#class_session_id-0").val();
        
        if(type == 'next'){
            // if(minOneOptionRequired == 0){
            //     toastr.error("Please select one option", "Quiz");
            //     // alert("Please select one option");
            //     return false;
            // }
            if ($('.optionCheckbox:checked').length === 0) {
                alert("Please select one option");
                return false;
            }
        }


        const selectedValues = [];
        const selectedData = [];

        $('.optionCheckbox:checked').each(function () {
            // Get the value of the checkbox
            selectedValues.push($(this).val());
        });

        

        fd.append("quiz_id", quiz_id);
        fd.append("studentQuizResultId", studentQuizResultId);
        fd.append("currentQuestionId", currentQuestionId);
        fd.append("class_session_id", class_session_id);
        fd.append("type", type);
        fd.append("option_id", selectedValues);
            
            $.ajax({
                url: "/get-next-question",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                type: "POST",
                data: fd,
                enctype: "multipart/form-data",
                processData: false,
                contentType: false,
              
                beforeSend: function () {
                    $(".loader-populate").html("<div id='loader-main'><div id='loader2'></div></div>");
                },
                success: function (r) {
                    $(".loader-populate").html("");
                    $("#quizQuestions").html(r);
                },
            });

            // ==============check question result ===============
            $.ajax({
                url: "/get-question-answer-result-process",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                data: fd,
                enctype: "multipart/form-data",
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $(".loader-populate").html("<div id='loader-main'><div id='loader2'></div></div>");
                },
                success: function (r) {
                    var response = JSON.parse(r);
                    
                    var score = response.score;
                    var resultHtml = response.resultHtml;
                    
                    
                    if(type == 'submit'){
                        $("#quiz-question-load").modal('hide');
                        if(score >= 90){
                            $('#congrats-modal').modal('show');
                            $(".congrats-result-load").html(resultHtml);
                            setTimeout(function () {
                                window.location.reload();
                            }, 5000); // Delay in milliseconds
                        }else{
                            window.location.reload();
                        }
                    }
                },
            });
    }
    function startQuizModal(quiz_id, class_session_id){
        $.ajax({
            url: "/get-quiz-question",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: "POST",
            data: {
                quiz_id: quiz_id,
                class_session_id: class_session_id,
            },
            beforeSend: function () {
                $(".loader-populate").html("<div id='loader-main'><div id='loader2'></div></div>");
            },
            success: function (r) {
                $(".loader-populate").html("");
                $("#load-question").html(r);
            },
        });
    }

    function viewQuizResultModal(quiz_result_id){
        $.ajax({
            url: "/view-quiz-result",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: "POST",
            data: {
                quiz_result_id: quiz_result_id,
            },
            beforeSend: function () {
                $(".loader-populate").html("<div id='loader-main'><div id='loader2'></div></div>");
            },
            success: function (r) {
                $('#view-quiz-result').modal('show');
                $(".view-quiz-result-load").html(r);
            },
        });
    }
        </script>

    </x-slot>
</x-student-layout>