@extends('layout.app')
@section('content')

    <section class="cbdInnr">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2">
                    <div class=" mb-5">
                        <label class="m-">Filter By Category</label>
                        <!-- Filter options for color -->
                        <select id="primaryCategory" class="form-control">
                            <option value="">All Categories</option>
                            @foreach($categories as $category)
                                <option value="{{$category}}">{{$category}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class=" mb-5">
                        <label class="m-">Filter By Secondary Color</label>
                        <!-- Filter options for color -->
                        <select id="secondaryColor" class="form-control">
                            <option value="">All Secondary Colors</option>
                            @foreach($secondary_color as $color)
                                <option value="{{$color}}">{{$color}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class=" mb-5">
                        <label class="m-">Filter By Third Color</label>
                        <!-- Filter options for color -->
                        <select id="thirdColor" class="form-control">
                            <option value="">All Third Colors</option>
                            @foreach($third_color as $color)
                                <option value="{{$color}}">{{$color}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-10">
                    <div class="row products">
                        @include('components.product-loop')
                    </div>
                    <div class="infinite-scroll-loader" data-loading="0" data-next-page="{{ $products->nextPageUrl()  }}"
                         style="display: {{$products->nextPageUrl()? 'block' : 'none'}};">
                    </div>
                </div>
            </div>
        </div>
    </section>


@endsection
@push('script')
    <script>
        $(document).ready(function () {
            var primaryCategory = $('#primaryCategory');
            var secondaryColor = $('#secondaryColor');
            var thirdColor = $('#thirdColor');

            function isInViewport(el) {
                if (!el) return false
                const rect = el.getBoundingClientRect();
                return (
                    rect.top >= 0 &&
                    rect.left >= 0 &&
                    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
                );
            }

            var page = 1; // Initial page (Note: Start from 2 as page 1 is already loaded)

            $(document).on('scroll', function () {
                const loading = $('.infinite-scroll-loader').attr('data-loading')
                const pageUrl = $('.infinite-scroll-loader').attr('data-next-page')
                if (isInViewport($('.infinite-scroll-loader')[0] ?? null) && loading === '0' && pageUrl) {
                    loadMoreData(pageUrl);
                }
            });

            function loadMoreData(pageUrl) {
                $('.infinite-scroll-loader').attr('data-loading', '1');

                var selectedCategory = primaryCategory.val();
                var selectedSecondaryColor = secondaryColor.val();
                var selectedThirdColor = thirdColor.val();

                $.ajax({
                    url: pageUrl,
                    type: 'get',
                    dataType: 'json',
                    data: {
                        category: selectedCategory,
                        secondary_color: selectedSecondaryColor,
                        third_color: selectedThirdColor,
                    },
                    success: function (response) {
                        if(response.html){
                            $('.products').append(response.html);
                        }
                        $('.infinite-scroll-loader').attr('data-next-page', response?.nextUrl ?? '');
                        if(!response?.nextUrl){
                            $('.infinite-scroll-loader').html('<h1>No More Products</h1>');
                        }
                    },
                    complete: function () {
                        $('.infinite-scroll-loader').attr('data-loading', '0');
                    }
                });
            }

            function updateFilteredProducts() {
                var selectedCategory = primaryCategory.val();
                var selectedSecondaryColor = secondaryColor.val();
                var selectedThirdColor = thirdColor.val();

                $.ajax({
                    url: '{{ route('front.products') }}',
                    method: 'GET',
                    data: {
                        category: selectedCategory,
                        secondary_color: selectedSecondaryColor,
                        third_color: selectedThirdColor,
                    },
                    success: function (response) {
                        if (response.html) {
                            $('.products').html(response.html);
                        } else {
                            $('.products').html('<h1>No filter Found</h1>');
                        }
                        $('.infinite-scroll-loader').attr('data-next-page', response?.nextUrl ?? '');
                    },
                    complete: function () {
                        $('.infinite-scroll-loader').attr('data-loading', '0');
                    },
                    error: function (error) {
                        console.error(error);
                    }
                });
            }
            primaryCategory.on('change', updateFilteredProducts);
            secondaryColor.on('change', updateFilteredProducts);
            thirdColor.on('change', updateFilteredProducts);
        });
    </script>
@endpush