@extends('frontend.layout.app')

@section('content')
    <!-- Top Breadcrumb -->
    <div class="breadcumb-wrapper" data-bg-src="{{ asset('frontend/assets/img/breadcumb/breadcumb-bg.jpg') }}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Blog</h1>
                <div class="breadcumb-menu-wrap">
                    <ul class="breadcumb-menu">
                        <li><a href="">Home</a></li>
                        <li>Blog</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Top Breadcrumb End -->

    <!-- Blog List Content -->
    <div class="services-page-area" style="padding-top: 60px; padding-bottom: 40px; background-color: #f8fafc;">
        <section class="service-item-area">
            <div class="container">
                <div class="row gy-4">
                    <!-- Blog Card 1 -->
                    @forelse($blogs as $blog)
                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="card shadow-sm border-0 h-100 blog-card-custom">
                                <div class="position-relative overflow-hidden" style="border-radius: 12px 12px 0 0;">
                                    <a href="{{ route('blogdetails', $blog->slug) }}">
                                        <img 
                                            style="width:100%; height:240px; object-fit:cover; border-radius: 12px 12px 0 0; transition: transform 0.3s;"
                                            src="{{ $blog->image ? asset('storage/blog/' . $blog->image) : asset('frontend/assets/img/no-image.png') }}"
                                            alt="{{ $blog->image_alt ?? $blog->title }}"
                                            class="blog-card-img">
                                    </a>
                        
                                </div>
                                <div class="card-body d-flex flex-column" style="background: #fff; border-radius: 0 0 12px 12px;">
                                    <div class="service-title mb-2">
                                        <a href="{{ route('blogdetails', $blog->slug) }}" class="text-decoration-none text-dark">
                                            <h4 class="mb-1 fw-semibold">{{ $blog->title }}</h4>
                                        </a>
                                    </div>
                                    <div class="mb-3 text-muted" style="font-size: 0.98rem;">
                                        <p>
                                            {{ \Illuminate\Support\Str::limit(strip_tags($blog->content), 80) }}
                                        </p>
                                    </div>
                                    <div class="mt-auto d-flex align-items-center justify-content-between">
                                        <span class="text-secondary" style="font-size: 0.92rem;">
                                            <i class="far fa-calendar-alt"></i> {{ \Illuminate\Support\Carbon::parse($blog->created_at)->format('F d, Y') }}
                                        </span>
                                        <a class="btn btn-primary btn-sm rounded-pill px-3" href="{{ route('blogdetails', $blog->slug) }}">Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12 text-center text-muted">
                            No blogs found.
                        </div>
                    @endforelse
                </div>
            </div>
        </section>
    </div>

    <style>
        .blog-card-custom:hover .blog-card-img {
            transform: scale(1.07);
        }
        .blog-card-custom { transition: box-shadow 0.3s; }
        .blog-card-custom:hover { box-shadow: 0 8px 32px 0 rgba(60,72,88,.12); }
    </style>
@endsection