@extends('front.app')

@section('content')
<section data-aos="fade-up" class="inner_banner">
	<img class="img-fluid w-100 d-none d-md-block" src="{{asset('front/images/blog_banner.webp')}}" alt="banner">
	<img class="img-fluid w-100 d-block d-md-none" src="{{asset('front/images/blog_mobbanner.webp')}}" alt="banner">
	<div class="innerbanner_text"></div>
	@include('front.banner_base')
</section>
<!--************************************* blog_details *************************************-->
<section class="blog_details">
	<div class="container">
		<div class="row">
			<div data-aos="fade-up" class="col-12 text-center blog_details_title">
				<h3 class="mb-2">Blogs</h3>
				<h1 class="mb-5">{{$blog->title}}</h1>
			</div>
		</div>
		<div class="row gx-sm-5 gx-0">
			<div data-aos="fade-up" class="col-xl-8 col-lg-7 col-12">
				<div class="w-100 float-start">
					<div class="position-relative">
						<img class="img-fluid w-100" src="{{asset('assets/images/'.$blog->photo)}}" alt="blogs">
					</div>
					<div class="w-100 float-start mt-4 blog_content">
						<div class="blog_date mb-3">{{ \Carbon\Carbon::parse($blog->created_at)->format('d-m-y') }}</div>
						{!!$blog->details!!}
					</div>
					<div class="w-100 float-start text-center back_btn">
						<a class="send_btn trs" href="{{route('front.blog')}}"><i class="fa-sharp fa-solid fa-arrow-left me-3"></i> Blogs</a>
					</div>
				</div>
			</div>
			<div data-aos="fade-up" class="col-xl-4 col-lg-5 col-12 mt-lg-0 mt-5">
				<div class="recent_blogs">
					<h3 class="text-lg-start text-md-center text-start mb-4">Recent Blogs</h3>
					<div class="row">


					@foreach($blogs as $blog)
						<div class="col-lg-12 col-md-6 col-12">
							<a class="row mb-2" href="{{route('front.blog.details',['slug' => $blog->slug ])}}">
								<div class="col-4"><img class="img-fluid" src="{{asset('assets/images/'.$blog->photo)}}" alt="blogs"></div>
								<div class="col-8"><h4 class="trs">{{$blog->short_description}}</h4></div>
							</a>
							<hr>
						</div>
					@endforeach	
						
						
					</div>
				</div>
			</div>
        </div>
	</div>
</section>
<!--************************************* footer *************************************-->
@endsection