@extends('frontEnd.layouts.master')
@section('title', 'Blog')
@section('content')
    <section class="blog-section py-5">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="common-title text-center mb-5">
                        <h2 class="py-2 px-4 shadow-sm" style="display:inline-block; border: 1px solid #eee; border-radius: 50px; background: #fff;">Our Blogs</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach ($blogs as $key => $value)
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                        <div class="card h-100 border-0 shadow-sm blog-card">
                            <div class="blog-image overflow-hidden" style="height: 250px;">
                                <a href="{{ route('blog_details', $value->slug) }}">
                                    <img src="{{ asset($value->image) }}" class="card-img-top w-100 h-100"
                                        alt="{{ $value->title }}" style="object-fit: cover;">
                                </a>
                            </div>
                            <div class="card-body p-4">
                                <p class="text-muted small mb-2"><i class="fa fa-calendar-alt me-2"></i>{{ $value->created_at->format('M d, Y') }}</p>
                                <h4 class="card-title fw-bold mb-3">
                                    <a href="{{ route('blog_details', $value->slug) }}" class="text-dark text-decoration-none hover-primary">
                                        {{ Str::limit($value->title, 50) }}
                                    </a>
                                </h4>
                                <div class="blog-description text-muted mb-4">
                                    {!! Str::limit(strip_tags($value->description), 100) !!}
                                </div>
                                <div class="mt-auto">
                                    <a href="{{ route('blog_details', $value->slug) }}" 
                                        class="btn btn-outline-dark rounded-pill px-4 py-2 transition-all hover-lift">
                                        Read More <i class="fa fa-arrow-right ms-2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection

@push('css')
    <style>
        .blog-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 20px;
            background: #fff;
            display: flex;
            flex-direction: column;
        }

        .blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
        }

        .blog-image img {
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .blog-card:hover .blog-image img {
            transform: scale(1.1);
        }

        .hover-primary:hover {
            color: #ff0000 !important; /* Adjust based on theme */
        }

        .hover-lift:hover {
            transform: translateY(-2px);
            background-color: #333 !important;
            color: #fff !important;
        }

        .transition-all {
            transition: all 0.3s ease;
        }

        .common-title h2 {
            font-family: 'Bebas', sans-serif;
            font-size: 2.5rem;
            color: #222;
        }

        @media (max-width: 768px) {
            .common-title h2 {
                font-size: 1.8rem;
            }
        }
    </style>
@endpush