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

@extends('frontend.partials.master')
@push('css')
<style>
    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{
        font-size: 30px;
        padding: 10px;
        background: #86cd91a8;
        width: 15px;
    }
    button.owl-prev{
        position: absolute;
        top: 30%;
    }
    button.owl-next{
        position: absolute;
        top: 30%;
        right: 0;
    }
    .cat_div{
        height: 100px;
        width: 100px;
        border-radius: 50%;
        box-shadow: 0px 3px 6px 1px #003315;
        display: grid;
        place-content: center;
        margin-bottom: 10px;
        overflow: hidden;
    }
    .cat_div img{
        width: 100% !important;
        transform: scale(1.0);
        transition: 0.3s;
    }
    .cat_div:hover img{
        transform: scale(1.2);
    }
    .category_products .banner {
        padding: 0px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .category_products .banner.style1 {
        background: linear-gradient(to right, #003315, #003315);
        background: -moz-linear-gradient(to right, #003315, #003315);
        background: -o-linear-gradient(to right, #003315, #003315);
        background: -webkit-linear-gradient(to right, #003315, #003315);
    }
    .category_products .banner .title {
        font-size: 50px;
        text-transform: uppercase;
        font-family: var(--popins);
        color: #fff;
        font-weight: 700;
    }
    
    @media (max-width: 575.98px) {
        .category_products .banner .title {
            font-size: 30px;
        }
        .category_products .banner {
            flex-wrap: wrap;
            padding: 10px;
            justify-content: center;
        }
    }
    @media(max-width: 769px){
        .cat_div{
            height: 70px;
            width: 70px;
        }
        .category_products .banner .title {
            font-size: 40px;
        }
        .category_products .banner {
            flex-wrap: wrap;
            padding: 13px;
            justify-content: center;
        }
        
    }
    #trending .content .item .caption{
            font-size: 12px;
            margin-bottom: 7px;
        }
</style>
@endpush
@section('content')
@include('frontend.partials.slider')
   @if($feateuredCategories->count())
    <section id="trending" class="mb-3"  style="box-shadow: 0px 5px 18px 0px green;">
        <div class="col-lg-11 m-auto">
            <div class="content" style="padding-top: 10px;">
                <div class="owl-carousel category-carousel">
                    @forelse($feateuredCategories as $key => $item)
                    <a class="item" href="{{ route('cat.products',$item->name)}}">
                        <div class="cat_div">
                            <img class="icon" src="{{ asset('posadmin/images/category/'.$item->image) }}" alt=""
                            loading="lazy">
                        </div>
                        <p class="caption">{{ $item->name }}</p>
                    </a>
                    @empty
                    
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    @endif
    
    
    <section id="products" class="mt-5">
        <div class="container-fluid">
            <div class="content">
                @foreach($products as $product)
                    @php
                        $product->is_new = 0;
                    @endphp
                    @include('frontend.partials.product_section')
                @endforeach
            </div>
            <div class="text-center">
                <a href="{{ route('shop') }}" class="btn more-btn">
                    More Product
                    <span class="material-icons-outlined">
                        chevron_right
                    </span>
                </a>
            </div>
        </div>
    </section>
    
    <section id="products" class="appendData">
        
    </section>
    
    

    <section class="mb-2" id="testimonial_custom">
        <div class="container-fluid">
            <div class="content">
                <h2 class="title">{{ $generalSetting->testimonial_title }}</h2>
                <p class="tagline">{!! $generalSetting->testimonial_description !!}</p>
                <div class="testimonials">
                    @foreach($testimonials as $test)
                    <div class="testimonial">
                        <p class="comment">
                            {!! $test->video !!}
                        </p>
                        <div class="user-info">
                            <img class="user-photo" src="{{url('posadmin/images/brand',$test->image)}}" alt=""
                                loading="lazy">
                            <div>
                                <div class="name">{{ $test->title }}</div>
                                <div class="designation">{{ $test->designation }}</div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <!--<div class="text-center">-->
                <!--    <a href="javascript:void(0)" class="btn more-btn">-->
                <!--        See More-->
                <!--        <span class="material-icons-outlined">-->
                <!--            chevron_right-->
                <!--        </span>-->
                <!--    </a>-->
                <!--</div>-->
            </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