@extends('front.layout.app')
@section('beforeHeadClose')
    <link href="{{ asset_storage('') . 'module/blog/front/css/blog.css' }}" rel="stylesheet" type="text/css" />
    <style>
        /* Blog category filter styles - same as blog-filter */
        .blog-category-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        .blog-category-filter a {
            padding: 10px 20px;
            border-radius: 25px;
            background: #f5f5f5;
            color: #333;
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        .blog-category-filter a:hover,
        .blog-category-filter a.active {
            background: #ef5507;
            color: #fff;
        }
    </style>
@endsection
@section('content')
    @php echo cms_edit_page("blog");@endphp

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

		<main id="main">
			<section class="blog-listing-section py-5">
				<div class="container"> 

					<div class="blog-category-filter mb-4" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1200">
						<a href="{{ url('blog') }}" class="{{ request()->is('blog') && !request()->has('s') ? 'active' : '' }}">All</a>
                         @foreach ($blog_categories as $blog_catValues)
						<a href="{{ url('blog/category/' . $blog_catValues->cate_slug) }}" class="{{ request()->is('blog/category/' . $blog_catValues->cate_slug) ? 'active' : '' }}">{{ $blog_catValues->cate_title }}</a>
                        @endforeach
					</div>

					<div class="row g-4">
						@if (count($blogData) > 0)
							@foreach ($blogData as $blogsValues)
							@php
								// Get category names for this blog post
								$postCateIds = explode(',', $blogsValues->cate_ids);
								$postCategories = $blog_categories->whereIn('id', $postCateIds);
								$firstCategory = $postCategories->first();
								$categoryNames = $postCategories->pluck('cate_title')->implode(', ');
							@endphp
							<div class="col-md-6 col-xl-4 blog-card-item" data-category="{{ $firstCategory ? $firstCategory->cate_slug : 'uncategorized' }}" data-aos="fade-up" data-aos-duration="1200">
								<article class="blog-card">
									<a href="{{ url('blog/' . $blogsValues->post_slug) }}" class="blog-card-img">
										@if (!empty($blogsValues->featured_img) && file_exists(storage_uploads('blog/' . $blogsValues->featured_img)))
											<img src="{{ asset_uploads('blog/' . $blogsValues->featured_img) }}"
												title="{{ $blogsValues->featured_img_title }}"
												alt="{{ $blogsValues->featured_img_alt }}">
										@else
											<img src="{{ asset_uploads('back/images/no_image.jpg') }}"
												title="{{ $blogsValues->featured_img_title }}"
												alt="{{ $blogsValues->featured_img_alt }}">
										@endif
									</a>
									<div class="blog-card-body">
										<div class="blog-meta">{{ date('M d, Y', strtotime($blogsValues->dated)) }} @if($categoryNames)<span>|</span> {{ $categoryNames }}@endif</div>
										<h3><a href="{{ url('blog/' . $blogsValues->post_slug) }}">{{ $blogsValues->title }}</a></h3>
										<p>{!! substr(strip_tags($blogsValues->description), 0, 180) !!}...</p>
										<a href="{{ url('blog/' . $blogsValues->post_slug) }}" class="blog-read-more">Read More <i class="fa-solid fa-arrow-right"></i></a>
									</div>
								</article>
							</div>
							@endforeach
						@else
							<div class="col-12">
								<p style="text-align: center;">No Record Found</p>
							</div>
						@endif
					</div>

					@if($blogData->hasPages())
					<nav class="blog-pagination-wrap mt-5" aria-label="Blog page navigation" data-aos="fade-up" data-aos-duration="1200">
						<ul class="blog-pagination">
							{{-- Previous Page Link --}}
							@if ($blogData->onFirstPage())
								<li class="disabled"><span><i class="fa-solid fa-angle-left"></i></span></li>
							@else
								<li><a href="{{ $blogData->previousPageUrl() }}" aria-label="Previous page"><i class="fa-solid fa-angle-left"></i></a></li>
							@endif

							{{-- Pagination Elements --}}
							@foreach ($blogData->getUrlRange(1, $blogData->lastPage()) as $page => $url)
								@if ($page == $blogData->currentPage())
									<li><a href="#" class="active">{{ $page }}</a></li>
								@else
									<li><a href="{{ $url }}">{{ $page }}</a></li>
								@endif
							@endforeach

							{{-- Next Page Link --}}
							@if ($blogData->hasMorePages())
								<li><a href="{{ $blogData->nextPageUrl() }}" aria-label="Next page"><i class="fa-solid fa-angle-right"></i></a></li>
							@else
								<li class="disabled"><span><i class="fa-solid fa-angle-right"></i></span></li>
							@endif
						</ul>
					</nav>
					@endif
				</div>
			</section>
		</main>

@endsection