@extends('frontend.layout.site')

@section('title', 'Our Blogs')

@section('content')
<!-- Blogs Start -->
<div class="container-fluid project py-5 mb-5">
    <div class="container">
        <!-- Section Header -->
        <div class="text-center mx-auto pb-5 wow fadeIn" data-wow-delay=".3s" style="max-width: 700px;">
            <h5 class="text-primary">Our Blog</h5>
            <h1>Latest Articles & Insights</h1>
        </div>

        <!-- Blogs Grid -->
        <div class="row g-5">
            @foreach($blogs as $blog)
            <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay=".{{ $loop->iteration * 2 }}s">
                <div class="project-item">
                    <div class="project-img">
                        @php
                            // Use storage path if you saved files via ->store(..., 'public').
                            // If you saved directly to public/uploads/, change to asset('uploads/' . $blog->featured_image)
                            $imgSrc = $blog->featured_image
                                ? asset('uploads/' . ltrim($blog->featured_image, '/'))
                                : asset('/csstemplate/assets/frontend/img/default-blog.jpg');
                        @endphp

                        <img src="{{ $imgSrc }}"
                             class="img-fluid w-100 rounded fixed-img"
                             alt="{{ $blog->title }}">

                        <div class="project-content">
                            <a href="{{ route('blogs.show', ['slug' => $blog->slug]) }}" class="text-center text-decoration-none">
                                @if($blog->category)
                                    <span class="badge bg-primary mb-2">{{ $blog->category->name }}</span>
                                @endif
                                <h4 class="text-secondary">{{ $blog->title }}</h4>
                                <p class="m-0 text-white">{{ Str::limit($blog->short_description, 100) }}</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="d-flex justify-content-center mt-5">
            {{ $blogs->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>
<!-- Blogs End -->
@endsection

@push('styles')
<style>
/* Fixed/cropped image for uniform card heights */
.project-img {
  position: relative;
  overflow: hidden;
  border-radius: .5rem; /* matches .rounded on the <img> element */
}

/* fixed-img controls the visible area and cropping */
.fixed-img {
  width: 100%;
  height: 400px;          /* desktop height */
  object-fit: cover;      /* crop preserving aspect ratio */
  object-position: center;
  display: block;
}

/* Slightly smaller images on medium screens */
@media (max-width: 992px) {
  .fixed-img { height: 200px; }
}

/* even smaller on phones */
@media (max-width: 576px) {
  .fixed-img { height: 160px; }
}

/* Ensure overlay content sits above the image */
.project-content{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  color: #fff;
  text-align: center;
}

/* Prevent card text links from inheriting underline */
.project-content a { color: inherit; }
.project-content a:hover { text-decoration: none; }
</style>
@endpush