<section class="w-full md:py-16 py-6 bg-white blog-page-sec">
    <div class="max-w-[1700px] mx-auto px-4 2xl:px-0">

        <!-- SEARCH + FILTER -->
        <div class="grid grid-cols-1 lg:grid-cols-12  lg:gap-6   xl:gap-10">

            <!-- SEARCH -->
            <div class="xl:col-span-6 sm:col-span-5 col-span-12 lg:mb-0 mb-5">
                <div class="gap-4 items-center lg:mb-8 w-full search border-2 border-[#DBDBDB] rounded-full">
                    <div class="flex  flex-row w-full">
                        <input type="text" placeholder="What are you looking for?"
                            class="w-full sm:p-5 md:text-start text-center   p-4 pl-5 sm:pl-17 focus:outline-none fo-xb text-[16px]" />
                        <button
                            class="cursor-pointer md:block hidden  fo-xb text-[16px] sm:w-70 w-28 m-1 bg-yellow-400 hover:bg-yellow-500 px-6 rounded-full font-semibold">
                            Search
                        </button>
                        <button
                            class="cursor-pointer fo-xb md:hidden block text-[16px] sm:w-70 w-14 m-1 bg-yellow-400 hover:bg-yellow-500 px-2 rounded-full font-semibold">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- FILTERS -->
            <div class="sm:col-span-7 xl:col-span-6 ">
                <div class="flex flex-col lg:flex-row gap-4">

                    <!-- Category Dropdown -->
                    <div class="relative w-full">
                        <select
                            class="fo-xb text-[16px] text-[#585858] w-full rounded-full bg-[#F8F8F8] p-5 pr-12 focus:outline-none appearance-none">
                            <option>Select Category</option>
                        </select>

                        <img src="{{ asset('site/Sites/images/arrow-down.png') }}" alt="arrow"
                            class="pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 w-2 h-2">
                    </div>

                    <!-- Price Dropdown -->
                    <div class="relative w-full">
                        <select
                            class="fo-xb text-[16px] text-[#585858] w-full rounded-full bg-[#F8F8F8] p-5 pr-12 focus:outline-none appearance-none">
                            <option>Price Low to High</option>
                        </select>

                        <img src="{{ asset('site/Sites/images/arrow-down.png') }}" alt="arrow"
                            class="pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 w-2 h-2">
                    </div>

                    <!-- Filter Button -->
                    <button command="show-modal" commandfor="filterpop"
                        class="fo-xb text-[16px] cursor-pointer md:w-100 w-full flex justify-center items-center gap-2 bg-teal-400 hover:bg-teal-500 text-black p-5 rounded-full font-semibold">
                        <img src="{{ asset('site/Sites/images/filter-icon.png') }}"> Filters
                    </button>

                </div>

            </div>

        </div>

        <!-- CARDS -->
        <div class="max-w-[1700px] mx-auto pt-10">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-6">

                <!-- CARD 1 -->
                <div class="lg:col-span-4">
                    <div class="card">
                        <div class="bg-white rounded-3xl border border-[#E2E2E2] p-5 overflow-hidden">
                            <img src="{{ asset('site/Sites/images/tutor1.png') }}"
                                class="w-full h-100 object-cover rounded-3xl" />

                            <div class="pt-5">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="fo-xb xldesk:text-[24px] text-lg text-[#434343] font-semibold">
                                        Christen Lara Karly Cotton
                                    </h3>
                                    <span
                                        class="fm-xb bg-teal-400 text-white px-3 py-1 rounded-lg text-[21px] font-semibold">
                                        $26/<span class="fm-xb text-[14px]">hr</span>
                                    </span>
                                </div>

                                <p class="text-black mb-4 text-[18px]">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                </p>

                                <div class="flex justify-between mb-2">
                                    <div>
                                        <p class="font-semibold text-[#143453] text-[18px] pb-2">Qualification</p>
                                        <p class="text-[#000] text-[16px] font-semibold">
                                            Bachelor’s Degree in Science
                                        </p>
                                    </div>
                                    <div class="text-right">
                                        <p class="font-semibold text-[#143453] text-[18px]">Rating</p>
                                        <p class="text-yellow-500 font-semibold text-[21px]">
                                            ★ <span class="text-[#000] text-[16px]">4.5/5</span>
                                        </p>
                                    </div>
                                </div>

                                <hr class="my-2 text-[#E2E2E2]">

                                <div class="mb-4">
                                    <p class="font-semibold text-[#143453] text-[18px] mb-2">Subjects</p>
                                    <div class="flex flex-wrap gap-2">
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">English</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">Science</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">Maths</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">Chemistry</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">+2
                                            More</span>
                                    </div>
                                </div>

                                <button
                                    class="cursor-pointer w-full bg-yellow-400 hover:bg-yellow-500 xldesk:p-5 p-3 rounded-xl font-semibold"
                                    onclick="window.location.href='{{ url('tutor-profile') }}'">
                                    View Details
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- CARD 2 -->
                <div class="lg:col-span-4">
                    <div class="card">
                        <!-- Card -->
                        <div class="bg-white rounded-3xl border border-[#E2E2E2] p-5 overflow-hidden">
                            <img src="{{ asset('site/Sites/images/tutor2.png') }}" alt="Tutor"
                                class="w-full h-100 object-cover rounded-3xl" />

                            <div class="pt-5">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="fo-xb xldesk:text-[24px] text-lg text-[#434343] font-semibold text-lg">
                                        Christen Lara Karly Cotton</h3>
                                    <span
                                        class="fm-xb bg-teal-400 text-white px-3 py-1 rounded-lg text-[21px] font-semibold">
                                        $26/<span class="fm-xb text-[14px]">hr</span>
                                    </span>
                                </div>

                                <p class="text-black text-sm mb-4 text-[18px]">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                </p>

                                <div class="flex justify-between text-sm mb-2">
                                    <div>
                                        <p class="font-semibold text-[#143453] text-[18px] pb-2">Qualification</p>
                                        <p class="text-[#000] text-[16px] font-semibold">Bachelor’s Degree in Science
                                        </p>
                                    </div>
                                    <div class="text-right">
                                        <p class="font-semibold text-[#143453] text-[18px]">Rating</p>
                                        <p class="text-yellow-500 font-semibold text-[21px]">★ <span
                                                class="text-[#000] text-[16px]">4.5/5</span></p>
                                    </div>
                                </div>

                                <hr class="my-2 text-[#E2E2E2]">

                                <div class="mb-4">
                                    <p class="font-semibold text-[#143453] text-[18px] mb-2">Subjects</p>
                                    <div class="flex flex-wrap w-full gap-2">
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">English</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">Science</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">Maths</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">Chemistry</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">+2
                                            More</span>
                                    </div>
                                </div>

                                <button
                                    class="cursor-pointer w-full bg-yellow-400 hover:bg-yellow-500 xldesk:p-5 p-3 rounded-xl font-semibold"
                                    onclick="window.location.href='{{ url('tutor-profile') }}'">
                                    View Details
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- CARD 3 -->
                <div class="lg:col-span-4">
                    <div class="card">
                        <!-- Card -->
                        <div class="bg-white rounded-3xl border border-[#E2E2E2] p-5 overflow-hidden">
                            <img src="{{ asset('site/Sites/images/tutor3.png') }}" alt="Tutor"
                                class="w-full h-100 object-cover rounded-3xl" />

                            <div class="pt-5">
                                <div class="flex justify-between items-center mb-2">
                                    <h3 class="fo-xb xldesk:text-[24px] text-lg text-[#434343] font-semibold text-lg">
                                        Christen Lara Karly Cotton</h3>
                                    <span
                                        class="fm-xb bg-teal-400 text-white px-3 py-1 rounded-lg text-[21px] font-semibold">
                                        $26/<span class="fm-xb text-[14px]">hr</span>
                                    </span>
                                </div>

                                <p class="text-black text-sm mb-4 text-[18px]">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                </p>

                                <div class="flex justify-between text-sm mb-2">
                                    <div>
                                        <p class="font-semibold text-[#143453] text-[18px] pb-2">Qualification</p>
                                        <p class="text-[#000] text-[16px] font-semibold">Bachelor’s Degree in Science
                                        </p>
                                    </div>
                                    <div class="text-right">
                                        <p class="font-semibold text-[#143453] text-[18px]">Rating</p>
                                        <p class="text-yellow-500 font-semibold text-[21px]">★ <span
                                                class="text-[#000] text-[16px]">4.5/5</span></p>
                                    </div>
                                </div>

                                <hr class="my-2 text-[#E2E2E2]">

                                <div class="mb-4">
                                    <p class="font-semibold text-[#143453] text-[18px] mb-2">Subjects</p>
                                    <div class="flex flex-wrap w-full gap-2">
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">English</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">Science</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">Maths</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">Chemistry</span>
                                        <span
                                            class="border-2 rounded xldesk:px-5 px-2 border-[#EBEBEB] font-semibold text-[14px] xldesk:py-2 py-1">+2
                                            More</span>
                                    </div>
                                </div>

                                <button
                                    class="cursor-pointer w-full bg-yellow-400 hover:bg-yellow-500 xldesk:p-5 p-3 rounded-xl font-semibold"
                                    onclick="window.location.href='{{ url('tutor-profile') }}'">
                                    View Details
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</section>



