@extends('frontend.layouts.master')
@section('content')
<div class="section mt-0">
    <div class="breadcrumbs-wrap">
        <div class="container">
            <div class="breadcrumbs">
                <a href="{{ url('/') }}">Home</a>
                <span>{{ $page_name }}</span>
                <h2>Check Our All Blogs</h2>
            </div>
        </div>
    </div>
</div>

<div class="latest-news-area pt-70 pb-70 mt-6 mb-6">
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-12">
                @foreach ($blogs as $blog)
                    <div class="news-card" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200" data-aos-once="true">
                        <div class="row align-items-center">
                            <div class="col-lg-3 col-md-3">
                                <div class="news-img">
                                    <a href="{{ 'blog-details/' . $blog->id }}">
                                        <img src="{{ $blog->thumbnail }}" alt="{{ $blog->name }}">
                                    </a>
                                </div>
                            </div>
                            <div class="col-lg-9 col-md-9">
                                <div class="news-content">
                                    <a href="{{ 'blog-details/' . $blog->id }}" style="text-decoration: none;">
                                        <h3>{{ (session('locale')=='bn') ? $blog->bn_name : $blog->name }}</h3>
                                    </a>
                                    <i><i class="ri-calendar-2-line"></i> Published Date: {{ date('M d, Y', strtotime($blog->created_at)) }}</i><br>
                                    <a href="{{ 'blog-details/' . $blog->id }}"style="text-decoration: none;" class="read-more-btn">Read More <i class="flaticon-next"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="text-center">
            {!! $blogs->appends(Input::all())->render() !!}
        </div>
    </div>
</div>
<style>
    .latest-news-area {
        /* Add your desired styles here, e.g., background color, padding, etc. */
    }
    
    .news-card {
        border: 1px solid #ccc; /* Add a border for visual separation */
        border-radius: 5px; /* Add rounded corners */
        padding: 20px; /* Add padding for better spacing */
        margin-bottom: 20px; /* Add spacing between cards */
    }
    
    .news-img img {
        max-width: 100%; /* Ensure images don't exceed their container width */
        height: auto; /* Maintain aspect ratio */
    }
    
    .news-content {
        margin-left: 20px; /* Add spacing between image and content */
    }
    
    .news-content h3 {
        font-size: 18px; /* Adjust font size as needed */
        margin-bottom: 10px;
    }
    
    .read-more-btn {
        /* Add your desired styles for the "Read More" button */
        color: #007bff; /* Example: Blue color */
        text-decoration: underline;
    }
    </style>

@endsection