@extends('frontend.layouts.app')
@section('content')
    <!-- Breadcrumb -->
    <div class="breadcrumb-bar breadcrumb-bg text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <h2 class="breadcrumb-title mb-2">Our Blogs</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center mb-0">
                            <li class="breadcrumb-item"><a href="{{ route('index') }}"><i class="isax isax-home5"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">Our Blogs</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- /Breadcrumb -->

    <!-- Blog Section -->
    <section class="section blog-section">
        <div class="container">
            <div class="row g-4 justify-content-center">

                <!-- Blog Item-->
                @foreach ($blogs as $data)
                    <div class="col-lg-4 col-md-6 d-flex">
                        <div class="blog-item blog-wrap flex-fill wow fadeInUp" data-wow-delay="0.2s">
                            <a href="{{ route('blogDetail', $data->slug) }}" class="blog-img">
                                <img src="{{ asset('backend/assets/images/blog/' . $data->image) }}"
                                    onerror="this.onerror=null;this.src='{{ asset('frontend/assets/img/img-not-found.png') }}';"
                                    alt="{{ $data->title }}">
                            </a>
                            <div class="blog-content">
                                <div class="d-flex align-items-center border-bottom justify-content-between mb-2">
                                    <a href="javascript:void(0);" class="d-flex align-items-center mb-2">
                                        <span class="avatar avatar-md flex-shrink-0 me-2">
                                            <img src="{{ asset('frontend/assets/img/users/user-01.jpg') }}" alt="img"
                                                class="rounded-circle">
                                        </span>
                                        <p class="fs-14">{{ config('app.name') }}</p>
                                    </a>
                                    <p class="fs-13 fw-medium d-flex align-items-center mb-2"><i
                                            class="isax isax-calendar-1 text-gray-9 fs-20 me-2"></i>{{ date('d F Y', strtotime($data->created_at)) }}
                                    </p>
                                </div>
                                <h5><a href="{{ route('blogDetail', $data->slug) }}">{{ $data->title }}</a></h5>
                                <p class="mt-2 text-truncate line-clamb-3">{{ $data->short_description }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
                <!-- /Blog Item-->

                <!-- Pagination -->
                <nav class="pagination-nav">
                    <ul class="pagination justify-content-center">
                        <!-- Previous Page Link -->
                        @if ($blogs->onFirstPage())
                            <li class="page-item disabled">
                                <a class="page-link" href="javascript:void(0);" aria-label="Previous">
                                    <span aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span>
                                </a>
                            </li>
                        @else
                            <li class="page-item">
                                <a class="page-link" href="{{ $blogs->previousPageUrl() }}" aria-label="Previous">
                                    <span aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span>
                                </a>
                            </li>
                        @endif

                        <!-- Page Number Links -->
                        @foreach ($blogs->getUrlRange(1, $blogs->lastPage()) as $page => $url)
                            <li class="page-item {{ $page == $blogs->currentPage() ? 'active' : '' }}">
                                <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                            </li>
                        @endforeach

                        <!-- Next Page Link -->
                        @if ($blogs->hasMorePages())
                            <li class="page-item">
                                <a class="page-link" href="{{ $blogs->nextPageUrl() }}" aria-label="Next">
                                    <span aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
                                </a>
                            </li>
                        @else
                            <li class="page-item disabled">
                                <a class="page-link" href="javascript:void(0);" aria-label="Next">
                                    <span aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
                                </a>
                            </li>
                        @endif
                    </ul>
                </nav>
                <!-- /Pagination -->

            </div>
        </div>
    </section>
    <!-- /Blog Section -->
@endsection