@extends('frontend.layouts.app')
@section('meta_title', 'Blogs-Details')
@section('content')
<main class="pageMainLayout__wr blogPage__wr">
	<!-- <section class="innerPageBnrWrap__wr blogPageBnr__wr">
		<div class="container">
			<div class="contentWrap__wr">
				<h6 class="bannerTitle__wr">Blog</h6>
				<ol class="breadcrumbWrap__wr">
					<li><a href="index.php">Home</a></li>
					<li>Blog</li>
				</ol>
			</div>
		</div>
	</section> -->
<section class="stories_detail_sec">
	<div class="container">
		<div class="row">
			<div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
				<article class="article_item">
					<!-- <ul class="mtea_info">
						<li class="meta_category"><a href="javascript:void(0);"><i class="fa-solid fa-bookmark"></i><span>Relationships</span></a></li>
					</ul> -->
					<p class="title">{{$blog->title}}</p>
					<ul class="mtea_info">
						<li class="meta_date"><i class="fa-solid fa-calendar-days"></i><span>{{date('F d, Y', strtotime($blog->updated_at))}}</span></li>
					</ul>
					<picture class="item_figure">
						<img src="{{uploaded_asset($blog->banner)}}" loading="lazy" class="img-fluid" alt="" title="" width="" height="">
					</picture>
					<div class="item_content">
						<div class="post_content">
							{!! $blog->short_description !!}

							{!! $blog->description !!}
						</div>
						<foot class="author_wrap">
							<picture class="author_avtar">
								<img src="{{uploaded_asset($author->image)}}" loading="lazy" class="img-fluid" alt="" title="" width="120" height="120">
							</picture>
							<div class="author_info">
								<span>Written By</span>
								<p>{{$author->name}}</p>
							</div>
						</foot>
						<!-- <ul class="foot">
							<li class="meta_author"><i class="fa-solid fa-circle-user"></i><a href="javascript:void(0);">CTI</a></li>
							<li class="meta_date"><i class="fa-solid fa-calendar-days"></i><span>OCTOBER 12, 2022</span></li>
						</ul> -->
					</div>
				</article>
			</div>
			<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
				<aside class="sidebar">
					<section class="box_wrapper recent_wrap">
						<p class="sec_title">Most Recent</p>
						<ul class="post_list row">
							@if($recent_blogs->isNotEmpty())
								@foreach($recent_blogs as $recent_blog)
									<li class="col-xl-12 col-lg-12 col-md-6 col-sm-6 col-12">
										<a href="{{route('blog.details', $recent_blog->slug)}}">
											<picture class="item_figure">
											<img src="{{uploaded_asset($recent_blog->banner)}}" loading="lazy" class="img-fluid" alt="" title="" width="" height="">
											</picture>
											<div class="item_content">
												<p class="title">{{$recent_blog->title}}</p>
												<span class="meta_date"><i class="fa-solid fa-calendar-days"></i>{{date('F d, Y', strtotime($recent_blog->updated_at))}}</span>
											</div>
										</a>
									</li>
								@endforeach
							@endif
						</ul>
					</section>
					<section class="box_wrapper popular_wrap">
						<p class="sec_title">Most Popular</p>
						<ul class="post_list row">
							@if($most_populars->isNotEmpty())
								@foreach($most_populars as $most_popolar)
									<li><a href="{{route('blog.details', $most_popolar->slug)}}">{{$most_popolar->title}}</a></li>
								@endforeach
							@endif
						</ul>
					</section>
					<!-- <section class="box_wrapper form_block">
						<p class="sec_title">Join the Conversation</p>
						<form>
							<div class="form-row">
								<div class="col-xl-12 col-lg-12 col-md-6 col-sm-6 col-12">
									<div class="form-group">
										<label>Name<span>*</span></label>
										<input type="text" class="form-control" placeholder="Enter your name" autocomplete="off" required="">
									</div>
								</div>
								<div class="col-xl-12 col-lg-12 col-md-6 col-sm-6 col-12">
									<div class="form-group">
										<label>Email<span>*</span></label>
										<input type="text" class="form-control" placeholder="Enter your email address" autocomplete="off" required="">
									</div>
								</div>
								<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
									<div class="form-group">
										<label>Website<span>*</span></label>
										<input type="text" class="form-control" placeholder="Enter your URL" autocomplete="off" required="">
									</div>
								</div>
								<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
									<div class="form-group">
										<label>Your Comment<span>*</span></label>
										<textarea class="form-control" placeholder="Enter Your Comment" cols="45" rows="2"></textarea>
									</div>
								</div>
								<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
									<div class="form-group btnParent__wr">
										<button type="submit" class="btn btn__wr">Post Comment</button>
									</div>
								</div>
							</div>
						</form>
					</section> -->
				</aside>
			</div>
		</div>
		<!-- <nav class="pagination_wrapper">
			<ul class="pagination">
			<li class="page-item"><a class="page-link" href="javascript:void(0);" aria-label="Previous"><i class="fa-solid fa-chevron-left"></i>&nbsp;Newer Posts</a></li>
			<li class="page-item active"><a class="page-link" href="javascript:void(0);">01</a></li>
			<li class="page-item"><a class="page-link" href="javascript:void(0);">02</a></li>
			<li class="page-item"><a class="page-link" href="javascript:void(0);">03</a></li>
			<li class="page-item"><a class="page-link" href="javascript:void(0);">04</a></li>
			<li class="page-item"><a class="page-link" href="javascript:void(0);" aria-label="Next">Older Posts&nbsp;<i class="fa-solid fa-chevron-right"></i></a></li>
			</ul>
		</nav> -->
	</div>
</section>
		@endsection