@extends('layouts.layout')

@section('title', 'Tutor Profile')

@section('content')





<section class="w-full sm:py-16 ">
    <div class="max-w-[1700px] mx-auto sm:px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-3 gap-8">

        <div class="lg:col-span-2 space-y-8">

            <div class="flex flex-wrap  gap-6">
                <img src="{{ asset('Sites/images/userProfile.png') }}"
                    class=" rounded-xl object-cover mx-auto" alt="Teacher">

                <div class="flex-1 p-6">
                    <h2 class="text-[28px] font-semibold text-[#143453] fo-n">Ethan James Carter</h2>
                    <p class="text-[22px] text-[#171717] roboto font-normal">Bachelor's Degree in Science</p>

                    <p class="text-[16px] text-[#1D1B20] poppins mt-3">
                        Let's embark on your journey to learn English! Experienced TEFL-certified tutor
                        specializing in General English, grammar, vocabulary.
                    </p>
                    <p class="text-[#171717] roboto text-[20px] mt-3">Subjects:</p>
                    <div class="flex flex-wrap gap-2 mt-2">
                        <span class="px-8 py-2 text-[18px] roboto bg-[#EFEFEF] text-[#171717] rounded-full">English</span>
                        <span class="px-8 py-2 text-[18px] roboto bg-[#EFEFEF] text-[#171717] rounded-full">Mathematics</span>
                        <span class="px-8 py-2 text-[18px] roboto bg-[#EFEFEF] text-[#171717] rounded-full">Spanish</span>
                        <span class="px-8 py-2 text-[18px] roboto bg-[#EFEFEF] text-[#171717] rounded-full">Science</span>
                    </div>
                </div>
            </div>


            <div class="border-[#E5E5E5] rounded-[10px] border  p-6">
                <h2 class="text-[28px] font-semibold text-[#143453] fo-n">About The Teacher</h2>
                <p class="text-[15px] text-[#171717] roboto ">
                    My name is Gracie and I have over 40 hours and counting of experience giving English lessons. I've truly loved every single minute of making a positive difference in the lives of my students by forming connections with them and teaching them. Planning to move to Chile ASAP! Chile is one of my favorite countries, largely due to my love of Victor Jara, Violeta Parra, Javiera y los imposibles, and other great Chilean musicians.
                    Completing 20 hours of observation and teaching was part of my 170-hour TEFL certification course, which I completed with International TEFL Academy. My students at the Atlanta-based Community Assistance Center have told me I'm very helpful with understanding pronunciation and how encouraging and warm I am. <br>
                    Lessons with me will be a safe, welcoming, supportive space. You can count on me to meet you where you are and offer all the encouragement I have to give.
                </p>

                <div class="border-t  mx-auto border-[#d1cdcd] mt-10"></div>
                <h2 class="text-[22px]  text-[#143453] mt-3 fo-m">Languages</h2>
                <div class="mt-4 flex flex-wrap gap-2 px-4">
                    <span class="px-8 py-2 text-[18px] roboto bg-[#EFEFEF] text-[#171717] rounded-full">English</span>
                    <span class="px-8 py-2 text-[18px] roboto bg-[#EFEFEF] text-[#171717] rounded-full">Spanish</span>
                    <span class="px-8 py-2 text-[18px] roboto bg-[#EFEFEF] text-[#171717] rounded-full">German</span>

                </div>
                <div class="border-t  mx-auto border-[#d1cdcd] mt-10"></div>
                <h2 class="text-[22px]  text-[#143453] mt-3 fo-m">Level of Teaching</h2>
                <div class="mt-4 flex flex-wrap gap-2 px-4">
                    <span class="px-8 py-2 text-[18px] roboto bg-[#EFEFEF] text-[#171717] rounded-full">Basic</span>
                    <span class="px-8 py-2 text-[18px] roboto bg-[#EFEFEF] text-[#171717] rounded-full">Intermediate</span>

                </div>

            </div>


            <div class=" border-[#E5E5E5] rounded-[10px] border  p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-[28px] font-semibold text-[#143453] fo-n">My Availability</h2>

                </div>
                <div class="flex gap-3">
                    <button class="border cursor-pointer rounded-sm border-[#EEEEEE] sm:h-[42px] sm:w-[42px] w-[36px] flex justify-center items-center">
                        <i class="fa-solid fa-arrow-left text-[#898989]"></i>
                    </button>
                    <button class="border cursor-pointer rounded-sm border-[#EEEEEE] sm:h-[42px] sm:w-[42px] w-[36px] flex justify-center items-center">
                        <i class="fa-solid fa-arrow-right text-[#898989]"></i>
                    </button>
                    <h2 class="text-[#2A2A2A] sm:text-[24px] text-[15px] sm:mt-0 mt-2 poppins ml-3">
                        15 - 21 December 2025
                    </h2>

                </div>


                <div class="grid grid-cols-7 text-center text-sm font-medium text-gray-700 mb-3 mt-5">
                    <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none  flex flex-col">
                        <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>15<br><span class="sm:text-lg text-[12px] text-[#626262]">Mon</span>
                    </div>
                    <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                        <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>16<br><span class="sm:text-lg text-[12px] text-[#626262]">Tue</span>
                    </div>
                    <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                        <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>17<br><span class="sm:text-lg text-[12px] text-[#626262]">Wed</span>
                    </div>
                    <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                        <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>18<br><span class="sm:text-lg text-[12px] text-[#626262]">Thu</span>
                    </div>
                    <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                        <div class="border-t border-4 border-[#CFCFCF] rounded-[10px] mb-3 w-[80%] mx-auto"></div>19<br><span class="sm:text-lg text-[12px] text-[#626262]">Fri</span>
                    </div>
                    <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                        <div class="border-t border-4 border-[#C20000] rounded-[10px] mb-3 w-[80%] mx-auto"></div>20<br><span class="sm:text-lg text-[12px] text-[#626262]">Sat</span>
                    </div>
                    <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                        <div class="border-t border-4 border-[#C20000] rounded-[10px] mb-3 w-[80%] mx-auto"></div>21<br><span class="sm:text-lg text-[12px] text-[#626262]">Sun</span>
                    </div>
                </div>


                <div class="grid grid-cols-7 gap-2 text-xs text-center">


                    <div class="space-y-5">
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">09:00</div>
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">10:00</div>
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">11:00</div>
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">12:00</div>
                        <div class="text-[#2A2A2A] poppins sm:text-[20px] text-[13px]">13:00</div>
                        <div class="text-[#2A2A2A] poppins sm:text-[20px] text-[13px]">14:00</div>
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">15:00</div>
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">16:00</div>
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">17:00</div>
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">18:00</div>
                    </div>


                    <div class="space-y-5">
                        <div class="poppins sm:text-[20px] text-[13px]">09:00</div>
                        <div class="poppins sm:text-[20px] text-[13px]">10:00</div>
                        <div class="text-[#C20000] poppins sm:text-[20px] text-[13px]">11:00</div>
                        <div class="text-[#C20000] poppins sm:text-[20px] text-[13px]">12:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>13:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>14:00</div>
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">15:00</div>
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">16:00</div>
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">17:00</div>
                        <div class="text-green-600 poppins sm:text-[20px] text-[13px]">18:00</div>
                    </div>


                    <div class="space-y-5">
                        <div class="text-[#C20000] poppins sm:text-[20px] text-[13px]">09:00</div>
                        <div class="text-[#C20000] poppins sm:text-[20px] text-[13px]">10:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>11:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>12:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>13:00</div>
                        <div class="text-[#C20000] poppins sm:text-[20px] text-[13px]">14:00</div>
                        <div class="text-[#C20000] poppins sm:text-[20px] text-[13px]">15:00</div>
                        <div class="text-[#C20000] poppins sm:text-[20px] text-[13px]">16:00</div>
                        <div class="text-[#C20000] poppins sm:text-[20px] text-[13px]">17:00</div>
                        <div class="text-[#C20000] poppins sm:text-[20px] text-[13px]">18:00</div>
                    </div>


                    <div class="space-y-5">
                        <div class='poppins sm:text-[20px] text-[13px]'>09:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>10:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>11:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>12:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>13:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>14:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>15:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>16:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>17:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>18:00</div>
                    </div>

                    <div class="space-y-5">
                        <div class='poppins sm:text-[20px] text-[13px]'>09:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>10:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>11:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>12:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>13:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>14:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>15:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>16:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>17:00</div>
                        <div class='poppins sm:text-[20px] text-[13px]'>18:00</div>
                    </div>


                    <div class="space-y-2 text-[#C20000]">
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                    </div>


                    <div class="space-y-2 text-[#C20000]">
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                        <div class='poppins sm:text-[20px] text-[13px]'></div>
                    </div>

                </div>
            </div>


        </div>

        <div class="space-y-6">

            <div class="     text-center" style="background-image: url('{{ asset('Sites/images/tutor-profile-right-bg.png') }}');">
                <button class="w-full cursor-pointer  text-[#121212] font-medium mt-4 text-[22px] rounded-xl poppins">
                    Book a Session
                </button>

                <div class="text-[34px]  mt-4 bg-[#FFFFFF] text-[#1AD6C2] h-[60px]  flex items-center justify-center poppins font-medium"> $25/<sub class="text-[19px] font-normal"> hr</sub></div>

                <button command="show-modal" commandfor="dialog" class=" cursor-pointer  mt-4 mb-3 w-[90%] mx-auto bg-[#000000] text-[#1AD6C2] poppins font-medium text-[16px] py-5 rounded-[5px]">
                    Book Now
                </button>
            </div>

            <div class=" rounded-[5px] border border-[#E5E5E5]  p-6">
                <h3 class="text-[22px] text-[#143453] fo-m font-medium">Certificates</h3>
                <div class="border-t  mx-auto border-[#d1cdcd] mb-2 mt-2"></div>
                <div class="grid sm:grid-cols-3 grid-cols-2 gap-3">
                    @for($i=1;$i<=3;$i++)
                        <div class="border rounded-[5px] border-[#F24646] p-1 text-center">
                        <img src="{{ asset('Sites/images/pdf-image.png') }}" class="mx-auto  p-5">
                        <div class="border-t  mx-auto border-[#d1cdcd] "></div>
                        <p class="text-sm text-[#171717] roboto mt-2 font-normal">Certificate Name</p>
                        <button class="text-xs  cursor-pointer rounded-sm w-full p-2 bg-[#F24646] text-[#FFFFFF] mt-3">Download</button>
                </div>
                @endfor
            </div>
        </div>

        <div class=" rounded-[10px] border h-[50%] overflow-auto hide-scrollbar border-[#E5E5E5] shadow-sm p-6">
            <div class="flex justify-between w-full  border-b border-[#E5E5E5]">
                <div class="xl:w-[20%] lg:w-[10%] w-[20%] ">
                    <h3 class="xl:text-[24px] lg:text-[20px] sm:text-[24px] text-lg mb-4 text-[#143453] fo-m font-medium">Reviews</h3>
                </div>
                <div class="flex  w-[50%]  justify-end">
                    <div class="text-[#F4C701] xl:text-[24px] lg:text-[17px] sm:text-[24px] text-lg"><i class="fa-solid fa-star"></i> </div>
                    <div class="text-[#F4C701] xl:text-[24px] lg:text-[17px] sm:text-[24px] text-lg"><i class="fa-solid fa-star"></i> </div>
                    <div class="text-[#F4C701] xl:text-[24px] lg:text-[17px] sm:text-[24px] text-lg"><i class="fa-solid fa-star"></i> </div>
                    <div class="text-[#F4C701] xl:text-[24px] lg:text-[17px] sm:text-[24px] text-lg"><i class="fa-solid fa-star"></i> </div>
                    <div class="text-[#C3C3C3] xl:text-[24px] lg:text-[17px] sm:text-[24px] text-lg"><i class="fa-solid fa-star"></i> </div>
                </div>
                <div class="xl:w-[30%] lg:w-[40%] sm:w-[30%] w-[50%] p-2 flex justify-end">

                    <h3 class="text-[#6E6E6E] poppins xl:text-[14px] text-[13px] font-medium">4.0 (78 reviews)</h3>
                </div>
            </div>

            @for($i=1;$i<=3;$i++)
                <div class="border border-[#CACACA] cardShadow rounded-[10px]  mt-4 p-5 mb-4">
                <div class="flex items-center gap-2 mb-1">
                    <div class="w-[50%] flex gap-2">

                        <img src="{{ asset('Sites/images/review-profile.png') }}"
                            class="w-8 h-8 rounded-full">
                        <p class="font-medium  fo-m xl:text-lg lg:text-[16px] sm:text-lg text-[13px] text-[#143453] mt-1">Jane Smith</p>
                    </div>

                    <div class="flex  sm:w-[50%]  justify-end">
                        <div class="text-[#F4C701] text-[18px]"><i class="fa-solid fa-star"></i> </div>
                        <div class="text-[#F4C701] text-[18px]"><i class="fa-solid fa-star"></i> </div>
                        <div class="text-[#F4C701] text-[18px]"><i class="fa-solid fa-star"></i> </div>
                        <div class="text-[#F4C701] text-[18px]"><i class="fa-solid fa-star"></i> </div>
                        <div class="text-[#C3C3C3] text-[18px]"><i class="fa-solid fa-star"></i> </div>
                    </div>
                </div>
                <p class="text-[15px] roboto text-[#171717] mt-3">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
        </div>
        @endfor

    </div>
    <button class="w-full cursor-pointer bg-[#F4C701] py-4 rounded-[5px] text-[#000000] text-[17px] poppins font-medium">
        Add Review
    </button>
    </div>
    </div>
