  <el-dialog>
        <dialog id="dialog" aria-labelledby="dialog-title"
            class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">


            <el-dialog-backdrop
                class="fixed inset-0 bg-gray-900/80 opacity-50 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

            <div tabindex="0"
                class="flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                <el-dialog-panel
                    class="relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl
                        transition-all
                        w-full
                        sm:w-[90vw]
                        max-w-[1100px]
                        max-h-[90vh]
                        overflow-y-auto
                        sm:my-8
                        data-closed:translate-y-4 data-closed:opacity-0
                        data-enter:duration-300 data-enter:ease-out
                        data-leave:duration-200 data-leave:ease-in
                        data-closed:sm:translate-y-0 data-closed:sm:scale-95">

                    <div class="bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                        <div class="flex justify-between sm:items-start">


                            <div>

                                <h1 class="text-[#181D27] fo-m sm:text-[23px] text-lg">Reschedule Session</h1>
                            </div>
                            <button type="button" command="close" commandfor="dialog" class="cursor-pointer">

                                <i class="fa-solid fa-x" class="text-[#717680]"></i>
                            </button>
                        </div>
                        <div class="mt-3">

                           
                            <div class="mt-3">
                                <div class="flex items-center justify-between mb-4">
                                    <h2 class="text-[15px] font-medium text-[#414651] fo-m">Choose Timeslots</h2>

                                </div>
                                <form action="{{route('student.session.reschedule',encrypt($id))}}" method="post">
                                    @csrf
                                <div id="modalCalender">

                                </div>
                                <p id="selectionError" class="text-red-600 text-sm mt-2 hidden"></p>
                                
                               <div class="mt-3 flex gap-3">
                                    <button type="button" command="close" commandfor="dialog"
                                        class=" cursor-pointer px-3 Poppins-medium text-[16px] border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        No
                                    </button>
                                    @csrf
                                    <button type="submit"
                                        class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        Submit
                                    </button>
                                </div>
                                </form>
                            </div>


                        </div>
                    </div>

                </el-dialog-panel>
            </div>

        </dialog>
    </el-dialog>