@extends('frontend.layouts.layouts')

@section('content')
    <div class="relative min-h-screen bg-center bg-cover"
        style="background-image: url('{{ asset('img/about_us/bg-1 (1).jpg') }}');">

        <div class="relative z-0">
            <img src="{{ asset('img/blogs/img-banner-header.png') }}" class="absolute object-cover w-full h-full "
                alt="Flowbite Logo">
            <div class="relative inset-0 z-50 flex items-center justify-center py-32">
                <style>
                    .marcellus-font {
                        font-family: 'Marcellus', serif;
                    }

                    .cursive-font {
                        font-family: 'Brush Script MT', 'Comic Sans MS', 'Segoe Script', 'Lucida Handwriting', cursive;
                    }
                </style>
                <div>
                    <h1
                        class="p-4 text-xl text-center text-white sm:text-3xl md:text-5xl lg:text-6xl xl:text-7xl marcellus-font">
                        Blogs
                    </h1>
                </div>

            </div>

        </div>










        <div class="container p-10 mx-auto mt-10 " style="font-family: 'Poppins', sans-serif;">
            <div class="py-10">
                <div class="m-2 text-3xl text-center"> Our Stories</div>
                <div class="text-center">
                    <p>Stay inform, inspired, and connected with our latest updates, tips, and stories. Our blog is your
                        go-to resource for expert advice an home care, personal care, beauty, health, and wellness. Whether
                        you're looking for cleaning hacks, skincare routines, or insights into substainable living, we have
                        something for everyone.</p>
                </div>
            </div>


            <div id="myCarousel" class="px-4 mt-10 splide md:px-16" aria-label="Splide Carousel">
                <div class="splide__track">
                    <ul class="splide__list">
                        @foreach ($testimoialss as $testimoialss)
                            <li class="splide__slide">
                                <div
                                    class="flex flex-col items-center justify-center text-center bg-gray-200 rounded-lg h-96">
                                    <img src="{{ asset($testimoialss->picture) }}" class="">
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>

            </div>

            <!-- Include Splide JS -->


            <hr class="my-4 border-t border-gray-300">

            <div id="myCarousel1" class="px-4 mt-10 splide md:px-16" aria-label="Splide Carousel ">
                <div class="splide__track">
                    <ul class="splide__list">
                        @foreach ($testimony as $testimony)
                            <li class="splide__slide">

                                <div class="flex flex-col items-center justify-center text-center rounded-md h-80">
                                    <p class="text-xl">"{{ $testimony->testimony }}"</p>
                                </div>
                                <div class="flex flex-col items-center justify-center md:flex-row -mt-28">
                                    <img src="{{ asset($testimony->picture) }}"
                                        class="w-24 h-24 m-10 border-8 border-gray-300 rounded-full" alt="Flowbite Logo">
                                    <div class="w-24 pl-2 -ml-5 ">
                                        <p class="font-bold tex-xl">{{ $testimony->customer_name }}.</p>
                                        <p class="block ">Customer</p>
                                    </div>
                                </div>

                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>






            <hr class="my-4 border-t border-gray-300">




            <form action="{{ url('blogs') }}" method="GET" id="filterForm"
                class="flex flex-col items-center justify-center gap-10 my-10 md:flex-row">
                <!-- Hidden input to hold the selected category -->
                <input type="hidden" name="category" id="selected-category" value="{{ request('category') }}">
                <input type="hidden" name="filter_applied" id="filter_applied" value="">

                <!-- Category Links as Buttons -->
                <button type="button" onclick="applyFilter('');" class="text-black hover:text-blue-800" id="blogSection">
                    All Categories
                </button>

                @foreach ($categories as $category)
                    <button type="button" onclick="applyFilter('{{ $category->category }}');"
                        class="text-black hover:text-blue-800">
                        {{ $category->category }}
                    </button>
                @endforeach
            </form>

            <div class="grid grid-cols-1 gap-8 my-10 md:grid-cols-2 lg:grid-cols-3">
                @foreach ($blogs as $blog)
                    <div>
                        <a href="{{ url('blogscategories/' . $blog->id) }}">
                            <div class="relative">
                                <img src="{{ asset($blog->picture) }}" class="object-cover w-full h-64"
                                    alt="{{ $blog->title }}">
                                <div
                                    class="absolute inset-0 z-0 flex items-end justify-end duration-300 bg-black bg-opacity-10 hover:bg-opacity-60">
                                    <div class="w-16 h-16 p-2 m-2 text-sm text-center text-white bg-blue-800 rounded-full">
                                        <p class="font-bold">{{ $blog->created_at->format('d') }}</p>
                                        <p>{{ $blog->created_at->format('M') }}</p>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <div class="p-5">
                            <p>
                                <span class="text-sm text-gray-400">By Admin</span> |
                                <span class="text-blue-600 text-md">{{ $blog->category }}</span>
                            </p>
                            <p class="mb-2 font-semibold">{{ $blog->title }}</p>
                            <a href="{{ url('blogscategories/' . $blog->id) }}"
                                class="text-sm font-bold text-blue-600 hover:text-blue-800">
                                Read More →
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>

            <script>
                // Function to apply the filter and set the flag
                function applyFilter(category) {
                    document.getElementById('selected-category').value = category;
                    document.getElementById('filter_applied').value = 'true';
                    document.getElementById('filterForm').submit();
                }

                // On page load, check if filter was applied and scroll to blog section
                window.onload = function() {
                    const urlParams = new URLSearchParams(window.location.search);
                    const filterApplied = urlParams.get('filter_applied');
                    if (filterApplied) {
                        const blogSection = document.getElementById('blogSection');
                        blogSection.scrollIntoView({
                            behavior: 'smooth'
                        });
                    }
                }
            </script>


            <div class="flex justify-center my-10">
                <nav aria-label="Pagination">
                    <ul class="inline-flex items-center space-x-1">
                        <!-- Previous Page Button -->
                        @if ($blogs->onFirstPage())
                            <li>
                                <span class="px-4 py-4 text-gray-400 bg-white rounded-full shadow-xl">
                                    &lt;-
                                </span>
                            </li>
                        @else
                            <li>
                                <a href="{{ $blogs->previousPageUrl() }}"
                                    class="px-4 py-4 text-blue-700 bg-white rounded-full shadow-xl hover:bg-gray-300">
                                    &lt;-
                                </a>
                            </li>
                        @endif

                        <!-- Page Number Buttons -->
                        @foreach ($blogs->onEachSide(1)->links()->elements[0] as $page => $url)
                            @if (is_numeric($page))
                                <li>
                                    <a href="{{ $url }}"
                                        class="px-4 py-2 rounded-full {{ $blogs->currentPage() == $page ? 'text-white bg-blue-600' : 'hover:bg-blue-100' }}">
                                        {{ $page }}
                                    </a>
                                </li>
                            @elseif ($page == '...')
                                <li>
                                    <span class="px-4 py-2 text-gray-600 rounded-full">{{ $page }}</span>
                                </li>
                            @endif
                        @endforeach

                        <!-- Next Page Button -->
                        @if ($blogs->hasMorePages())
                            <li>
                                <a href="{{ $blogs->nextPageUrl() }}"
                                    class="px-4 py-2 text-blue-700 bg-white rounded-full shadow-xl hover:bg-gray-300">
                                    -&gt;
                                </a>
                            </li>
                        @else
                            <li>
                                <span class="px-4 py-4 text-gray-400 bg-white rounded-full shadow-xl">
                                    -&gt;

                                </span>
                            </li>
                        @endif
                    </ul>
                </nav>
            </div>

        </div>




        {{-- <div>
                    <div class="relative ">
                        <img src="{{ asset('img/blogs/img-blog-2.png') }}" class="object-cover w-full h-64"
                            alt="Flowbite Logo">

                        <div
                            class="absolute inset-0 z-0 flex items-end justify-end duration-300 bg-black bg-opacity-10 hover:bg-opacity-60">
                            <div class="w-16 h-16 p-2 m-2 text-sm text-center text-white bg-blue-800 rounded-full ">
                                <p class="font-bold "> 18</p>
                                <p class="">feb</p>
                            </div>

                        </div>
                    </div>
                    <div class="p-5">
                        <p class=""><span class="text-sm text-gray-400">By Admin </span>|<span
                                class="text-blue-600 text-md ">Beauty
                            </span> </p>
                        <p class="mb-2 font-semibold">Essential Skincare Routine for Radiant Skin</p>
                        <a href="{{ url('blogscategories') }}" class="text-sm font-bold hover:text-blue-800"> Read More
                            -></a>
                    </div>
                </div>
                <div>
                    <div class="relative ">
                        <img src="{{ asset('img/blogs/img-blog-3.png') }}" class="object-cover w-full h-64"
                            alt="Flowbite Logo">
                        <div
                            class="absolute inset-0 z-0 flex items-end justify-end duration-300 bg-black bg-opacity-10 hover:bg-opacity-60">
                            <div class="w-16 h-16 p-2 m-2 text-sm text-center text-white bg-blue-800 rounded-full ">
                                <p class="font-bold "> 18</p>
                                <p class="">feb</p>
                            </div>

                        </div>

                    </div>
                    <div class="p-5">
                        <p class=""><span class="text-sm text-gray-400">By Admin </span>|<span
                                class="text-blue-600 text-md ">Health and Wellness</span> </p>
                        <p class="mb-2 font-semibold">Boost Your Wellness with Essential Oils</p>
                        <a href="{{ url('blogscategories') }}" class="text-sm font-bold hover:text-blue-800"> Read More
                            -></a>
                    </div>
                </div>
                <div>
                    <div class="relative ">
                        <img src="{{ asset('img/blogs/img-blog-4.png') }}" class="object-cover w-full h-64"
                            alt="Flowbite Logo">
                        <div
                            class="absolute inset-0 z-0 flex items-end justify-end duration-300 bg-black bg-opacity-10 hover:bg-opacity-60">
                            <div class="w-16 h-16 p-2 m-2 text-sm text-center text-white bg-blue-800 rounded-full ">
                                <p class="font-bold "> 18</p>
                                <p class="">feb</p>
                            </div>

                        </div>
                    </div>
                    <div class="p-5">
                        <p class=""><span class="text-sm text-gray-400">By Admin </span>|<span
                                class="text-blue-600 text-md ">Home
                                Care</span> </p>
                        <p class="mb-2 font-semibold">Quick and Easy Cleaning hacks for Busy Lives</p>
                        <a href="{{ url('blogscategories') }}" class="text-sm font-bold hover:text-blue-800"> Read More
                            -></a>
                    </div>
                </div>
                <div>
                    <div class="relative ">
                        <img src="{{ asset('img/blogs/img-blog-5.png') }}" class="object-cover w-full h-64"
                            alt="Flowbite Logo">

                        <div
                            class="absolute inset-0 z-0 flex items-end justify-end duration-300 bg-black bg-opacity-10 hover:bg-opacity-60">
                            <div class="w-16 h-16 p-2 m-2 text-sm text-center text-white bg-blue-800 rounded-full ">
                                <p class="font-bold "> 18</p>
                                <p class="">feb</p>
                            </div>

                        </div>
                    </div>
                    <div class="p-5">
                        <p class=""><span class="text-sm text-gray-400">By Admin </span>|<span
                                class="text-blue-600 text-md ">Home
                                Care</span> </p>
                        <p class="mb-2 font-semibold">Eco-Friendly Solutions for a Greener Home</p>
                        <a href="{{ url('blogscategories') }}" class="text-sm font-bold hover:text-blue-800"> Read More
                            -></a>
                    </div>
                </div>
                <div>
                    <div class="relative ">
                        <img src="{{ asset('img/blogs/img-blog-6.png') }}" class="object-cover w-full h-64"
                            alt="Flowbite Logo">
                        <div
                            class="absolute inset-0 z-0 flex items-end justify-end duration-300 bg-black bg-opacity-10 hover:bg-opacity-60">
                            <div class="w-16 h-16 p-2 m-2 text-sm text-center text-white bg-blue-800 rounded-full ">
                                <p class="font-bold "> 18</p>
                                <p class="">feb</p>
                            </div>

                        </div>
                    </div>
                    <div class="p-5">
                        <p class=""><span class="text-sm text-gray-400">By Admin </span>|<span
                                class="text-blue-600 text-md ">Beauty
                            </span> </p>
                        <p class="mb-2 font-semibold">Self-Care Essentials: Pamper Yourself with Our Rop Picks</p>
                        <a href="{{ url('blogscategories') }}" class="text-sm font-bold hover:text-blue-800"> Read More
                            -></a>
                    </div>
                </div>
                <div>
                    <div class="relative ">
                        <img src="{{ asset('img/blogs/img-blog-7.png') }}" class="object-cover w-full h-64"
                            alt="Flowbite Logo">
                        <div
                            class="absolute inset-0 z-0 flex items-end justify-end duration-300 bg-black bg-opacity-10 hover:bg-opacity-60">
                            <div class="w-16 h-16 p-2 m-2 text-sm text-center text-white bg-blue-800 rounded-full ">
                                <p class="font-bold "> 18</p>
                                <p class="">feb</p>
                            </div>

                        </div>
                    </div>
                    <div class="p-5">
                        <p class=""><span class="text-sm text-gray-400">By Admin </span>|<span
                                class="text-blue-600 text-md ">Beauty
                            </span> </p>
                        <p class="mb-2 font-semibold ">Transform Youe Skin: The Best Beauty Products for Every Skin Type
                        </p>
                        <a href="{{ url('blogscategories') }}" class="text-sm font-bold hover:text-blue-800"> Read More
                            -></a>
                    </div>
                </div>
                <div>
                    <div class="relative ">
                        <img src="{{ asset('img/blogs/img-blog-8.png') }}" class="object-cover w-full h-64"
                            alt="Flowbite Logo">
                        <div
                            class="absolute inset-0 z-0 flex items-end justify-end duration-300 bg-black bg-opacity-10 hover:bg-opacity-60">
                            <div class="w-16 h-16 p-2 m-2 text-sm text-center text-white bg-blue-800 rounded-full ">
                                <p class="font-bold "> 18</p>
                                <p class="">feb</p>
                            </div>

                        </div>
                    </div>
                    <div class="p-5">
                        <p class=""><span class="text-sm text-gray-400">By Admin </span>|<span
                                class="text-blue-600 text-md ">Beauty
                            </span> </p>
                        <p class="mb-2 font-semibold">Tips for a Good Night's Sleep</p>
                        <a href="{{ url('blogscategories') }}" class="text-sm font-bold hover:text-blue-800"> Read More
                            -></a>
                    </div>
                </div>
                <div>
                    <div class="relative ">
                        <img src="{{ asset('img/blogs/img-blog-9.png') }}" class="object-cover w-full h-64"
                            alt="Flowbite Logo">
                        <div
                            class="absolute inset-0 z-0 flex items-end justify-end duration-300 bg-black bg-opacity-10 hover:bg-opacity-60">
                            <div class="w-16 h-16 p-2 m-2 text-sm text-center text-white bg-blue-800 rounded-full ">
                                <p class="font-bold "> 18</p>
                                <p class="">feb</p>
                            </div>

                        </div>
                    </div>
                    <div class="p-5">
                        <p class=""><span class="text-sm text-gray-400">By Admin </span>|<span
                                class="text-blue-600 text-md ">Home
                                Care</span> </p>
                        <p class="mb-2 font-semibold">Budget-Friendly Home Decor Ideas</p>
                        <a href="{{ url('blogscategories') }}" class="text-sm font-bold hover:text-blue-800"> Read More
                            -></a>
                    </div>
                </div>
            </div> --}}




        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var splide = new Splide('#myCarousel1', {
                    type: 'loop',
                    perPage: 2,
                    gap: '1rem',
                    pagination: true, // Ensure pagination is enabled
                    arrows: false, // Disable arrows
                    breakpoints: {
                        768: {
                            perPage: 1,
                            gap: '0.5rem',
                        },
                        1024: {
                            perPage: 2,
                            gap: '1rem',
                        }
                    }
                });

                splide.mount();

                // Add an ID to the pagination dots container
                document.querySelector('.splide__pagination').id = 'custom-pagination-id';
            });
        </script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var splide = new Splide('#myCarousel', {
                    type: 'loop',
                    perPage: 2,
                    gap: '1rem',
                    pagination: true, // Ensure pagination is enabled
                    arrows: false, // Disable arrows
                    breakpoints: {
                        768: {
                            perPage: 1,
                            gap: '0.5rem',
                        },
                        1024: {
                            perPage: 2,
                            gap: '1rem',
                        }
                    }
                });

                splide.mount();
            });
        </script>
    @endsection