@extends('front.layout.app')
@section('beforeHeadClose')
    <link href="{{ asset_storage('') . 'module/blog/front/css/blog.css' }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
    @php echo cms_edit_page("blog",$blog_post_details->id);@endphp

		<section class="page-title">
			<div class="container">
				<h1>Blog Detail</h1>
			</div>
		</section>

		<main id="main">
			<section class="blog-detail-section py-5">
				<div class="container">
					<div class="row g-4 g-xl-5">
						<div class="col-lg-8">
							<article class="blog-detail-content" data-aos="fade-up" data-aos-duration="1200">
								<div class="blog-detail-meta">May 07, 2026 <span>|</span> Interior Painting</div>
								<h2>{{ $blog_post_details->title }}</h2>
								 @if (
                                        !empty($blog_post_details->featured_img) &&
                                            file_exists(storage_uploads('blog/' . $blog_post_details->featured_img)))
                                        <img src="{{ asset_uploads('blog/' . $blog_post_details->featured_img) }}"
                                            title="{{ $blog_post_details->featured_img_title }}"
                                            alt="{{ $blog_post_details->featured_img_alt }}">
                                    @else
                                        <img src="{{ asset_uploads('back/images/no_image.jpg') }}"
                                            title="{{ $blog_post_details->featured_img_title }}"
                                            alt="{{ $blog_post_details->featured_img_alt }}">
                                    @endif
@php echo $blog_post_details->description @endphp
								
							</article>
						</div>

						<div class="col-lg-4">
							<aside class="blog-sidebar" data-aos="fade-left" data-aos-duration="1200">
								<div class="sidebar-widget">
									<h3>Search</h3>
									<!--<form method="GET" action="{{ base_url() . 'blog/search' }} class="sidebar-search">-->
									<!--	<input type="text" class="form-control" placeholder="Search articles..." name="s"-->
         <!--                                   value="{{ request()->get('s', '') }}>-->
									<!--	<button type="submit" value="search" id="blog_search_btn"><i class="fa-solid fa-magnifying-glass"></i></button>-->
									<!--</form>-->
										<form method="GET" action="{{ url('blog/search') }}" class="sidebar-search">
										<input type="text" class="form-control" placeholder="Search articles..." name="s" value="{{ request()->get('s', '') }}">
										<button type="submit" value="search" id="blog_search_btn"><i class="fa-solid fa-magnifying-glass"></i></button>
									</form>
								</div>           
                                    
								<div class="sidebar-widget">
									<h3>Categories</h3>
									<ul class="sidebar-links">
                                        @foreach ($blog_categories as $blog_catValues)
										<li>
											<a href="{{ url('blog/category/' . $blog_catValues->cate_slug) }}">
												{{ $blog_catValues->cate_title }} 
												<span>{{ $blog_catValues->post_count }}</span>
											</a>
										</li>
                                        @endforeach
									</ul>
								</div>

								<div class="sidebar-widget">
									<h3>Recent Posts</h3>
									<ul class="recent-post-list">
										@foreach ($recentPosts as $recentPost)
										<li>
											@if (!empty($recentPost->featured_img) && file_exists(storage_uploads('blog/' . $recentPost->featured_img)))
												<img src="{{ asset_uploads('blog/' . $recentPost->featured_img) }}" 
													 alt="{{ $recentPost->featured_img_alt ?? $recentPost->title }}">
											@else
												<img src="{{ asset_uploads('back/images/no_image.jpg') }}" 
													 alt="{{ $recentPost->title }}">
											@endif
											<div>
												<a href="{{ url('blog/' . $recentPost->post_slug) }}">{{ $recentPost->title }}</a>
												<span>{{ date('M d, Y', strtotime($recentPost->dated)) }}</span>
											</div>
										</li>
										@endforeach
									</ul>
								</div>
							</aside>
						</div>
					</div>
				</div>
			</section>
		</main>

@endsection