<el-dialog>
    <dialog id="filterpop" 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="m-auto  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="m-auto 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-[585px]   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                <div class="form 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-[26px] text-lg">Filters</h1>
                        </div>
                        <button command="close" commandfor="filterpop" class="cursor-pointer">

                            <img src="{{ asset('site/Sites/images/cros-icon.png') }}" />
                        </button>
                    </div>
                    <div class="mt-3">
                        <p class="fo-m text-lg text-[#414651] font-medium">Subject Category</p>
                        <div class="relative w-full mt-3">
                            <select
                                class="w-full appearance-none text-[#717680] fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 pr-10 rounded-[10px] bg-white">
                                <option value="Science">Science</option>
                            </select>



                            <img src="{{ asset('site/Sites/images/arrow-down.png') }}" alt="arrow"
                                class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 " />
                        </div>
                    </div>

                    <div class="mt-3">
                        <p class="fo-m text-lg text-[#414651] font-medium">Hourly Rate</p>
                        <div class="relative flex gap-5 w-full mt-3">
                            <div class="field w-full">
                                <input
                                    class="w-full text-[#717680] fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 rounded-[10px] bg-white"
                                    type="number" placeholder="From">
                            </div>
                            <div class="field w-full">
                                <input
                                    class="w-full text-[#717680] fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 rounded-[10px] bg-white"
                                    type="number" placeholder="To">
                            </div>
                        </div>
                    </div>

                    <div class="mt-5 days">
                        <p class="fo-m text-lg text-[#414651] font-medium">Available Days</p>
                        <div class="relative flex gap-5 w-full mt-3">
                            <div class="checkbox flex flex-wrap gap-5">
                                <div class="box">
                                    <input class="" type="checkbox" name="Monday" id="Monday" checked>
                                    <label for="Monday"
                                        class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Monday</label>
                                </div>
                                <div class="box">
                                    <input class="" type="checkbox" name="Tuesday" id="Tuesday">
                                    <label for="Tuesday"
                                        class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Tuesday</label>
                                </div>
                                <div class="box">
                                    <input class="" type="checkbox" name="Wednesday" id="Wednesday">
                                    <label for="Wednesday"
                                        class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Wednesday</label>
                                </div>
                                <div class="box">
                                    <input class="" type="checkbox" name="Thursday" id="Thursday">
                                    <label for="Thursday"
                                        class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Thursday </label>
                                </div>
                                <div class="box">
                                    <input class="" type="checkbox" name="Friday" id="Friday">
                                    <label for="Friday"
                                        class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Friday</label>
                                </div>
                                <div class="box">
                                    <input class="" type="checkbox" name="Saturday" id="Saturday">
                                    <label for="Saturday"
                                        class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Saturday</label>
                                </div>
                                <div class="box">
                                    <input class="" type="checkbox" name="Sunday" id="Sunday">
                                    <label for="Sunday"
                                        class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Sunday</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-5 days">
                        <p class="fo-m text-lg text-[#414651] font-medium">Timing</p>
                        <div class="relative flex gap-5 w-full mt-3">
                            <div class="checkbox flex flex-wrap gap-5">
                                <div class="box">
                                    <input class="" type="checkbox" name="time1" id="time1" checked>
                                    <label for="time1" class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">Pre
                                        12 PM</label>
                                </div>
                                <div class="box">
                                    <input class="" type="checkbox" name="time2" id="time2">
                                    <label for="time2" class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">12PM
                                        - 5PM</label>
                                </div>
                                <div class="box">
                                    <input class="" type="checkbox" name="time3" id="time3">
                                    <label for="time3" class="text-[#1D1D1D] fo-m sm:text-[15px] text-[12px]">After
                                        5 PM</label>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="mt-5">
                        <p class="fo-m text-lg text-[#414651] font-medium">Rating</p>
                        <div class="relative w-full mt-3">
                            <select
                                class="w-full appearance-none text-[#717680] fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 pr-10 rounded-[10px] bg-white">
                                <option value="Science">5.0/5.0</option>
                            </select>


                            <img src="{{ asset('site/Sites/images/arrow-down.png') }}" alt="arrow"
                                class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 " />
                        </div>
                    </div>

                    <div class="mt-3">
                        <p class="fo-m text-lg text-[#414651] font-medium">Level of Teaching</p>
                        <div class="relative w-full mt-3">
                            <select
                                class="w-full appearance-none text-[#717680] fo-n text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-5 p-3 pr-10 rounded-[10px] bg-white">
                                <option value="Science">Intermediate</option>
                            </select>


                            <img src="{{ asset('site/Sites/images/arrow-down.png') }}" alt="arrow"
                                class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 " />
                        </div>
                    </div>

                    <div class="mt-3">
                        <button
                            class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-[10px] font-semibold w-full sm:py-4 py-3 text-[#FFFFFF] fm-xb mt-3  sm:text-[19px] text-sm">
                            Apply Filters
                        </button>
                    </div>


                </div>

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