@extends('layouts.frontend')

@section("css")
<style>
    button#load-more-btn {
    background: var(--primary);
    box-shadow: none;
}
.hide_me{
    display:none;
}
.row.justify-content-center.mt-4.load_more_products img.product_listing_loader {
    margin: auto;
}

    </style>
@endsection

@section('content')
<input type="hidden" class="category_selected" value="{{$category}}" />
    <!-- letest product section -->
    <section class="product-section" >
            <div class="container">
                <div class="row">
                    <div class="col-12  ">
                        <h2 class="h3 product-title">Explore Our Products</h2>
                    </div>
                </div>
                    <div class="row mt-3" id="product-container">
                        @foreach($products as $p) 
                            <div class="col-12 col-lg-2 col-md-3 col-sm-6  mb-5 card border-0 product--item">
                                <div class="card-body p-0">
                                    <div class="product--image position-relative">
                                        <a href="{{ route('single-product', $p->slug) }}">
                                            @if($p->photos->count() > 0)
                                              <figure><img src="/storage/{{ $p->photos->first()->images }} "alt="product " width="210" height="250"></figure>
                                            @else
                                               <figure><img src="{{ asset('frontend/img/no-image.png') }}" alt="product " width="210" height="250"></figure>
                                            @endif
                                        </a>
                                   
                                        <!-- <div class="addT_Cart">
                                            <a href="{{ route('single-product', $p->slug) }}" class="btn btn-primary view_prdt custom-button "><i class="flaticon-bag"></i><span>View Product</span></a>
                                        </div> -->
                                    </div>
                                    <a class="prdt_nme" href="{{ route('single-product', $p->slug) }}"><h4 class="h6">{{ $p->name }}</h4> </a>
                                    <div class="product--price d-flex">
                                        <h3 class="h4 ">${{ $p->price }}</h3> 
                                        @if($p->orignal_price) <h3 class="h5">${{ $p->orignal_price }}</h3> @endif
                                        
                                    </div>
                                    <div class="mb-3">
                                    <p class="available_qty mb-0" >Available Units: {{$p->quantity}}</p> 
                                    @if($p->shipping_cost != 0)
                                    <p class="available_qty mb-0">Shipping Cost: ${{$p->shipping_cost}}</p> 
                                    @else
                                    <p class="available_qty"><br></p>
                                    @endif 
                                    </div>
                                    @if($p->quantity > 0)
                                    <form action="{{ route('cart.store') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="id" value="{{$p->id}}">
                                        <input type="hidden" name="name" value="{{$p->name}}">
                                        <input type="hidden" name="price" value="{{$p->price}}">
                                        <input type="hidden" name="quantity" value="1">
                                        <button type="submit" class="btn btn-primary custom-button"><i class="flaticon-bag"></i><span>ADD TO CART</span></button>
                                    </form>  
                                    @else
                                      <button type="submit" class="btn btn-primary custom-button add-to-cart-disabled"><i class="flaticon-bag"></i><span>ADD TO CART</span></button>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                   </div>
                   <div class="row justify-content-center mt-4 load_more_products">
                        <div class="col-12 text-center">
                            <!-- <button id="load-more-btn" class="btn btn-primary">Load More</button> -->
                            <img src="{{URL::to('/images/sie_loader.gif')}}" class="product_listing_loader hide_me"  />
                        </div>
                    </div>
                 
                @if($products->hasMorePages())
                    <!-- <div class="row justify-content-center mt-4">
                        <div class="col-12 text-center">
                            <button id="load-more-btn" class="btn btn-primary">Load More</button>
                        </div>
                    </div> -->
                @endif
                
            </div>
        </section>
@endsection

@section('scripts')
<script>
    // $(document).ready(function() {
       
    //     var nextPage = {{ $products->currentPage() + 1 }};
    //     var lastPage = {{ $products->lastPage() }};
    //     $('#load-more-btn').click(function() {
    //         if (nextPage <= lastPage) {
    //             $.ajax({
    //                 url: "{{ route('welcome') }}",
    //                 type: 'GET',
    //                 data: {
    //                     page: nextPage
    //                 },
    //                 beforeSend: function() {
    //                     $('#load-more-btn').html('Loading...');
    //                 },
    //                 success: function(response) {
    //                     $('#load-more-btn').html('Load More');
    //                     $('#product-container').append(response);
    //                     nextPage++;
    //                 }
    //             });
    //         } else {
    //             $('#load-more-btn').remove();
    //         }
    //     });
    // });
</script>

<script>
  $(document).ready(function() {
    // Variable to track if loading is in progress
    var loading = false;
     var nextPage = 2;
    // Function to check if scroll reached the bottom of the element
    function isBottomReached() {
        var productSection = $('.product-section');
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();
        var productSectionBottom = productSection.offset().top + productSection.height();
        return scrollTop + windowHeight >= productSectionBottom;
    }

    // Function to load more products via Ajax
    function loadMoreProducts() {
        var categorySelected = $(".category_selected").val();
        if (!loading && isBottomReached()) {
            loading = true;
            $(".product_listing_loader").removeClass("hide_me");
            $.ajax({
                url: "{{ route('welcome') }}",
                type: 'GET',
                data: {
                    page: nextPage,
                    category : categorySelected
                },
                dataType: 'html',
                success: function(data) {
                    if($.trim(data) != ""){
                        if(nextPage > 2){
                            // $('#product-container').append(data);
                            $('#product-container').append('<button id="loadMoreBtn" class="btn btn-primary custom-button">Load More</button>');
                        }else{
                        $('#product-container').append(data);
                        loading = false;
                        nextPage++;
                        }
                        $(".product_listing_loader").addClass("hide_me");
                    }else{
                        loading = true;
                        $(".product_listing_loader").addClass("hide_me");
                    }
                   
                },
                error: function(xhr, status, error) {
                    console.error('Error loading more products:', error);
                    loading = false;
                    $(".product_listing_loader").addClass("hide_me");
                }
            });
        }   
    }

    // Check for scroll event and load more products
    if(nextPage < 3){
        $(window).scroll(function() {
            loadMoreProducts();
        });
      
    }
    $(document).on("click", "#loadMoreBtn", function () {
            loading = true;
            var categorySelected = $(".category_selected").val();
            $(".product_listing_loader").removeClass("hide_me");
            $.ajax({
                url: "{{ route('welcome') }}",
                type: 'GET',
                data: {
                    page: nextPage,
                    category : categorySelected
                },
                dataType: 'html',
                success: function(data) {
                    if($.trim(data) != ""){    
                        $('#loadMoreBtn').remove();
                        $('#product-container').append(data);
                        // $('#product-container').append('<button id="loadMoreBtn">Load More</button>');
                        loading = false;
                        nextPage++;
                        $(".product_listing_loader").addClass("hide_me");
                    }else{
                        loading = true;
                        $(".product_listing_loader").addClass("hide_me");
                    }
                   
                },
                error: function(xhr, status, error) {
                    console.error('Error loading more products:', error);
                    loading = false;
                    $(".product_listing_loader").addClass("hide_me");
                }
            });
    });
});
</script>


@endsection