@extends('front.layout.app')
@section('beforeHeadClose')
   <style>
    .pagination .page-link {
    color: #54b948; /* Green text */
    border-color: #54b948;
}

.pagination .page-link:hover {
    color: #fff;
    background-color: #54b948;
    border-color: #54b948;
}

.pagination .page-item.active .page-link {
    color: #fff;
    background-color: #54b948;
    border-color: #54b948;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
}
    </style>
@endsection

@section('content')
   <!-- Page title start -->
		<div class="secr-slider_wrapper pagetitle" style="background: url({{ asset_storage('front/images/blog-page-bg.jpg') }} ) no-repeat top;">
			<div class="slider-wrap slider-wrap-custom">
				<div class="container h-100 position-relative d-flex flex-column justify-content-center">
					<div class="row">
						<div class="col-lg-10 slider-text-col" data-aos="fade-up" data-aos-duration="1000">

							   @php  echo adjustUrl($blog->content) @endphp

						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- Page title end -->

		<main id="main">
			<!-- blog Content -->
			<section class="blog-page-section pagecontent">
				<div class="container">

					<div class="row g-4 justify-content-center">

    @forelse ($blogData as $blog)

        <div class="col-lg-4 col-md-6 col-sm-12"
            data-aos="fade-up"
            data-aos-delay="{{ (($loop->iteration - 1) % 3 + 1) * 100 }}">

            <div class="industry-card h-100 bg-white overflow-hidden">

                <a href="{{ base_url() . 'blog/' . $blog['post_slug'] }}">

                    <div class="industry-img-wrapper overflow-hidden position-relative">

                        <div class="blog-date">
                            {{ date('F d, Y', strtotime($blog['dated'])) }}
                        </div>

                        @if (!empty($blog['featured_img']) && file_exists(storage_uploads('blog/' . $blog['featured_img'])))
                            <img src="{{ asset_uploads('blog/' . $blog['featured_img']) }}"
                                title="{{ $blog['featured_img_title'] }}"
                                alt="{{ $blog['featured_img_alt'] }}"
                                class="img-fluid w-100 industry-img transition-all">
                        @else
                            <img src="{{ asset_uploads('back/images/no_image.jpg') }}"
                                class="img-fluid w-100 industry-img transition-all"
                                alt="No Image">
                        @endif

                    </div>

                    <div class="industry-content text-center">

                        <h2 class="sub-heading mb-3">
                            {{ $blog['title'] }}
                        </h2>

                        <p>
                            {{ \Illuminate\Support\Str::limit(strip_tags($blog['description']), 140) }}
                        </p>

                    </div>

                </a>

            </div>

        </div>

    @empty

        <div class="col-12 text-center">
            <p>No Record Found</p>
        </div>

    @endforelse

</div>

@if($blogData instanceof \Illuminate\Pagination\LengthAwarePaginator && $blogData->hasPages())
    <div class="row mt-5">
        <div class="col-12 d-flex justify-content-center" data-aos="fade-up">
            {{ $blogData->links() }}
        </div>
    </div>
@endif

				</div>
			</section>

		</main>

@endsection