@extends('layouts.main-app')

@section('title', 'Blogs')

@section('content')

@include('layouts.navbar')

<div class="relative h-[25rem] w-full pt-[10rem]">
    <img class="absolute inset-0 object-cover object-bottom w-full h-full" src="{{ asset('images/blogs/bg-header.jpg') }}" alt="">
    <div class="container relative max-w-screen-xl mx-auto">
        <h1 class="text-4xl font-bold text-center text-[#ffd916]">Power Up Your Knowledge</h1>
    </div>
</div>
<div class="relative w-full h-full py-32 bg-[#595959]">
    <img class="absolute bottom-0 object-contain object-bottom w-full h-full" src="{{ asset('images/homepage/bg-home-2.png') }}" alt="">
    <div data-aos="fade-up" data-aos-duration="1000" class="container relative max-w-screen-xl px-4 mx-auto">
        <div class="flex flex-col items-center justify-center space-y-8">
            <div class="flex flex-col items-center">
                <h1 class="text-white">Charge Cycle Blog</h1>
                <h1 class="text-[#ffd916] text-2xl md:text-5xl font-bold text-center">Stay informed about the latest trends, tips, and news in the power bank industry.</h1>
            </div>
        </div>
        <div class="grid grid-cols-1 gap-12 my-20 md:grid-cols-2 lg:grid-cols-3">
            @foreach ($blogs as $blog)
            <div data-aos="zoom-in" data-aos-duration="1000">
                <div>
                    <img class="border-4 border-[#ffd916] rounded-full object-cover object-center w-full h-full md:h-[25rem] md:w-[35rem]" src="{{ asset($blog->image) }}" alt="">
                </div>
                <div class="flex justify-end -mt-40">
                    <div class="bg-[#ffd916] rounded-full p-8 h-[20rem] w-[20rem] flex justify-center align-center flex-col space-y-4">
                        <div>
                            <h1><strong>Blog | </strong>{{ $blog->created_at->format('d F Y') }}</h1>
                        </div>
                        <div>
                            <h1 class="font-bold">{{ $blog->title }}</h1>
                        </div>
                        <div class="flex justify-between">
                            <h1 class="font-bold">{{ $blog->user->name }}</h1>
                            <a href="{{ url('/blogs_details', $blog->id) }}">
                                <h1 class="text-red-600">Read More ></h1>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Custom Pagination -->
        <div data-aos="fade-up" data-aos-duration="1000" class="flex items-center justify-between">
            <div>
                @if ($blogs->onFirstPage())
                <button id="prev-button" disabled> <img src="{{ asset('images/homepage/btn-prev-default.png') }}" alt=""></button>
                @else
                <button id="prev-button" data-url="{{ $blogs->previousPageUrl() }}"> <img src="{{ asset('images/homepage/btn-prev-default.png') }}" alt=""></button>
                @endif
            </div>
            <div id="pagination" class="flex items-center gap-2">
                @foreach ($blogs->getUrlRange(1, $blogs->lastPage()) as $pageNumber => $url)
                <button class="h-12 w-12 {{ $blogs->currentPage() == $pageNumber ? 'bg-[#ffd916] text-[#01325a]' : 'bg-[#01325a] hover:bg-[#ffd916] hover:text-[#01325a]' }} text-white rounded-full" data-url="{{ $url }}">{{ $pageNumber }}</button>
                @endforeach
            </div>
            <div>
                @if ($blogs->hasMorePages())
                <button id="next-button" data-url="{{ $blogs->nextPageUrl() }}"><img src="{{ asset('images/homepage/btn-next-default.png') }}" alt=""></button>
                @else
                <button id="next-button" disabled><img src="{{ asset('images/homepage/btn-next-default.png') }}" alt=""></button>
                @endif
            </div>
        </div>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        const prevButton = document.getElementById('prev-button');
        const nextButton = document.getElementById('next-button');
        const paginationButtons = document.querySelectorAll('#pagination button');

        paginationButtons.forEach(button => {
            button.addEventListener('click', function() {
                const url = this.getAttribute('data-url');
                if (url) {
                    window.location.href = url;
                }
            });
        });

        if (prevButton && nextButton) {
            prevButton.addEventListener('click', function() {
                const url = this.getAttribute('data-url');
                if (url) {
                    window.location.href = url;
                }
            });

            nextButton.addEventListener('click', function() {
                const url = this.getAttribute('data-url');
                if (url) {
                    window.location.href = url;
                }
            });
        }
    });
</script>
@include('layouts.station')
@include('layouts.footer')

@endsection