@extends('layouts.main-app')

@section('title','Home')

@section('content')

@include('layouts.navbar')
<div class="relative">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/blogs/banner.webp')}}" alt="">
    <div class="relative pb-32 pt-52 ">
        <h1 class="text-[#dab97d] text-6xl text-center">Blogs</h1>
    </div>
</div>

<div class="relative">
    <img class="absolute inset-0 w-full h-full" src="{{ asset('images/blogs/bg-body.webp') }}" alt="">
    <div class="container relative max-w-screen-lg px-4 py-20 mx-auto space-y-8">
        <div class="space-y-8">
            @foreach ($blogs as $blog)
            <div data-aos="zoom-in" data-aos-duration="1500">
                <a href="{{ url('blogs_details', $blog->id) }}">
                    <div class="space-y-4">
                        <img class="w-full h-full" src="{{ asset($blog->image) }}" alt="">
                        <div class="space-y-4">
                            <h1 class="text-[#dab97d]">{{ $blog->created_at->format('F d, Y') }}</h1>
                            <h2 class="text-4xl font-semibold text-white">{{ $blog->title }}</h2>
                            <div>
                                <a href="{{ url('blogs_details', $blog->id) }}" class="text-[#dab97d]">
                                    READ MORE <i class='bx bx-right-arrow-alt'></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="flex items-center justify-between my-4 space-x-8">
            <div>
                @if ($blogs->onFirstPage())
                <button id="prev-button" class="w-8 h-8 bg-[#7700ce] text-white rounded-full " disabled>
                    <i class='bx bx-chevron-left'></i>
                </button>
                @else
                <a href="{{ $blogs->previousPageUrl() }}">
                    <button id="prev-button" class="w-8 h-8 bg-[#7700ce] text-white rounded-full ">
                        <i class='bx bx-chevron-left'></i>
                    </button>
                </a>
                @endif
            </div>

            <div class="flex flex-wrap gap-2">
                @foreach ($blogs->getUrlRange(1, $blogs->lastPage()) as $page => $url)
                <a href="{{ $url }}">
                    <button class="w-8 h-8 text-sm bg-[#7700ce] text-white rounded-full {{ $page == $blogs->currentPage() ? 'bg-[#7700ce] text-white' : '' }}">
                        {{ $page }}
                    </button>
                </a>
                @endforeach
            </div>

            <div>
                @if ($blogs->hasMorePages())
                <a href="{{ $blogs->nextPageUrl() }}">
                    <button id="next-button" class="w-8 h-8  rounded-full bg-[#7700ce] text-white">
                        <i class='bx bx-chevron-right'></i>
                    </button>
                </a>
                @else
                <button id="next-button" class="w-8 h-8  rounded-full bg-[#7700ce] text-white" disabled>
                    <i class='bx bx-chevron-right'></i>
                </button>
                @endif
            </div>
        </div>
    </div>
</div>

@include('layouts.footer')

@endsection