{{-- Submit Assessment Modal --}}
     <div 
        x-data="{submitQuizModal : @entangle('submitQuizModal').defer}" 
        x-init="$watch('submitQuizModal', value => modalShow = submitQuizModal)" 
        x-show="submitQuizModal"
        style="display:none"
        class="modal fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" role="dialog"
        >
        <div class="modal-dialog modal-dialog-centered relative w-auto pointer-events-none max-w-[94vw] lg:max-w-[618px] mx-auto">
            <div class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
                <div class="modal-body relative p-10">
                    
                    <div class="flex  justify-center">                    
                        <div>
                            <div class="flex justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="55" height="54" viewBox="0 0 55 54" fill="none">
                                    <path d="M51.575 39.3751L33.35 7.87506C31.55 4.72506 27.275 3.60006 24.125 5.40006C23 6.07506 22.1 6.97506 21.65 7.87506L3.42496 39.3751C1.62496 42.5251 2.74996 46.8001 5.89996 48.6001C7.02496 49.2751 8.14996 49.5001 9.27496 49.5001H45.5C49.325 49.5001 52.25 46.3501 52.25 42.7501C52.475 41.4001 52.025 40.2751 51.575 39.3751ZM27.5 40.5001C26.15 40.5001 25.25 39.6001 25.25 38.2501C25.25 36.9001 26.15 36.0001 27.5 36.0001C28.85 36.0001 29.75 36.9001 29.75 38.2501C29.75 39.6001 28.85 40.5001 27.5 40.5001ZM29.75 29.2501C29.75 30.6001 28.85 31.5001 27.5 31.5001C26.15 31.5001 25.25 30.6001 25.25 29.2501V20.2501C25.25 18.9001 26.15 18.0001 27.5 18.0001C28.85 18.0001 29.75 18.9001 29.75 20.2501V29.2501Z" fill="#3B82F6"/>
                                </svg>
                            </div>
                            <p class="text-neutral-800 font-bold text-lg my-2 text-center">Are you sure you wish submit assessment? </p>
                            <p class="text-gray-500 text-[15px] text-center">You will get a summary of how you performed on this assessment, If you managed to answer 60% of the assessment correctly, it will show on your profile, you can also retake the assessment</p>
                            <div class="flex flex-col md:flex-row items-center justify-center mx-1 md:-mx-[6px] mb-1 sm:mb-0 mt-6">
                                <div class="w-full md:w-auto px-1 mb-1 md:mb-0 md:px-[6px]">
                                    <a href="#" x-on:click="submitQuizModal=false" class="w-full md:w-auto inline-block group text-center border border-blue-500 rounded-md h-[34px] sm:h-[40px]  p-2 px-5 sm:px-[33px] text-blue-500 bg-white text-sm sm:text-base leading-tight hover:bg-blue-500 hover:border-blue-500 hover:text-white transition ease-in-out duration-200">                       
                                        Back
                                    </a>
                                </div>
                                <div class="w-full md:w-auto px-1 md:px-[6px]">
                                    <a href="#" 
                                    x-on:click="Livewire.emitTo('dashboard.candidate.teacher-training.assessment.view', 'submit'); submitQuizModal=false"
                                    class="w-full md:w-auto inline-block group text-center border border-blue-500 rounded-md h-[34px] sm:h-[40px]  p-2 px-5 sm:px-[33px] text-white bg-blue-500 text-sm sm:text-base leading-tight hover:bg-blue-400 hover:border-blue-400 transition ease-in-out duration-200">                       
                                        Submit & view results
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>   
            </div>
        </div>
    </div>