@extends('website.mobile.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>
	<section class="blog-slider-section">
		<div class="container">
			<div class="blog-slider">
			@foreach($populars->take(5) as $popular)
			<div>
				<a href="{{url('/blog/'.@$popular->category->url.'/'.@$popular->url)}}" class="blog" aria-label="slider-blog">
					<img width="100%" height="100%" class="blog-image" src="{{@$popular->getImageUrlAttribute()}}" alt="{{ @$popular->imageAltText }}">
					<div class="blog-detail">
						<p class="blog-heading">
							{{@$popular->header_title}}
						</p>
						<div class="blog-description">
							{!! remove_href(@$popular->header_description) !!}
						</div>
						<div 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>
						</div>
					</div>
				</a>
			</div>
			@endforeach
			</div>
		</div>
    </section>
	<!-- Gradding offer card -->
	<section>
		<div class="container">
			<div class="gradding-offer">
				<p class="gradding-offer-title">What Gradding Offers you!!</p>
				<div class="gradding-offer-card">
					<div class="gradding-offer-card-section">
						<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>
						<p class="customized-plan">Customized study plans</p>
						{{-- <a href="" class="gradding-offer-apply-now">APPLY NOW
							<svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
								<path d="M1.66602 1L5.16602 4.5L1.66602 8" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</a> --}}
					</div>
					<div class="gradding-offer-card-section">
						<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.24634 1.43334L14.2463 3.83332C14.4797 3.92666 14.6663 4.20665 14.6663 4.45332V6.66666C14.6663 7.03332 14.3663 7.33332 13.9997 7.33332H1.99967C1.63301 7.33332 1.33301 7.03332 1.33301 6.66666V4.45332C1.33301 4.20665 1.51968 3.92666 1.75301 3.83332L7.75301 1.43334C7.88634 1.38001 8.113 1.38001 8.24634 1.43334Z" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
						<path d="M14.6663 14.6667H1.33301V12.6667C1.33301 12.3 1.63301 12 1.99967 12H13.9997C14.3663 12 14.6663 12.3 14.6663 12.6667V14.6667Z" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
						<path opacity="0.4" d="M2.66699 12V7.33334" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
						<path opacity="0.4" d="M5.33301 12V7.33334" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
						<path opacity="0.4" d="M8 12V7.33334" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
						<path opacity="0.4" d="M10.667 12V7.33334" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
						<path opacity="0.4" d="M13.333 12V7.33334" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
						<path d="M0.666992 14.6667H15.3337" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
						<path opacity="0.4" d="M8 5.66666C8.55228 5.66666 9 5.21894 9 4.66666C9 4.11437 8.55228 3.66666 8 3.66666C7.44772 3.66666 7 4.11437 7 4.66666C7 5.21894 7.44772 5.66666 8 5.66666Z" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>

						</span>
						<p class="customized-plan">university admission</p>
						{{-- <a href="" class="gradding-offer-apply-now">APPLY NOW
							<svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
								<path d="M1.66602 1L5.16602 4.5L1.66602 8" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</a> --}}
					</div>
					<div class="gradding-offer-card-section">
						<span class="svg-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
								<path d="M14.6663 6.66668V10C14.6663 13.3333 13.333 14.6667 9.99967 14.6667H5.99967C2.66634 14.6667 1.33301 13.3333 1.33301 10V6.00001C1.33301 2.66668 2.66634 1.33334 5.99967 1.33334H9.33301" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
								<path d="M14.6663 6.66668H11.9997C9.99967 6.66668 9.33301 6.00001 9.33301 4.00001V1.33334L14.6663 6.66668Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
								<path opacity="0.4" d="M4.66699 8.66666H8.66699" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
								<path opacity="0.4" d="M4.66699 11.3333H7.33366" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</span>
						<p class="customized-plan">Test Preparation </p>
						{{-- <a href="javascript:;" class="gradding-offer-apply-now" onclick="showPopup()">APPLY NOW
							<svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
								<path d="M1.66602 1L5.16602 4.5L1.66602 8" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</a> --}}
					</div>
					<div class="gradding-offer-card-section">
						<span class="svg-icon">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
								<path opacity="0.4" d="M9.50814 10.6654H6.1748" stroke="#F37E20" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
								<path d="M8.43997 1.67877L8.41997 1.72543L6.48664 6.2121H4.58664C4.13331 6.2121 3.69997 6.30543 3.30664 6.4721L4.47331 3.68543L4.49997 3.61877L4.54664 3.5121C4.55997 3.4721 4.57331 3.4321 4.59331 3.39877C5.46664 1.37877 6.45331 0.918767 8.43997 1.67877Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
								<path d="M12.033 6.34544C11.733 6.25211 11.413 6.21211 11.093 6.21211H6.48633L8.41966 1.72544L8.43966 1.67877C8.53966 1.71211 8.63299 1.75877 8.73299 1.79877L10.2063 2.41877C11.0263 2.75877 11.5997 3.11211 11.9463 3.53877C12.013 3.61877 12.0663 3.69211 12.113 3.77877C12.173 3.87211 12.2197 3.96544 12.2463 4.06544C12.273 4.12544 12.293 4.18544 12.3063 4.23877C12.4863 4.79877 12.3797 5.48544 12.033 6.34544Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
								<path d="M14.3475 9.46558V10.7656C14.3475 10.8989 14.3408 11.0322 14.3342 11.1656C14.2075 13.4922 12.9075 14.6656 10.4408 14.6656H5.24082C5.08082 14.6656 4.92082 14.6522 4.76749 14.6322C2.64749 14.4922 1.51415 13.3589 1.37415 11.2389C1.35415 11.0856 1.34082 10.9256 1.34082 10.7656V9.46558C1.34082 8.12558 2.15415 6.97225 3.31415 6.47225C3.71415 6.30558 4.14082 6.21225 4.59415 6.21225H11.1008C11.4275 6.21225 11.7475 6.25892 12.0408 6.34558C13.3675 6.75225 14.3475 7.99225 14.3475 9.46558Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
								<path opacity="0.4" d="M4.47301 3.68542L3.30634 6.47209C2.14634 6.97209 1.33301 8.12543 1.33301 9.46543V7.51209C1.33301 5.61876 2.67967 4.03876 4.47301 3.68542Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
								<path opacity="0.4" d="M14.3457 7.51176V9.46509C14.3457 7.99843 13.3724 6.75176 12.0391 6.35176C12.3857 5.48509 12.4857 4.80509 12.3191 4.23843C12.3057 4.17843 12.2857 4.11843 12.2591 4.06509C13.4991 4.70509 14.3457 6.01843 14.3457 7.51176Z" stroke="#F37E20" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</span>
						<p class="customized-plan">Smooth Visa process</p>
						{{-- <a href="" class="gradding-offer-apply-now">APPLY NOW
							<svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none">
								<path d="M1.66602 1L5.16602 4.5L1.66602 8" stroke="#F37E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</a> --}}
					</div>
					
				</div>
			</div>
		</div>
	</section>
	<!--Gradding country Card  -->
	<section>
		<div class="container">
			<div class="gradding-offer">
				<p class="gradding-offer-title">Choose Country to Study Abroad</p>
				<div class="gradding-offer-card gradding-country-card">
					<a href="/us" class="gradding-offer-card-section">
						<img data-src="{{ asset('/') }}frontend/assets-mobile/images/usa.png" alt="country-logo" class="country-icon">
						<p class="customized-plan">USA</p>
					</a>
					<a href="/study-in-uk" class="gradding-offer-card-section">
						<img data-src="{{ asset('/') }}frontend/assets-mobile/images/uk.png" alt="country-logo" class="country-icon">
						<p class="customized-plan">UK</p>
					</a>
					<a href="/study-in-australia" class="gradding-offer-card-section">
						<img data-src="{{ asset('/') }}frontend/assets-mobile/images/au.png" alt="country-logo" class="country-icon">
						<p class="customized-plan">Australia</p>
					</a>
					<a href="/study-in-hungary" class="gradding-offer-card-section">
						<img data-src="{{ asset('/') }}frontend/assets-mobile/images/hungary.png" alt="country-logo" class="country-icon">
						<p class="customized-plan">Hungary</p>
					</a>
					<a href="/study-in-malta" class="gradding-offer-card-section">
						<img data-src="{{ asset('/') }}frontend/assets-mobile/images/malta.png" alt="country-logo" class="country-icon">
						<p class="customized-plan">Malta</p>
					</a>
					<a href="/study-in-canada" class="gradding-offer-card-section">
						<img data-src="{{ asset('/') }}frontend/assets-mobile/images/canada-blog-icon.png" alt="country-logo" class="country-icon">
						<p class="customized-plan">Canada</p>
					</a>
					{{-- <div class="gradding-offer-card-section">
					<a href="/universities" class="country-svg-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 16 16" fill="none">
							<g clip-path="url(#clip0_95_13393)">
							<path d="M11.1523 3.3125L14.9023 8M14.9023 8L11.1523 12.6875M14.9023 8H1.77734" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
							</g>
							<defs>
							<clipPath id="clip0_95_13393">
								<rect width="15" height="15" fill="white" transform="translate(0.839844 0.5)"/>
							</clipPath>
							</defs>
						</svg>
						</a>
						<p class="customized-plan">View All</p>
					</div> --}}
					
				</div>
			</div>
		</div>
	</section>
	<!-- News & Blog Section -->
	<section>
		<div class="container">
			<h1 class="blog-news-heading heading-h1">
				News <span>&</span> Blogs
			</h1>
			<form class="search-bar" id="blogSeachForm">
				<a href="javascript:;" class="search-icon" aria-label="search-icon">
					<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>
				</a>
				<input type="search" 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"></path>
                        <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>
                            <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>
                            <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>
                            <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"></path>
                        </g>
                    </svg>
                    <select name="country" id="" class="select-country" aria-label="list-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 class="custom-select-arrow"></span>
                </span>

			</form>
			<div class="blog-tabs">
				<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/travel') }}" onclick="blogCategory(event, this, 'study-abroad')"  class="tabs tablinks">Study Abroad</a>
                <a href="{{ url('blog/travel') }}" 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>
		<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">Reading</a>
                            <a onclick="blogSubCategory(event,this,'writing')" class="ielts writing">Writing</a>
                            <a onclick="blogSubCategory(event,this,'listening')" class="ielts listening">Listening</a>
                            <a onclick="blogSubCategory(event,this,'speaking')" class="ielts speaking">Speaking</a>
                            <a onclick="blogSubCategory(event,this,'cue-card')" class="ielts cue-card">Cue Card</a>
						</div>
					</p>
				</div> 
			</div>
		</div> 
		<div class="container">

			
			<!-- Trending Blogs -->
			<div class="trending-blog tabcontent" id="All">
                @if (!$trendings->isEmpty())
				<div class="blog-trending-section">
					<p class="blog-title">Trending Blog</p>
					@foreach($trendings as $trending)
					<a href="{{url('/blog').'/'.@$trending->category->url.'/'.@$trending->url}}" class="trending-blog-card">
						<img width="100%" height="100%" class="blog-image" data-src="{{@$trending->getImageUrlAttribute()}}" alt="{{ @$trending->imageAltText }}">
						<div class="blog-details">
							<p class="blog-category">
								{{@$trending->category->name}}
							</p>
							<h2 class="blog-headline">
								{{@$trending->header_title}}
							</h2>
							<p class="blog-category">
								{{dateMonthFormat(@$trending->display_date)}}
							</p>
						</div>
					</a>
					@endforeach
				</div>
				@endif
				
				<p class="blog-title">Recent Blog</p>
				@foreach($blogs as $blog)
				<a href="{{url('/blog').'/'.@$blog->category->url.'/'.@$blog->url}}" class="trending-blog-card">
					<img width="100%" height="100%" class="blog-image" data-src="{{@$blog->getImageUrlAttribute()}}" alt="{{ @$blog->imageAltText }}">
					<div  class="blog-details">
						<p class="blog-category">
							{{@$blog->category->name}}
						</p>
						<h3 class="blog-headline heading-h3">
							{{@$blog->header_title}}
						</h3>
						<p class="blog-category">
							{{dateMonthFormat(@$blog->display_date)}}
						</p>
					</div>
				</a>
				@endforeach
			</div>
			
			<!-- Pagination  -->
			<div class="pagination">
				<div class="page">
					{{ $blogs->onEachSide(1)->links() }}
					</div>
			</div>
		</div>
		</div>
	</section>
	<!-- Subscribe Banner -->
	<section>
		<div class="container">
			<div class="subscribe-banner">
				<div class="subscribe-card">
					<h2 class="subscribe-title heading-h2">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! 
							<span class="spin-loader" style="display:none"></span>
						</button>
					</form>
				</div>
				<span class="circle-left">
					<svg xmlns="http://www.w3.org/2000/svg" width="89" height="50" viewBox="0 0 89 50" fill="none">
						<path opacity="0.5" d="M88.3337 41.4799C88.3337 64.3584 65.4799 82.9051 37.2884 82.9051C9.0969 82.9051 -13.7568 64.3584 -13.7568 41.4799C-13.7568 18.6014 9.0969 0.0546875 37.2884 0.0546875C65.4799 0.0546875 88.3337 18.6014 88.3337 41.4799Z" fill="white"/>
					</svg>
				</span>
				<span class="circle-top">
					<svg xmlns="http://www.w3.org/2000/svg" width="33" height="24" viewBox="0 0 33 24" fill="none">
						<ellipse opacity="0.5" cx="16.89" cy="12.3887" rx="15.9603" ry="11.4614" fill="white"/>
					</svg>
				</span>
			</div>
		</div>
	</section>
	<!-- SEO Content -->
	{{-- <section class="seo-content">
		<div class="container">
			<p>How promotion excellent curiosity yet attempted happines prosperous impression had conviction.
				<span class="moretext">Lorem ipsum, dolor Lorem, ipsum dol sequi eos, voluptates voluptate perferendis ea voluptatibus reprehenderit perspiciatis nob
					is explicabo ducimus odio eaque deleniti reiciendis nequt cum esse dolorum temporibus possimus.</span>
					<a href="javascript:;" class="moreless-button">more</a>
			</p>
		</div>
	</section> --}}
	<!-- Faqs Accordian -->
	<!-- <section id="accordion">
		<div class="container">
			<h3 class="Faq-title">Frequently Asked Questions</h3>
			<div class="accordian">
				<p class="accordion-head ">
					How experienced are your study abroad experts at Jaipur  Location?
					<span class="accordian-arrow">
					<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="M4.4545 7.8295C4.89384 7.39017 5.60616 7.39017 6.0455 7.8295L12 13.784L17.9545 7.8295C18.3938 7.39017 19.1062 7.39017 19.5455 7.8295C19.9848 8.26884 19.9848 8.98116 19.5455 9.4205L12.7955 16.1705C12.3562 16.6098 11.6438 16.6098 11.2045 16.1705L4.4545 9.4205C4.01517 8.98116 4.01517 8.26884 4.4545 7.8295Z" fill="#2563EB"/>
						</svg>
					</span>
				</p>
				<p class="accordion-description">
					Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolor corrupti facilis doloremque voluptatum neque unde autem maiores quod at fugit, obcaecati, minus quos! Minus consectetur earum totam non facere. Assumenda alias doloribus quidem perferendis quam necessitatibus nisi hic, ratione possimus, sit reiciendis doloremque soluta natus sapiente, esse cupiditate eveniet.
		
				</p>
			</div>
			<div class="accordian">
				<p class="accordion-head">
					Venenatis nulla sagittis nunc, lobortis nec sollicitudin neque, dolor?
					<span class="accordian-arrow">
						<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="M4.4545 7.8295C4.89384 7.39017 5.60616 7.39017 6.0455 7.8295L12 13.784L17.9545 7.8295C18.3938 7.39017 19.1062 7.39017 19.5455 7.8295C19.9848 8.26884 19.9848 8.98116 19.5455 9.4205L12.7955 16.1705C12.3562 16.6098 11.6438 16.6098 11.2045 16.1705L4.4545 9.4205C4.01517 8.98116 4.01517 8.26884 4.4545 7.8295Z" fill="#2563EB"/>
							</svg>
						</span>
					</p>
				<p class="accordion-description">
					Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolor corrupti facilis doloremque voluptatum neque unde autem maiores quod at fugit, obcaecati, minus quos! Minus consectetur earum totam non facere. Assumenda alias doloribus quidem perferendis quam necessitatibus nisi hic, ratione possimus, sit reiciendis doloremque soluta natus sapiente, esse cupiditate eveniet.
		
				</p>
			</div>
			<div class="accordian">
				<p class="accordion-head">
					Varius ultricies molestie tellus fermentum, viverra ipsum scelerisque etiam lorem?
					<span class="accordian-arrow">
						<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="M4.4545 7.8295C4.89384 7.39017 5.60616 7.39017 6.0455 7.8295L12 13.784L17.9545 7.8295C18.3938 7.39017 19.1062 7.39017 19.5455 7.8295C19.9848 8.26884 19.9848 8.98116 19.5455 9.4205L12.7955 16.1705C12.3562 16.6098 11.6438 16.6098 11.2045 16.1705L4.4545 9.4205C4.01517 8.98116 4.01517 8.26884 4.4545 7.8295Z" fill="#2563EB"/>
							</svg>
						</span>
					</p>
				<p class="accordion-description">
					Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolor corrupti facilis doloremque voluptatum neque unde autem maiores quod at fugit, obcaecati, minus quos! Minus consectetur earum totam non facere. Assumenda alias doloribus quidem perferendis quam necessitatibus nisi hic, ratione possimus, sit reiciendis doloremque soluta natus sapiente, esse cupiditate eveniet.
		
				</p>
			</div>
			<div class="accordian">
				<p class="accordion-head">
					Nulla etiam vitae, at sagittis, nibh ultrices mattis feugiat faucibus?
					<span class="accordian-arrow">
						<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="M4.4545 7.8295C4.89384 7.39017 5.60616 7.39017 6.0455 7.8295L12 13.784L17.9545 7.8295C18.3938 7.39017 19.1062 7.39017 19.5455 7.8295C19.9848 8.26884 19.9848 8.98116 19.5455 9.4205L12.7955 16.1705C12.3562 16.6098 11.6438 16.6098 11.2045 16.1705L4.4545 9.4205C4.01517 8.98116 4.01517 8.26884 4.4545 7.8295Z" fill="#2563EB"/>
							</svg>
						</span>
					</p>
				<p class="accordion-description">
					Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolor corrupti facilis doloremque voluptatum neque unde autem maiores quod at fugit, obcaecati, minus quos! Minus consectetur earum totam non facere. Assumenda alias doloribus quidem perferendis quam necessitatibus nisi hic, ratione possimus, sit reiciendis doloremque soluta natus sapiente, esse cupiditate eveniet.
		
				</p>
			</div>
			<div class="accordian">
				<p class="accordion-head">
					Sagittis consectetur gravida nec turpis eros, id sit et, dictum?
					<span class="accordian-arrow">
						<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="M4.4545 7.8295C4.89384 7.39017 5.60616 7.39017 6.0455 7.8295L12 13.784L17.9545 7.8295C18.3938 7.39017 19.1062 7.39017 19.5455 7.8295C19.9848 8.26884 19.9848 8.98116 19.5455 9.4205L12.7955 16.1705C12.3562 16.6098 11.6438 16.6098 11.2045 16.1705L4.4545 9.4205C4.01517 8.98116 4.01517 8.26884 4.4545 7.8295Z" fill="#2563EB"/>
							</svg>
						</span>
					</p>
				<p class="accordion-description">
					Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolor corrupti facilis doloremque voluptatum neque unde autem maiores quod at fugit, obcaecati, minus quos! Minus consectetur earum totam non facere. Assumenda alias doloribus quidem perferendis quam necessitatibus nisi hic, ratione possimus, sit reiciendis doloremque soluta natus sapiente, esse cupiditate eveniet.
		
				</p>
			</div>
		</div>
	</section> -->
</main>
@if (!auth('user')->check())
@include('website.mobile.partials.modals.blogModal')
@endif
@endsection

@section('css')
	<link rel="stylesheet"  href="{{ asset('frontend') }}/assets-mobile/css/blog_mobile.css?v={{ env('ASSETS_VERSION')}}">
	<link defer rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx.5remJ6z57x0dw==" 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" />
	<!-- Slick CDn -->
    <!-- <link rel="stylesheet" type="text/css" href="{{ asset('frontend') }}/primary-theme/assets/css/blog.css"> -->
@endsection

@section('script')
<script src="{{asset('frontend')}}/assets-mobile/js/blog.js?v={{ env('ASSETS_VERSION')}}"></script>

<script>
	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('');
                    $('.pagination').empty();
                    $('.trending-blog-card').empty();
                    $('.trending-blog').empty();
                    if (res.blogCategory.data.length === 0) {
                        $('.trending-blog').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 = 
                                `<div class="trending-blog-card">
                                    <img class="blog-image" src="/${blog.image}" alt="Blog Image">
                                    <a href="/blog/${blog.category.url}/${blog.url}" class="blog-details">
                                        <p class="blog-category">
                                            ${blog.category.name}
                                        </p>
                                        <p class="blog-headline">
                                            ${blog.header_title}
                                        </p>
                                        <p class="blog-category">
                                            ${formatDate(blog.display_date)}
                                        </p>
                                    </a>
                                </div>`;
                                $('.trending-blog').append(blogHtml);
                                $('.blog-title').addClass('scrollToBlog');
                            }
                        
                        });                                    
                        $('.pagination').append(res.pagination_html);
                        $('.pagination').on('click', '.pagination a', function(e) {
                            e.preventDefault();
                            var url = $(e.target).attr("href");
                            pagination_category(url)
                        })
                        var triggerScroll = $('.blog-tabs').offset().top;
                        var triggerScroll = triggerScroll - 250; 
                        $('html, body').animate({scrollTop: triggerScroll}, 1000);
                    }
                }
            }
        });
    }

	$(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