@php
    $generalSetting = DB::table('general_settings')->first();
@endphp

@extends('frontend.partials.master')
@push('css')
      

@endpush
@section('content')
    <section id="products" class="mt-5">
        <h3 class="text-center fw-bold mb-3"><span class="border-bottom border-2 border-dark">{{ $category->name }}</span></h3>
        <div class="container-fluid">
            <div class="content">
                @foreach($products as $product)
                    @include('frontend.partials.product_section')
                @endforeach
            </div>
        </div>
    </section>
@endsection
@push('js')
<script>
$(document).ready(function () {
    let page = 1; // Initialize the page number
    let loading = false;
    let hasMoreData = true; // Flag to track if more data is available

    function infinteLoadMore() {
        if (loading || !hasMoreData) return; // Prevent duplicate requests and stop if no more data
        loading = true;

        $.ajax({
            url: "{{ route('home.products') }}",
            datatype: "html",
            type: "get",
            data: { page: page }, // Send the page number
            beforeSend: function () {
                $('.auto-load').show(); // Show loading indicator
            }
        }).done(function (response) {
            if (response.html.trim() === '') {
                hasMoreData = false; // No more data, stop further requests
                $('.auto-load').html("We don't have more data to display: &#128514;");
                return;
            }

            // Append new data to the container
            $(".appendData").append(response.html);

            page++; // Increment the page number
            $('.auto-load').hide(); // Hide loading indicator
        }).fail(function () {
            console.log('Server error occurred');
        }).always(function () {
            loading = false; // Reset the loading flag
        });
    }

    // Trigger on scroll
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() >= $(document).height() - 1600) {
            infinteLoadMore();
        }
    });
});



$(document).ready(function () {
    $(".category-carousel").owlCarousel({
        loop: true,
        margin: 5,
        nav: true,
        dots: false,
        responsive: {
            0: {
                items: 3
            },
            400: {
                items: 3
            },
            576: {
                items: 4
            },
            768: {
                items: 6
            },
            992: {
                items: 8
            },
            1200: {
                items: 10
            }
        }
    });
});

</script>
@endpush