@extends('layout.app')
@section('content')
    <section class="cbdInnr">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="d-flex align-items-center justify-content-end mb-5">

                        <label class="m-">Color Group</label>
                        <!-- Filter options for color -->
                        <select id="colorGroup" class=" ml-3  form-control">
                            <option value="">All Groups</option>
                            @foreach($colorGroups as $groups)
                                <option value="{{ $groups }}">{{ $groups }}</option>
                            @endforeach
                        </select>

                        <label class="m-0">Colors</label>
                        <!-- Filter options for color -->
                        <select id="colorFilter" class=" ml-3  form-control">
                            <option value="">All Colors</option>
                            {{--                        @foreach($filterColors as $color)--}}
                            {{--                            <option value="{{ $color }}">{{ $color }}</option>--}}
                            {{--                        @endforeach--}}
                        </select>

                        <!-- Filter options for size -->
                        <label class="m-0">Size</label>
                        <select id="sizeFilter" class="mx-4 form-control">
                            <option value="">All Sizes</option>
                            <option value="0-1">0-1 Inch</option>
                            <option value="1-2">1-2 Inch</option>
                            <option value="2-3">2-3 Inch</option>
                            <option value="3-4">3-4 Inch</option>
                        </select>

                        <label class="m-">Category</label>
                        <!-- Filter options for color -->
                        <select id="categoryFilter" class=" ml-3  form-control">
                            <option value="">All Categories</option>
                            @foreach($categories as $category)
                                <option value="{{ $category }}">{{ $category }}</option>
                            @endforeach
                        </select>


                        <i class="fas fa-filter ml-5"></i>
                        {{--                        <i class="fas fa-filter ml-5"></i>--}}
                    </div>

                </div>

                <div class="col-md-12">
                    <div class="row products">
                        @include('components.frame-loop')
                    </div>
                    <div class="infinite-scroll-loader" data-loading="0" data-next-page="{{ $frames->nextPageUrl()  }}"
                         style="display: {{$frames->nextPageUrl()? 'block' : 'none'}};">
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('script')
    <script>
        $(document).ready(function () {

            $('#colorGroup').change(function () {
                var selectedGroupColor = $('#colorGroup').val();

                if (selectedGroupColor) {
                    $.ajax({
                        url: '{{ route('group.color') }}',
                        method: 'GET',
                        data: {
                            color: selectedGroupColor,
                        },
                        success: function (response) {
                            var frameDropdown = $('#colorFilter');
                            frameDropdown.empty();
                            frameDropdown.append($('<option>', {
                                value: '',
                                text: 'All Colors'
                            }));
                            $.each(response.groupColors, function (key, value) {
                                frameDropdown.append($('<option>', {
                                    value: value.color,
                                    text: value.color,
                                }));
                            });

                            frameDropdown.show();
                        },
                        error: function (error) {
                            console.error(error);
                        }
                    });
                } else {
                    $('#colorFilter').hide();
                }
            });

            var sizeFilter = $('#sizeFilter');
            var colorGroupFilter = $('#colorGroup');
            var colorFilter = $('#colorFilter');
            var categoryFilter = $('#categoryFilter');
            var productsContainer = $('.products');

            function updateFilteredFrames() {
                var selectedSize = sizeFilter.val();
                var selectedGroupColor = colorGroupFilter.val();
                var selectedColor = colorFilter.val();
                var selectedCategory = categoryFilter.val();

                $.ajax({
                    url: '{{ route('front.frames') }}',
                    method: 'GET',
                    data: {
                        size: selectedSize,
                        colorGroup: selectedGroupColor,
                        color: selectedColor,
                        category: selectedCategory,
                    },
                    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);
                    }
                });
            }

            colorGroupFilter.on('change', updateFilteredFrames);
            sizeFilter.on('change', updateFilteredFrames);
            colorFilter.on('change', updateFilteredFrames);
            categoryFilter.on('change', updateFilteredFrames);
        });

        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')
            const selectedSize = $('#sizeFilter').val();
            const selectedColor = $('#colorFilter').val();
            const selectedcategory = $('#categoryFilter').val();
            if (isInViewport($('.infinite-scroll-loader')[0] ?? null) && loading === '0' && pageUrl) {
                loadMoreData(pageUrl, selectedSize, selectedColor,selectedcategory);
                // page++; // Increment the page number
            }
        });

        function loadMoreData(pageUrl, selectedSize, selectedColor,selectedcategory) {
            $('.infinite-scroll-loader').attr('data-loading', '1');
            $.ajax({
                url: pageUrl,
                type: 'get',
                data: {
                    size: selectedSize,
                    color: selectedColor,
                    category: selectedcategory,
                },
                dataType: 'json',
                success: function (response) {
                    // console.log(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 Frames</h1>');
                    // }
                },
                complete: function () {
                    $('.infinite-scroll-loader').attr('data-loading', '0');
                }
            });
        }
    </script>
@endpush