@extends('frontend.layouts.main')
@section('main-container')
<section class="product-about-section">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="product-about-block">
                    <div class="product-about-block-inner">
                        <h1 class="product-about-block-title m-0"> Blog </h1>
                        <div class="breadcrumb-div">
                            <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
                                <ol class="breadcrumb m-0 justify-content-center">
                                    <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}"
                                            class="breadcrumb-item-link fs-5">Home</a></li>
                                    <li class="breadcrumb-item active fs-5" aria-current="page">Blog</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="main_blog_section section-block">
    <div class="container">
        <div class="row">
            @foreach($blogs as $blog)
            <div class="col-md-4 mb-md-4 mb-3">
                <div class="blog_box">
                    <div class="blog_img blog-new-img">
                        <img src="{{ asset($blog->thumbnail) }}"
                            class="img-fluid">
                    </div>
                    <div class="blog_content pt-3">
                        <h4 class="blog_title category_title">
                            <a href="{{ route('frontend.blog-detail.index', $blog->slug) }}" class="blog_link">  {{ $blog->title }}</a>
                        </h4>
                        <p class="panel_title_new m-0">{{ $blog->short_description }}</p>
                        <div class="blog_person d-flex justify-content-between">
                            <div class="d-flex align-items-center">
                                <div class="blog_person_img my-2">
                                    <img src="{{ asset($blog->author_image) }}"
                                        class="img-fluid">
                                </div>
                                <h5 class="about-span text-dark ps-3"> {{ $blog->author_name }}</h5>
                            </div>
                            <h5 class="panel_title"> {{ Carbon\Carbon::parse($blog->created_at)->format('F d Y') }}</h5>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="row">
            <div class="col-md-12">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                            @if ($blogs->currentPage() > 1)
                                <li class="page-item">
                                    <a class="page-link"
                                        href="{{ url()->current() }}?page={{ $blogs->currentPage() - 1 }}"
                                        rel="prev" aria-label="Previous">&laquo; Previous</a>
                                </li>
                            @endif

                            @for ($i = max(1, $blogs->currentPage() - 2); $i <= min($blogs->currentPage() + 2, $blogs->lastPage()); $i++)
                                <li class="page-item {{ $i == $blogs->currentPage() ? 'active' : '' }}">
                                    <a class="page-link"
                                        href="{{ $blogs->url($i) }}">{{ $i }}</a>
                                </li>
                            @endfor

                            @if ($blogs->currentPage() < $blogs->lastPage())
                                <li class="page-item">
                                    <a class="page-link"
                                        href="{{ url()->current() }}?page={{ $blogs->currentPage() + 1 }}"
                                        rel="next" aria-label="Next">Next &raquo;</a>
                                </li>
                            @endif
                        </ul>
                </nav>
            </div>
        </div>
    </div>
</section>
@endsection