@extends('bootstrap.layouts.appWithoutLogin')

@section('content')
    <div class="home-banner-two">
        <div class="d-tablee">
            <section class="section__blog">
                <div class="container-lg">
                    <div class="row g-10">
                        @foreach ($blogs as $blog)
                            <div class="col-md-4">
                                <div class="card-xl-stretch me-md-6">
                                    <a class="d-block bgi-no-repeat bgi-size-cover bgi-position-center card-rounded position-relative min-h-175px mb-5"
                                        alt="{{ $blog->post_title }}" href="/blog/{{ $blog->post_url }}">
                                        <img class="img-thumbnail" src="{{ asset('uploads/' . $blog->post_preview_image) }}" />
                                    </a>

                                    <div class="m-0">
                                        <a href="/blog/{{ $blog->post_url }}"
                                            class="fs-4 text-gray-900 fw-bold text-hover-primary text-gray-900 lh-base">
                                            {{ $blog->post_title }}
                                        </a>
                                        <div class="fs-6 fw-bold">
                                            <span class="text-muted">
                                                on Dec 29, 2021
                                            </span>
                                        </div>
                                        <div class="fw-semibold fs-5 text-gray-600 text-gray-900 my-4">
                                            {!! $blog->post_content_short !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="text-center mx-auto mt-10">
                        <ul class="pagination">
                            <!-- Previous Page Link -->
                            @if ($blogs->onFirstPage())
                                <li class="page-item previous disabled">
                                    <span class="page-link page-text mx-1">Previous</span>
                                </li>
                            @else
                                <li class="page-item previous">
                                    <a href="{{ $blogs->previousPageUrl() }}" class="page-link mx-1">Previous</a>
                                </li>
                            @endif

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

                            <!-- Next Page Link -->
                            @if ($blogs->hasMorePages())
                                <li class="page-item next">
                                    <a href="{{ $blogs->nextPageUrl() }}" class="page-link mx-1">Next</a>
                                </li>
                            @else
                                <li class="page-item next disabled">
                                    <span class="page-link page-text mx-1">Next</span>
                                </li>
                            @endif
                        </ul>

                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection