@extends('website.desktop.layouts.app')
@section('title') India’s most Trending and reliable study abroad blogs & News - Gradding @endsection
@section('description') Gradding provides you complete information related to your all queries about study abroad & assist you with the industry best experts. @endsection
@php
function remove_href($string) {
    if ($string != null && $string != '') {
        $string = preg_replace('/<a\s+(?:[^>]*?\s+)?href=("[^"]*"|\'[^\']*\'|[^>\s]+)\s*[^>]*>/', '', $string);
        $string = preg_replace('/<\/a>/', '', $string);
    }
    
    return $string;
}
@endphp
@section('main')
<main>
	<!-- Blog Slider View -->
    <section class="blog-slider-section">
        <div class="container">
           <div class="blog-slider">
               <div class="blogs">
                @foreach($populars as $popular)
                    <div class="blog">
                        <a class="blog-image" href="{{url('/blog/'.@$popular->category->url.'/'.@$popular->url)}}"><img  width="100%" height="100%" src="{{@$popular->getImageUrlAttribute()}}" alt="{{ @$popular->imageAltText }}"></a>
                        <div class="blog-detail">
                            <a href="{{url('/blog/'.@$popular->category->url.'/'.@$popular->url)}}" class="blog-heading">
                                {{@$popular->header_title}}
                            </a>
                            <a href="{{url('/blog/'.@$popular->category->url.'/'.@$popular->url)}}" class="blog-description">
                                {!! remove_href(@$popular->header_description) !!}
                            </a>
                            <a class="blog-visit" href="{{url('/blog/'.@$popular->category->url.'/'.@$popular->url)}}">Visit Blog
                                <span class="blog-visit-arrow">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
                                        <path d="M10.3125 3.3125L14.0625 8M14.0625 8L10.3125 12.6875M14.0625 8H0.9375" stroke="#4E4949" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                            </a>
                        </div>
                    </div>
                    @endforeach
                    {{-- <div class="blog">
                        <a class="blog-image" href="javascript:;"><img class="blog-image" width="100%" height="100%" src="{{ asset('frontend') }}/assets-desktop/images/card-image.png" alt="">
                        </a>
                        
                        <div class="blog-detail">
                            <a href="javascript:;" class="blog-heading">
                                7 Changes Rishi Sunak Government Making for Study in the UK
                            </a>
                            <a href="javascript:;" class="blog-description">
                                Monash is not just a university. It’s the testimony of history, heritage and legacy of the UK. Established around 11th Century, this university is on.
                            </a>
                            <a class="blog-visit">Visit Blog
                                <span class="blog-visit-arrow">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
                                        <path d="M10.3125 3.3125L14.0625 8M14.0625 8L10.3125 12.6875M14.0625 8H0.9375" stroke="#4E4949" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                      </svg>
                                </span>
                            </a>
                        </div>
                    </div> --}}
               </div>
               <div class="blog-offer-card">
                <div class="gradding-offer">
                    <p class="offer-title">What Gradding Offers for you!!</p>
                    <div class="gradding-offer-card">
                        <div class="study-plan">
                            <span class="svg-icon">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M15 11.5498V2.50979C15 1.60462 14.3197 0.946329 13.4859 1.01686H13.442C11.9718 1.14617 9.74453 1.95731 8.49374 2.79195L8.37307 2.87425C8.17558 3.00356 7.83539 3.00356 7.62693 2.87425L7.45141 2.75668C6.2116 1.92205 3.98433 1.13441 2.51411 1.0051C1.68026 0.934562 1 1.60465 1 2.49806V11.5498C1 12.2668 1.54857 12.9487 2.21785 13.031L2.41534 13.0662C3.92944 13.2778 6.27746 14.1125 7.61601 14.9001L7.6489 14.9118C7.83542 15.0294 8.14261 15.0294 8.31816 14.9118C9.65671 14.1125 12.0157 13.2896 13.5407 13.0662L13.7712 13.031C14.4514 12.9487 15 12.2786 15 11.5498Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M8 4V14" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                            <div class="study-plan-details">
                                <p class="study-plan-title">Customized study plans</p>
                                <p class="study-plan-detail">Customize Your Study Plan under Expert Guidance</p>
                                <a href="javascript:;" class="study-plan-apply">Apply Now <svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
                                    <path d="M1.6665 0.988281L5.1665 4.48828L1.6665 7.98828" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                  </svg></a>
                            </div>
                        </div>
                        <div class="study-plan">
                            <span class="svg-icon">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.24683 1.43336L14.2468 3.83334C14.4802 3.92667 14.6668 4.20667 14.6668 4.45333V6.66667C14.6668 7.03334 14.3668 7.33334 14.0002 7.33334H2.00016C1.6335 7.33334 1.3335 7.03334 1.3335 6.66667V4.45333C1.3335 4.20667 1.52017 3.92667 1.7535 3.83334L7.7535 1.43336C7.88683 1.38002 8.11349 1.38002 8.24683 1.43336Z" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M14.6668 14.6667H1.3335V12.6667C1.3335 12.3 1.6335 12 2.00016 12H14.0002C14.3668 12 14.6668 12.3 14.6668 12.6667V14.6667Z" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M2.6665 12V7.33333" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M5.3335 12V7.33333" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M8 12V7.33333" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M10.6665 12V7.33333" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M13.3335 12V7.33333" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M0.666504 14.6667H15.3332" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M8 5.66667C8.55228 5.66667 9 5.21896 9 4.66667C9 4.11439 8.55228 3.66667 8 3.66667C7.44772 3.66667 7 4.11439 7 4.66667C7 5.21896 7.44772 5.66667 8 5.66667Z" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>                                    
                            </span>
                            <div class="study-plan-details">
                                <p class="study-plan-title">University Admission</p>
                                <p class="study-plan-detail">Simplify the Time-Consuming Admission Process with Experts</p>
                                    <a href="javascript:;" class="study-plan-apply">Apply Now <svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
                                        <path d="M1.6665 0.988281L5.1665 4.48828L1.6665 7.98828" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                      </svg></a>
                            </div>
                        </div>
                        <div class="study-plan">
                            <span class="svg-icon">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14.6668 6.66839V10.0017C14.6668 13.3351 13.3335 14.6684 10.0002 14.6684H6.00016C2.66683 14.6684 1.3335 13.3351 1.3335 10.0017V6.00172C1.3335 2.66839 2.66683 1.33505 6.00016 1.33505H9.3335" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M14.6668 6.66839H12.0002C10.0002 6.66839 9.3335 6.00172 9.3335 4.00172V1.33505L14.6668 6.66839Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M4.6665 8.66837H8.6665" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M4.6665 11.3351H7.33317" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>                                    
                            </span>
                            <div class="study-plan-details">
                                <p class="study-plan-title">Test Preparation</p>
                                <p class="study-plan-detail">Ace Standardized Entrance Tests with Decent Scores</p>
                                
                                    <a href="javascript:;" class="study-plan-apply">Apply Now <svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
                                        <path d="M1.6665 0.988281L5.1665 4.48828L1.6665 7.98828" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                      </svg></a>
                            </div>
                        </div>
                        <div class="study-plan">
                            <span class="svg-icon">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.4" d="M9.50765 10.6671H6.17432" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M8.43997 1.68048L8.41997 1.72714L6.48664 6.21381H4.58664C4.13331 6.21381 3.69997 6.30714 3.30664 6.47381L4.47331 3.68714L4.49997 3.62048L4.54664 3.51381C4.55997 3.47381 4.57331 3.43381 4.59331 3.40048C5.46664 1.38048 6.45331 0.920476 8.43997 1.68048Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12.0335 6.34715C11.7335 6.25381 11.4135 6.21381 11.0935 6.21381H6.48682L8.42015 1.72715L8.44015 1.68048C8.54015 1.71381 8.63348 1.76048 8.73348 1.80048L10.2068 2.42048C11.0268 2.76048 11.6001 3.11381 11.9468 3.54048C12.0135 3.62048 12.0668 3.69381 12.1135 3.78048C12.1735 3.87381 12.2202 3.96715 12.2468 4.06715C12.2735 4.12715 12.2935 4.18715 12.3068 4.24048C12.4868 4.80048 12.3802 5.48715 12.0335 6.34715Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M14.348 9.46729V10.7673C14.348 10.9006 14.3413 11.034 14.3346 11.1673C14.208 13.494 12.908 14.6673 10.4413 14.6673H5.24131C5.08131 14.6673 4.92131 14.654 4.76798 14.634C2.64798 14.494 1.51464 13.3606 1.37464 11.2406C1.35464 11.0873 1.34131 10.9273 1.34131 10.7673V9.46729C1.34131 8.12729 2.15464 6.97396 3.31464 6.47396C3.71464 6.30729 4.14131 6.21396 4.59464 6.21396H11.1013C11.428 6.21396 11.748 6.26063 12.0413 6.34729C13.368 6.75396 14.348 7.99396 14.348 9.46729Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M4.4735 3.68713L3.30683 6.4738C2.14683 6.9738 1.3335 8.12713 1.3335 9.46713V7.5138C1.3335 5.62047 2.68016 4.04047 4.4735 3.68713Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path opacity="0.4" d="M14.3457 7.51347V9.4668C14.3457 8.00014 13.3724 6.75347 12.0391 6.35347C12.3857 5.4868 12.4857 4.8068 12.3191 4.24014C12.3057 4.18014 12.2857 4.12014 12.2591 4.0668C13.4991 4.7068 14.3457 6.02014 14.3457 7.51347Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>                                    
                            </span>
                            <div class="study-plan-details">
                                <p class="study-plan-title">Smooth Visa process</p>
                                <p class="study-plan-detail">Raise the Odds of Fast Visa Approval in One Go</p>
                                    <a href="javascript:;" class="study-plan-apply">Apply Now <svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
                                        <path d="M1.6665 0.988281L5.1665 4.48828L1.6665 7.98828" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                      </svg></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gradding-offer choose-country">
                    <p class="offer-title">Choose Country to Study Abroad</p>
                    <div class="country-card">
                       <a href="{{url('/study-in-usa')}}" class="country-section">
                            <img width="100%" height="100%" src="{{ asset('frontend') }}/assets-desktop/images/usa.png" alt="">
                            <span class="country-name" >USA</span>
                       </a>
                       <a href="{{url('/study-in-uk')}}" class="country-section">
                            <img width="100%" height="100%" src="{{ asset('frontend') }}/assets-desktop/images/uk.png" alt="">
                            <span class="country-name" >UK</span>
                       </a>
                       <a href="{{url('/study-in-australia')}}" class="country-section">
                            <img width="100%" height="100%" src="{{ asset('frontend') }}/assets-desktop/images/au.png" alt="">
                            <span class="country-name" >Australia</span>
                       </a>
                       <a href="{{url('/study-in-hungary')}}" class="country-section">
                            <img width="100%" height="100%" src="{{ asset('frontend') }}/assets-desktop/images/hungary.png" alt="">
                            <span class="country-name" >Hungary</span>
                       </a>
                       <a href="{{url('/study-in-malta')}}" class="country-section">
                            <img width="100%" height="100%" src="{{ asset('frontend') }}/assets-desktop/images/malta.png" alt="">
                            <span class="country-name" >Malta</span>
                       </a>
                        <a href="{{url('/study-in-canada')}}" class="country-section">
                            <img width="100%" height="100%" src="{{ asset('frontend') }}/assets-desktop/images/canada-blog-icon.png" alt="">
                            <span class="country-name" >Canada</span>
                        </a>
                       {{-- <div class="country-section">
                       <a href="/universities" class="view-all"  aria-label='view-all'>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <g clip-path="url(#clip0_1475_17201)">
                              <path d="M10.9927 3.3125L14.7427 8M14.7427 8L10.9927 12.6875M14.7427 8H1.61768" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                              <clipPath id="clip0_1475_17201">
                                <rect width="15" height="15" fill="white" transform="translate(0.680176 0.5)"/>
                              </clipPath>
                            </defs>
                          </svg>
                        </a>
                        <a class="country-name" href="/universities" aria-label='view-all'>View All</a>
                       </div> --}}
                    </div>
                </div>

                <div class="gradding-offer call-us-now">
                   <p class="have-a-dream">Have a dream to Study Abroad? Call us Now</p>
                    <p class="call-phone-number" >
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M21.97 18.33C21.97 18.69 21.89 19.06 21.72 19.42C21.55 19.78 21.33 20.12 21.04 20.44C20.55 20.98 20.01 21.37 19.4 21.62C18.8 21.87 18.15 22 17.45 22C16.43 22 15.34 21.76 14.19 21.27C13.04 20.78 11.89 20.12 10.75 19.29C9.6 18.45 8.51 17.52 7.47 16.49C6.44 15.45 5.51 14.36 4.68 13.22C3.86 12.08 3.2 10.94 2.72 9.81C2.24 8.67 2 7.58 2 6.54C2 5.86 2.12 5.21 2.36 4.61C2.6 4 2.98 3.44 3.51 2.94C4.15 2.31 4.85 2 5.59 2C5.87 2 6.15 2.06 6.4 2.18C6.66 2.3 6.89 2.48 7.07 2.74L9.39 6.01C9.57 6.26 9.7 6.49 9.79 6.71C9.88 6.92 9.93 7.13 9.93 7.32C9.93 7.56 9.86 7.8 9.72 8.03C9.59 8.26 9.4 8.5 9.16 8.74L8.4 9.53C8.29 9.64 8.24 9.77 8.24 9.93C8.24 10.01 8.25 10.08 8.27 10.16C8.3 10.24 8.33 10.3 8.35 10.36C8.53 10.69 8.84 11.12 9.28 11.64C9.73 12.16 10.21 12.69 10.73 13.22C11.27 13.75 11.79 14.24 12.32 14.69C12.84 15.13 13.27 15.43 13.61 15.61C13.66 15.63 13.72 15.66 13.79 15.69C13.87 15.72 13.95 15.73 14.04 15.73C14.21 15.73 14.34 15.67 14.45 15.56L15.21 14.81C15.46 14.56 15.7 14.37 15.93 14.25C16.16 14.11 16.39 14.04 16.64 14.04C16.83 14.04 17.03 14.08 17.25 14.17C17.47 14.26 17.7 14.39 17.95 14.56L21.26 16.91C21.52 17.09 21.7 17.3 21.81 17.55C21.91 17.8 21.97 18.05 21.97 18.33Z" stroke="#F3601E" stroke-width="2" stroke-miterlimit="10"/>
                            <path opacity="0.4" d="M18.5 9C18.5 8.4 18.03 7.48 17.33 6.73C16.69 6.04 15.84 5.5 15 5.5" stroke="#F3601E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path opacity="0.4" d="M22 9C22 5.13 18.87 2 15 2" stroke="#F3601E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          </svg>
                          {{@$website_setting->phone}}
                        </p>
                    <a class="call-button" href="tel:{{@$website_setting->phone}}">
                        CALL US NOW
                    </a>
                </div>
               </div>
           </div>
        </div>
    </section>
    <!-- Search & Tabbed Section -->
    <section>
        <div class="container">
            <h1 class="blog-heading-section">
                News <span>&</span> Blogs
            </h1>
            <form class="blog-search-bar" id="blogSeachForm">
                <span class="left-button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.965 14.2539H15.755L20.745 19.2539L19.255 20.7439L14.255 15.7539V14.9639L13.985 14.6839C12.845 15.6639 11.365 16.2539 9.755 16.2539C6.165 16.2539 3.255 13.3439 3.255 9.75391C3.255 6.16391 6.165 3.25391 9.755 3.25391C13.345 3.25391 16.255 6.16391 16.255 9.75391C16.255 11.3639 15.665 12.8439 14.685 13.9839L14.965 14.2539ZM5.255 9.75391C5.255 12.2439 7.26501 14.2539 9.755 14.2539C12.245 14.2539 14.255 12.2439 14.255 9.75391C14.255 7.26391 12.245 5.25391 9.755 5.25391C7.26501 5.25391 5.255 7.26391 5.255 9.75391Z" fill="#AFB0B8"/>
                    </svg>
                </span>
                <input type="text" placeholder="Search Blogs" id="blogSearchInput" name="q">
                <button class="search-button" type="submit">
                    <svg class="clear-search" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512">
						<path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" fill="#fff"/>
					</svg>
				</button>
                <span class="search-line"></span>
                <span class="country-dropdown">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                        <path d="M10.9997 20.1666C16.0623 20.1666 20.1663 16.0626 20.1663 11C20.1663 5.93737 16.0623 1.83331 10.9997 1.83331C5.93706 1.83331 1.83301 5.93737 1.83301 11C1.83301 16.0626 5.93706 20.1666 10.9997 20.1666Z" stroke="#AFB0B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <g opacity="0.4">
                            <path d="M7.33314 2.75H8.2498C6.4623 8.10333 6.4623 13.8967 8.2498 19.25H7.33314" stroke="#AFB0B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M13.75 2.75C15.5375 8.10333 15.5375 13.8967 13.75 19.25" stroke="#AFB0B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2.75 14.6667V13.75C8.10333 15.5375 13.8967 15.5375 19.25 13.75V14.6667" stroke="#AFB0B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M2.75 8.25011C8.10333 6.46261 13.8967 6.46261 19.25 8.25011" stroke="#AFB0B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </g>
                    </svg>
                    <select name="country" id="country-filter" class="select-country" aria-label="country">
                        <option  value="">Country</option>
                        <option value="79">UK</option>
                        <option value="233">USA</option>
                        <option value="15">Australia</option>
                        <option value="100">Hungary</option>
                        <option value="146">Malta</option>
                    </select>
                </span>
            </form>
            <div class="blog-tab">
                <a href="{{ url('blog/') }}" onclick="blogCategory(event, this, 'all')" class="tabs all tablinks active">All</a>
                <a href="{{ url('blog/news') }}" onclick="blogCategory(event, this, 'news')"  class="tabs tablinks">News</a>
                <a href="{{ url('blog/exams') }}" onclick="blogCategory(event, this, 'exams')"  class="tabs tablinks">Exams</a>
                <a href="{{ url('blog/courses') }}" onclick="blogCategory(event, this, 'courses')"  class="tabs tablinks">Courses</a>
                <a href="{{ url('blog/scholarships') }}" onclick="blogCategory(event, this, 'scholarships')"  class="tabs tablinks">Scholarships</a>
                <a href="{{ url('blog/university') }}" onclick="blogCategory(event, this, 'university')"  class="tabs tablinks">University</a>
                <a href="{{ url('blog/jobs') }}" onclick="blogCategory(event, this, 'jobs')"  class="tabs tablinks">Jobs</a>
                <a href="{{ url('blog/visa') }}" onclick="blogCategory(event, this, 'visa')"  class="tabs tablinks">Visa</a>
                <a href="{{ url('blog/finance') }}" onclick="blogCategory(event, this, 'finance')"  class="tabs tablinks">Finance</a>
                <a href="{{ url('blog/travel') }}" onclick="blogCategory(event, this, 'travel')"  class="tabs tablinks">Travel</a>
                <a href="{{ url('blog/study-abroad') }}" onclick="blogCategory(event, this, 'study-abroad')"  class="tabs tablinks">Study Abroad</a>
                <a href="{{ url('blog/life-at-abroad') }}" onclick="blogCategory(event, this, 'life-at-abroad')"  class="tabs tablinks">Life at abroad</a>
                <a href="{{ url('blog/ielts') }}" onclick="blogCategory(event, this, 'ielts')"  class="tabs tablinks">IELTS</a>
                <a href="{{ url('blog/pte') }}" onclick="blogCategory(event, this, 'pte')"  class="tabs tablinks">PTE</a>
            </div> 
        </div>                       
        <!-- Trending Blogs -->
        <div class="filter-blog" id="filter-blog" style="display: none">
            <div class="container">
                <div class="filter-list">
                    <p class="filter-by">
                        FILTER BY
                        <div class="filter-category">
                            <a onclick="blogSubCategory(event,this,'reading')" class="ielts">Reading</a>
                            <a onclick="blogSubCategory(event,this,'writing')" class="ielts">Writing</a>
                            <a onclick="blogSubCategory(event,this,'listening')" class="ielts">Listening</a>
                            <a onclick="blogSubCategory(event,this,'speaking')" class="ielts">Speaking</a>
                            <a onclick="blogSubCategory(event,this,'cue-card')" class="ielts">Cue Card</a>
                        </div>
                    </p>
                </div> 
            </div>
        </div> 

        <div class="container"> 
            <div class="blog-div tabcontent" id="All">
                @if (!$trendings->isEmpty())                      
                <div class="blog-trending-section">
                    <p class="blog-title">Trending Blog</p>
                    <div class="trending-blogs">
                        @foreach($trendings as $trending)
                        <a href="{{url('/blog').'/'.@$trending->category->url.'/'.@$trending->url}}" class="blog-card">
                            <img data-src="{{@$trending->getImageUrlAttribute()}}" width="100%" height="100%" alt="{{ @$trending->imageAltText }}">
                            <div class="blog-detail">
                                <p class="blog-detail-cat">{{@$trending->category->name}}</p>
                                <h2 class="blog-detail-title">{{@$trending->header_title}}</h4>
                                <p class="blog-detail-cat">{{dateMonthFormat(@$trending->display_date)}}</p>
                            </div>
                        </a>
                        @endforeach
                    </div>
                </div>
                @endif
                 <!-- Recent Blog -->
                <div >
                    <p class="blog-title">Recent Blog</p>
                    <div class="recent-blog searchBlogsSection">
                        @foreach($blogs->take(3) as $blog)
                        <a href="{{url('/blog').'/'.@$blog->category->url.'/'.@$blog->url}}" class="blog-card">
                            <img data-src="{{@$blog->getImageUrlAttribute()}}" width="100%" height="100%" alt="{{ @$blog->imageAltText }}">
                            <div class="blog-details">
                                <p class="blog-detail-cat">
                                    {{@$blog->category->name}}
                                </p>
                                <h2 class="blog-detail-title">
                                    {{@$blog->header_title}}
                                </h2>
                                <p class="blog-detail-cat">
                                    {{dateMonthFormat(@$blog->display_date)}}
                                </p>
                            </div>
                        </a>
                        @endforeach
                    </div>
                    <div class="recent-blog">
                        @if(!empty($blogs[3]))
                        <a href="{{url('/blog').'/'.@$blogs[3]->category->url.'/'.@$blogs[3]->url}}" class="blog-card">
                            <img data-src="{{@$blogs[3]->image}}" width="100%" height="100%" alt="{{ @$blogs[3]->imageAltText }}">
                            <div class="blog-details">
                                <p class="blog-detail-cat">
                                    {{@$blogs[3]->category->name}}
                                </p>
                                <h2 class="blog-detail-title">
                                    {{@$blogs[3]->header_title}}
                                </h2>
                                <p class="blog-detail-cat">
                                    {{dateMonthFormat(@$blogs[3]->display_date)}}
                                </p>
                            </div>
                        </a>
                        @endif
                        <div  class="Adv-card">
                            <div class="adv-details">
                                <h2 class="adv-title">
                                    Find your dream University
                                </h2>
                                <p class="adv-desc">
                                    GET offer from Top Ranked Universities in 7 to 15 days*
                                </p>
                                <a class="adv-link" href="/finder/university">
                                    Start now
                                </a>
                            </div>
                            <img class="adv-student-image" width="100%" height="100%" data-src="{{ asset('frontend') }}/assets-desktop/images/pngwing 1.png" alt="">
                        </div>
                        @if(!empty($blogs[4]))
                        <a href="{{url('/blog').'/'.@$blogs[4]->category->url.'/'.@$blogs[4]->url}}" class="blog-card">
                            <img data-src="{{@$blogs[4]->image}}" width="100%" height="100%" alt="{{ @$blogs[4]->imageAltText }}">
                            <div class="blog-details">
                                <p class="blog-detail-cat">
                                    {{@$blogs[4]->category->name}}
                                </p>
                                <h2 class="blog-detail-title">
                                    {{@$blogs[4]->header_title}}
                                </h2>
                                <p class="blog-category blog-date blog-detail-cat">
                                    {{dateMonthFormat(@$blogs[4]->display_date)}}
                                </p>
                            </div>
                        </a>
                        @endif
                    </div>
                </div>
            </div>
            <!-- Pagination -->
            <div class="pagination">
                <div class="page">
                    {{@$blogs->links()}}
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="subscribe-banner">
                <div class="subscribe-card">
                    <h2 class="subscribe-title">Subscribe to our Newsletter for Newest Course Updates</h2>
                    <form class="subscribe-email subscribeForm">
                        <input type="text" placeholder="Enter your email" name="email">
                        <button type="submit" class="subscribe-button">Subscribe!</button>
                    </form>
                </div>
                <span class="circle-right">
                    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" viewBox="0 0 151 85" fill="none">
                        <path opacity="0.5"  class="fill-white opacity-4" d="M210.030,105.011 C210.030,163.014 163.010,210.029 105.012,210.029 C47.013,210.029 -0.005,163.014 -0.005,105.011 C-0.005,47.015 47.013,-0.004 105.012,-0.004 C163.010,-0.004 210.030,47.015 210.030,105.011 Z" fill="white"></path>
                    </svg>
                </span>
                <span class="circle-left">
                    <svg xmlns="http://www.w3.org/2000/svg" width="151" height="85" viewBox="0 0 151 85" fill="none">
                        <path opacity="0.5" d="M210.030 70.5C150.332 109.436 111.438 141 63.4597 141C15.4816 141 -23.4124 109.436 -23.4124 70.5C-23.4124 31.5639 15.4816 0 63.4597 0C111.438 0 150.332 31.5639 150.332 70.5Z" fill="white"/>
                      </svg>
                </span>
                <span class="circle-top">
                    <svg xmlns="http://www.w3.org/2000/svg" width="55" height="40" viewBox="0 0 55 40" fill="none">
                        <ellipse opacity="0.5" cx="27.2665" cy="19.5058" rx="27.1623" ry="19.5058" fill="white"/>
                      </svg>
                </span>
            </div>
        </div>
    </section>
    <!-- Popup modal for Newsletter START -->
    
    @include('website.desktop.partials.modals.blogModal')
    <!-- Popup modal for Newsletter END -->