</section>
<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 outline -outline-offset-1 outline-white/10 transition-all 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 sm:my-8 sm:w-full sm:max-w-3xl lg:max-w-4xl   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">Book a Session</h1>
                        </div>
                        <button command="close" commandfor="dialog" class="cursor-pointer">

                            <i class="fa-solid fa-x" class="text-[#717680]"></i>
                        </button>
                    </div>
                    <div class="mt-3">
                        <p class="fo-m text-[16px] text-[#414651] font-medium">Select Subject(s)*</p>
                        <div class="relative w-full mt-3">
                            <select
                                class="w-full appearance-none text-[#717680] fo-n text-sm border-[#D5D7DA] border-[1.29px] p-3 pr-10 rounded-[10px] bg-white">
                                <option value="Science">Science</option>
                            </select>


                            <img
                                src="{{ asset('Sites/images/arrow-down.png') }}"
                                alt="arrow"
                                class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 " />
                        </div>
                        <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>
                            <div class="flex gap-3">
                                <button class="border rounded-sm cursor-pointer border-[#EEEEEE] h-[42px] w-[42px] flex justify-center items-center">
                                    <i class="fa-solid fa-arrow-left text-[#898989]"></i>
                                </button>
                                <button class="border rounded-sm cursor-pointer border-[#EEEEEE] h-[42px] w-[42px] flex justify-center items-center">
                                    <i class="fa-solid fa-arrow-right text-[#898989]"></i>
                                </button>
                                <h2 class="text-[#2A2A2A] text-[17px] mt-2 poppins ml-3">
                                    15 - 21 December 2025
                                </h2>

                            </div>


                            <div class="grid grid-cols-7 text-center text-sm font-medium text-gray-700 mb-3 mt-5">
                                <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none  flex flex-col">
                                    <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>15<br><span class="sm:text-lg text-[12px] text-[#626262]">Mon</span>
                                </div>
                                <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                                    <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>16<br><span class="sm:text-lg text-[12px] text-[#626262]">Tue</span>
                                </div>
                                <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                                    <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>17<br><span class="sm:text-lg text-[12px] text-[#626262]">Wed</span>
                                </div>
                                <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                                    <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>18<br><span class="sm:text-lg text-[12px] text-[#626262]">Thu</span>
                                </div>
                                <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                                    <div class="border-t border-4 border-[#CFCFCF] rounded-[10px] mb-3 w-[80%] mx-auto"></div>19<br><span class="sm:text-lg text-[12px] text-[#626262]">Fri</span>
                                </div>
                                <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                                    <div class="border-t border-4 border-[#C20000] rounded-[10px] mb-3 w-[80%] mx-auto"></div>20<br><span class="sm:text-lg text-[12px] text-[#626262]">Sat</span>
                                </div>
                                <div class="text-[#2A2A2A] sm:text-[30px] text-lg poppins leading-none flex flex-col">
                                    <div class="border-t border-4 border-[#C20000] rounded-[10px] mb-3 w-[80%] mx-auto"></div>21<br><span class="sm:text-lg text-[12px] text-[#626262]">Sun</span>
                                </div>
                            </div>


                            <div class="grid grid-cols-7 gap-2 text-xs text-center">


                                <div class="space-y-5">
                                    <div class="text-green-600 poppins text-[13px] sm:text-[20px]">09:00</div>
                                    <div class="text-green-600 poppins text-[13px] sm:text-[20px]">10:00</div>
                                    <div class="text-green-600 poppins text-[13px] sm:text-[20px]">11:00</div>
                                    <div class="text-green-600 poppins text-[13px] sm:text-[20px]">12:00</div>
                                    <div class="text-[#2A2A2A] poppins text-[13px] sm:text-[20px]">13:00</div>
                                    <div class="text-[#2A2A2A] poppins text-[13px] sm:text-[20px]">14:00</div>
                                    <div class="text-green-600 poppins text-[13px] sm:text-[20px]">15:00</div>
                                    <div class="text-green-600 poppins text-[13px] sm:text-[20px]">16:00</div>


                                </div>


                                <div class="space-y-5">
                                    <div class="poppins text-[13px] sm:text-[20px]">09:00</div>
                                    <div class="poppins text-[13px] sm:text-[20px]">10:00</div>
                                    <div class="text-[#C20000] poppins text-[13px] sm:text-[20px]">11:00</div>
                                    <div class="text-[#C20000] poppins text-[13px] sm:text-[20px]">12:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>13:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>14:00</div>
                                    <div class="text-green-600 poppins text-[13px] sm:text-[20px]">15:00</div>
                                    <div class="text-green-600 poppins text-[13px] sm:text-[20px]">16:00</div>

                                </div>


                                <div class="space-y-5">
                                    <div class="text-[#C20000] poppins text-[13px] sm:text-[20px]">09:00</div>
                                    <div class="text-[#C20000] poppins text-[13px] sm:text-[20px]">10:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>11:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>12:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>13:00</div>
                                    <div class="text-[#C20000] poppins text-[13px] sm:text-[20px]">14:00</div>
                                    <div class="text-[#C20000] poppins text-[13px] sm:text-[20px]">15:00</div>
                                    <div class="text-[#C20000] poppins text-[13px] sm:text-[20px]">16:00</div>

                                </div>


                                <div class="space-y-5">
                                    <div class='poppins text-[13px] sm:text-[20px]'>09:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>10:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>11:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>12:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>13:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>14:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>15:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>16:00</div>

                                </div>

                                <div class="space-y-5">
                                    <div class='poppins text-[13px] sm:text-[20px]'>09:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>10:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>11:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>12:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>13:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>14:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>15:00</div>
                                    <div class='poppins text-[13px] sm:text-[20px]'>16:00</div>

                                </div>


                                <div class="space-y-2 text-[#C20000]">
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>

                                </div>


                                <div class="space-y-2 text-[#C20000]">
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                    <div class='poppins text-[13px] sm:text-[20px]'></div>
                                </div>
                            </div>
                            <div class="px-3">
                                <h2 class="text-[16px] font-medium mb-2 text-[#414651] fo-m  mt-5">Total Price</h2>
                                <button class="bg-[#1CD8C4] px-3 cursor-pointer border-[#D5D7DA] border rounded-[10px] w-full py-3 text-start fo-n font-semibold text-[#FFFFFF] sm:text-[22px] text-[15px]">
                                    $150
                                </button>
                                <button class="bg-[#F4C701] px-3 cursor-pointer border-[#D5D7DA] border rounded-[10px] w-full sm:py-5 py-3 text-[#000000] fm-xb mt-3  text-[16px]">
                                    Continue
                                </button>
                                <p class="text-[#717680] fo-n text-sm text-center px-10 mt-2">
                                    Payment for the lesson will be charged 24 hours before the lesson. Lesson cancellation will be available before the payment is made. If payment for the lesson is unsuccessful, the lesson will be automatically cancelled.
                                </p>
                            </div>
                        </div>

                    </div>
                </div>

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