{{-- Passed Assessment Modal --}}
    <div 
    x-data="{passedQuizModal : @entangle('passedQuizModal').defer}" 
    x-init="$watch('passedQuizModal', value => modalShow = passedQuizModal)" 
    x-show="passedQuizModal"
    style="display:none"
    class="modal fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="EditAvailability" 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">
            <!-- <a href="#" class="absolute right-5 top-5 z-10" data-bs-dismiss="modal" aria-label="Close"><img src="http://ltf-crm-frontend.test/build/assets/icon-close-rounded-c64fca21.svg" alt=""></a> -->
            <div class="modal-body relative p-10">
                
                <div class="flex  justify-center">                    
                    <div class="w-[408px]">
                        <div class="flex justify-center relative">
                            <div class=" sm:w-[330px] sm:h-[220px]">
                                <img src="{{ Vite::asset('resources/images/dashboard/passed-assessment-background.svg')}}" class="object-cover h-full w-full object-center">
                                <div class="font-bold text-center text-white absolute left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2">
                                    <p class="sm::mb-[11px] text-[20px] sm:text-[40px] sm:leading-[46px]">@if($assessment_answered){{$assessment_answered->points}} @endif/100</p>
                                    <p class="text-lg sm:text-[20px]">Test Score</p>
                                </div>
                            </div>
                        </div>

                        <p class="text-neutral-800 font-bold text-lg md:text-[20px] my-5 text-center">Congratulations you passed!</p>
                        <p class="text-gray-500 text-center">You have successfully completed the course.</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="{{route('teacher_training_list')}}" 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">                       
                                    To programs
                                </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', 'leaveReview'); passedQuizModal=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">                       
                                    Leave a review
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
</div>