</main>
@endsection

@section('css')
	<link rel="stylesheet" type="text/css" href="{{ asset('frontend') }}/assets-desktop/css/blog.css?v={{ env('ASSETS_VERSION')}}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@endsection

@section('script')
<script src="{{asset('frontend')}}/assets-desktop/js/blog.js?v={{ env('ASSETS_VERSION')}}"></script>
{{-- <script src="{{asset('frontend')}}/assets-desktop/js/script.js?v={{ env('ASSETS_VERSION')}}"></script> --}}
<script>
    $('.blogs').slick({
        dots: true,
        arrows:true,
        nextArrow:"<button type='button' aria-label='next-arrow' class='slick-next slider-arrow'><svg xmlns='http://www.w3.org/2000/svg' width='16' height='26' viewBox='0 0 16 26' fill='none'><path d='M2.6665 2.66797L13.3332 13.3346L2.6665 24.0013' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg></button>",
        prevArrow:"<button type='button' aria-label='prev-arrow' class='slick-prev slider-arrow'><svg xmlns='http://www.w3.org/2000/svg' width='16' height='26' viewBox='0 0 16 26' fill='none'><path d='M13.3332 2.66797L2.6665 13.3346L13.3332 24.0013' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg></button>",
    });


    function blogSubCategory(event, element, url) {
        event.preventDefault();
                
        let currentUrl = window.location.href;
        let urlParams = new URLSearchParams(window.location.search);
        urlParams.delete('f');
        let newUrl = window.location.pathname + '?f=' + url;
        window.history.pushState({ path: newUrl }, '', newUrl);

        $('.filter-category a.active').removeClass('active');        
        $(element).addClass('active');

        let currentURL = window.location.href;
        let parts = currentURL.split('/');
        let exam = parts[parts.length - 1].split('?')[0];

        formData = new FormData();
        var _token = $('meta[name="csrf-token"]').attr('content');
        formData.append("_token",_token);
        formData.append("exam",exam);
        formData.append("url",url);        
        $.ajax({
            type: 'POST',
            url: '{{ route("website.blogSubcategory")}}',
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: (res) => {
                if (res.status) {
                    $('.blog-trending-section').hide();
                    $('.blog-title').text('');
                    $('.recent-blog').empty();
                    $('.pagination').empty();

                    if (res.blogCategory.data.length === 0) {
                        $('.searchBlogsSection').html('<h3> No Blogs Found </h3>');
                    } else {
                        var addedBlogIds = [];
                        res.blogCategory.data.forEach(function(blog, index) {
                            if (!addedBlogIds.includes(blog.id)) {
                                addedBlogIds.push(blog.id);
                                let blogHtml = 
                                `<a href="/blog/${blog.category.url}/${blog.url}" class="blog-card">
                                    <img src="/${blog.image}" width="100%" height="100%" alt="blog-image">
                                    <div class="blog-details">
                                        <p>${blog.category.name}</p>
                                        <h4>${blog.header_title}</h4>
                                        <p>${formatDate(blog.display_date)}</p>
                                    </div>
                                </a>`;
                                $('.searchBlogsSection').append(blogHtml);
                                $('.searchBlogsSection').addClass('scrollToBlog');
                            }
                        
                            if ((index + 1) % 4 === 0) {
                                adHtml = `<div  class="Adv-card">
                                <div class="adv-details">
                                    <h4>
                                        Find your dream University
                                    </h4>
                                    <p>
                                        GET offer from Top Ranked Universities in 7 to 15 days*
                                    </p>
                                    <a href="javascript:;">
                                        Start now
                                    </a>
                                </div>
                                <img class="adv-student-image" width="100%" height="100%" src="/frontend/assets-desktop/images/pngwing 1.png" alt="">
                                </div>`;
                                $('.searchBlogsSection').append(adHtml);
                            }
                        });                                    
                        $('.pagination').append(res.pagination_html);
                        var triggerScroll = $('.scrollToBlog').offset().top;
                        var triggerScroll = triggerScroll - 250;       
                        $('html, body').animate({scrollTop: triggerScroll}, 1000);
                        $('.pagination').on('click', '.pagination a', function(e) {
                            e.preventDefault();
                            var url = $(e.target).attr("href");
                            pagination_category(url)
                        })
                    }
                }
            }
        });
    }


    $(document).ready(function () {
        let url = window.location.href;            
        let urlParams = new URLSearchParams(new URL(url).search);
        let fValue = urlParams.get('f');
        if(fValue){            
            $('.'+fValue).trigger('click');
        }
    });
</script>

@endsection