@extends('client.raffles.layouts.app')
@section('content')
    <div class="about-banner">
    </div>

    <div class=" container py-40 px-30 blog">
        <div class="w-80percent mx-auto">
            <h2 class="md:text-30 text-60 text-sec text-center">{{ $page->title }}</h2>
            <div class="title-line mx-auto"></div>
        </div>

        <div class="row ">
            <aside class="col col-md-3">
                <h2 class="text-20 pt-30 text-center text-sec">Filter and search for your preference</h2>
                <div class="blog-filter">


                    <form class=" py-20 justify-center" action="">
                        <div class="flex flex-wrap items-center gap-10 pb-30 sm:block xl:hidden">
                            <input class=" w-70percent px-10 py-5 rounded-10 text-12 " type="text" name=""
                                id="" placeholder="Search or choose from category">
                            <button class="bg-transpa rent border-0 px-10 py-5 bg-blue-50"><i
                                    class="lqd-icn-ess icon-ld-search-2 text-14 font-bold pt-10"></i></button>
                        </div>




                        <div class="flex flex-col gap-30">
                            <div>
                                <h4 class="text-24 text-black">Category</h4>
                                <div class="blog-line"></div>


                            </div>

                            <div>


                                <h5 class="text-20 text-sec font-medium">Country:</h5>
                                <div class="flex flex-wrap   gap-20">

                                    <div class="flex gap-5 items-center w-40percent">
                                        <input type="checkbox" name="" id="uk">

                                        <label class="text-16 " for="uk">UK</label>
                                    </div>
                                    <div class="flex w-40percent  gap-5 items-center">
                                        <input type="checkbox" name="" id="usa">

                                        <label class="text-16 " for="usa">USA</label>
                                    </div>
                                    <div class="flex w-40percent  gap-5 items-center">
                                        <input type="checkbox" name="" id="denmark">

                                        <label class="text-16 " for="denmark">Denmark</label>
                                    </div>
                                    <div class="flex w-40percent gap-5 items-center">
                                        <input type="checkbox" name="" id="canada">

                                        <label class="text-16 " for="canada">Canada</label>
                                    </div>
                                    <div class="flex w-40percent gap-5 items-center">
                                        <input type="checkbox" name="" id="australia">

                                        <label class="text-16 " for="australia">Australia</label>
                                    </div>



                                </div>
                            </div>


                            <div>


                                <h5 class="text-20 text-sec py-10 font-medium">Language Test:</h5>
                                <div class="flex flex-wrap  gap-20">

                                    <div class="flex  w-40percent gap-5 items-center">
                                        <input type="checkbox" name="" id="ielts">

                                        <label class="text-16 " for="ielts">IELTS</label>
                                    </div>
                                    <div class="flex w-40percent gap-5 items-center">
                                        <input type="checkbox" name="" id="pte">

                                        <label class="text-16 " for="pte">PTE</label>
                                    </div>
                                    <div class="flex w-40percent gap-5 items-center">
                                        <input type="checkbox" name="" id="duolingo">

                                        <label class="text-16 " for="duolingo">Duolingo</label>
                                    </div>




                                </div>

                            </div>


                            <div>


                                <h5 class="text-20 text-sec  font-medium">Other:</h5>
                                <div class="flex flex-col justify-start  gap-20">

                                    <div class="flex  gap-5 items-center">
                                        <input class="text-start" type="checkbox" name="" id="cost">

                                        <label class="text-16 " for="cost">Cost</label>
                                    </div>
                                    <div class="flex gap-5 items-center">
                                        <input class="text-start" type="checkbox" name="" id="process">

                                        <label class="text-16 " for="process">Process</label>
                                    </div>
                                    <div class="flex gap-5 items-center">
                                        <input class="text-start" type="checkbox" name="" id="ticketing">

                                        <label class="text-16 " for="ticketing">Ticketing</label>
                                    </div>
                                    <div class="flex gap-5 items-center">
                                        <input class="text-start" type="checkbox" name="" id="accomodation">

                                        <label class="text-16 " for="accomodation">Accomodation</label>
                                    </div>
                                    <div class="flex gap-5 items-center">
                                        <input class="text-start" type="checkbox" name="" id="universities">

                                        <label class="text-16 " for="universities">Universities</label>
                                    </div>
                                    <div class="flex gap-5 items-center">
                                        <input class="text-start" type="checkbox" name="" id="fees">

                                        <label class="text-16 " for="fees">Fees</label>
                                    </div>
                                    <div class="flex gap-5 items-center">
                                        <input class="text-start" type="checkbox" name="" id="scholarships">

                                        <label class="text-16 " for="scholarships">Scholarships</label>
                                    </div>




                                </div>

                            </div>
                            <div>
                                <button
                                    class="button-hover px-20 py-10 bg-sec text-white rounded-30 text-14 border-0">Submit</button>

                            </div>

                        </div>





                    </form>
                </div>

            </aside>
            <div class="col col-md-9">
                <div class="flex gap-10 items-center  pt-30 px-20 scroll-section" id="pinned-posts">
                    <i class="fa-solid fa-map-pin text-sec text-18"></i>
                    <h2 class="text-sec text-20 m-0">Pinned Posts</h2>

                </div>
                <div class="line-through pl-20 pt-10"></div>
                <div class="row  pb-10">
                    @foreach ($blogs as $blog)
                        <div class="col col-sm-6 col-xxl-4">
                            <a href="{{ route('blog.single', $blog->slug) }}" class="flex flex-col gap-20 p-5 blog-post">
                                <div class="w-100percent h-210 overflow-hidden rounded-16 relative">
                                    <img class="w-full h-full object-cover rounded-16" src="{{ asset($blog->image) }}"
                                        alt="">
                                    <span
                                        class=" text-sec rounded-30 text-10 py-5 px-10 reading-time">{{ $blog->created_at }}</span>
                                </div>
                                <div>

                                    <h2 class="text-20 text-ter pt-10">{{ $blog->title }}</h2>
                                </div>
                                <div class="flex flex-col gap-20">
                                    <p class="text-16 text-black">{{ $blog->short_description }}</p>
                                    <p class="text-14">{{ $blog->created_at }}</p>

                                </div>

                            </a>
                        </div>
                    @endforeach
                </div>

                <div class="flex justify-center gap-10">
                    <div class="blog-pagination cursor-pointer">
                        <p class="py-5 bg-sec px-20 text-20 rounded-10 text-white">1</p>
                    </div>
                    {{-- <div class="blog-pagination cursor-pointer">
                        <p class="py-5 bg-sec px-20 text-20 rounded-10 text-white">2</p>
                    </div>
                    <div class="blog-pagination cursor-pointer">
                        <p class="py-5 bg-sec px-20 text-20 rounded-10 text-white">3</p>
                    </div>
                    <div class="blog-pagination cursor-pointer">
                        <p class="py-5 bg-sec px-20 text-20 rounded-10 text-white">Next</p>
                    </div> --}}
                </div>

            </div>
        </div>
    </div>
@endsection