@extends('layouts.master')
@section('content')

    <!-- Page Header Section Start -->
    <div class="page-header parallaxie">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- Page Header Box Start -->
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">Our Blog</h1>
                        <nav class="wow fadeInUp" >
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route('home')}}">home</a></li>
                                <li class="breadcrumb-item">/</li>
                                <li class="breadcrumb-item active" aria-current="page">Our Blog</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Section End -->

    <!-- Page Blog Start -->
    <div class="page-blog">
        <div class="container">
            <div class="row">
                @foreach($blogs as $blog)
                    <div class="col-xl-4 col-md-6">
                        <div class="post-item wow fadeInUp">

                            <div class="post-featured-image">
                                <a href="{{route('blog_detail',$blog->slug)}}" data-cursor-text="View">
                                    <figure class="image-anime">
                                        <img src="{{ asset('storage/blogs/' . $blog->image) }}" alt="{{ $blog->title }}">
                                    </figure>
                                </a>
                            </div>

                            <div class="post-item-body">
                                <div class="post-item-content">
                                    <h2>
                                        <a href="{{route('blog_detail',$blog->slug)}}">
                                            {{ $blog->title }}
                                        </a>
                                    </h2>
                                </div>

                                <div class="post-item-btn">
                                    <a href="{{route('blog_detail',$blog->slug)}}" class="readmore-btn">
                                        Learn More
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                @endforeach
                    <div class="col-lg-12">
                        <div class="page-pagination wow fadeInUp" data-wow-delay="0.4s">
                            <ul class="pagination">

                                {{-- Previous --}}
                                <li class="{{ $blogs->onFirstPage() ? 'disabled' : '' }}">
                                    <a href="{{ $blogs->previousPageUrl() }}">
                                        <i class="fa-solid fa-angle-left"></i>
                                    </a>
                                </li>

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

                                {{-- Next --}}
                                <li class="{{ !$blogs->hasMorePages() ? 'disabled' : '' }}">
                                    <a href="{{ $blogs->nextPageUrl() }}">
                                        <i class="fa-solid fa-angle-right"></i>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
            </div>
        </div>
    </div>
    <!-- Page Blog End -->


@endsection