@extends('frontend.partials.master')
@push('css')
<link rel="stylesheet" href="{{ asset('assets/fontend/scss/product.scss') }}">
<link rel="stylesheet" href="{{ asset('assets/fontend/css/filter.min.css') }}">
<style>
    .price-slider{
        display: flex;
        gap: 8px;
    }
</style>
@endpush
@section('content')
<section id="search-input">
    <div class="col-lg-10 m-auto">
        <div class="input-group">
            <span class="input-group-text">
                <span class="material-icons-outlined">
                    search
                </span>
            </span>
            <input type="text" name="search" placeholder="Search ....." class="form-control search searchProduct">
        </div>
    </div>
</section>
<section id="filter-title">
    <div class="col-lg-10 m-auto">
        <div class="row gy-2 gx-4">
            <div class="col-md-3">
                <div class="filter-heading d-flex justify-content-between align-items-center">
                    <div class="title cursor-pointer">
                        <span class="material-icons-outlined">
                            filter_list
                        </span>
                        Filter
                    </div>

                    <span wire:click='formReset' class="material-icons-outlined cursor-pointer">
                        settings_backup_restore
                    </span>
                </div>
            </div>
            <div class="col-md-9">
                <div class="right d-flex flex-wrap justify-content-between align-items-center">
                    <span class="course-count">
                        Product Found <span class="digit"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="product-filter">
    <div class="col-lg-10 m-auto">
        <div class="row gy-2 gx-4">
            <div class="col-xl-3">
                <div id="filter-panel" class="showhide">
                    <div class="accordion">
                        <div class="filter-heading d-flex justify-content-between align-items-center accordion-button"
                            data-bs-toggle="collapse" data-bs-target="#categories-accordion" type="button">
                            <div class="title cursor-pointer">
                                <span class="material-icons-outlined">filter_list</span> Categories
                            </div>
                        </div>
                        <ul class="filter-items accordion-collapse collapse show" id="categories-accordion">
                            @foreach($cats as $category)
                            <li class="item">
                                <input class="form-check-input filter-input" type="checkbox" value="{{ $category->id }}">
                                <label>{{ $category->name }}</label>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    
                    <div class="accordion pricing">
                        <div class="filter-heading d-flex justify-content-between align-items-center accordion-button"
                            data-bs-toggle="collapse" data-bs-target="#pricing-accordion" type="button">
                            <div class="title cursor-pointer">
                                <span class="material-icons-outlined">filter_list</span> Pricing
                            </div>
                        </div>
                        <ul class="filter-items accordion-collapse collapse show" id="pricing-accordion">
                            <li class="item py-0">
                                <div class="price-slider">
                                    <div>
                                        <label>Min Price</label>
                                        <input type="number" class="form-control filter-input" id="min-price">
                                    </div>
                                    <div>
                                        <label>Max Price</label>
                                        <input type="number" class="form-control filter-input" id="max-price">
                                    </div>
                                </div>
                            </li>
                            
                            <li class="item">
                                <input type="radio" name="is_discount" value="0" class="form-check-input filter-input">
                                <label for="p1">All Products</label>
                            </li>
                            <li class="item">
                                <input type="radio" name="is_discount" value="1" class="form-check-input filter-input">
                                <label for="p2">Discount Offer</label>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="col-xl-9">
                <div class="right">
                    <section id="products">
                        <div class="container-fluid">
                            <div class="content filter shopProducts">
                                
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('js')
<script>
    var page = 1;
    var loading = false;
    var lastRequestScroll = 0;
    
    $(window).scroll(function () {
        var scrollPosition = $(window).scrollTop();
        var viewportHeight = $(window).height();
        var documentHeight = $(document).height();
        
        if (scrollPosition + viewportHeight >= documentHeight - (0.5 * viewportHeight)) {
            if (!loading && scrollPosition > lastRequestScroll + 100) {
                loading = true;
                page++;
                getProduct(page);
                lastRequestScroll = scrollPosition;
            }
        }
    });
    
    $(document).on('change', '.filter-input', function () {
        getProduct(page = 1);
    });
    
    $(document).on('keyup', '.searchProduct', function () {
        let query = $(this).val().trim();
        getProduct(page = 1, query);
    });
    
    function getProduct(page = 1, search = '') {
        let categories = [];
        $('input[type="checkbox"]:checked').each(function () {
            categories.push($(this).val());
        });
        const urlParams = new URLSearchParams(window.location.search);
        const catIdFromUrl = urlParams.get('cat_id');
        
        if (catIdFromUrl) {
            categories.push(catIdFromUrl);
        }
    
    
        $('input[type="checkbox"]:checked').each(function () {
            categories.push($(this).val());
        });
    
        let minPrice = $('#min-price').val();
        let maxPrice = $('#max-price').val();
        let isDiscount = $('input[name="is_discount"]:checked').val();
    
        $.ajax({
            url: '{{ route("shop") }}',
            type: 'GET',
            data: {
                page,
                cat_id: categories,
                min_price: minPrice,
                max_price: maxPrice,
                is_discount: isDiscount,
                search: search
            },
            beforeSend: function () {
                if (page === 1) {
                    $('.shopProducts').html('<p>Loading...</p>');
                }
            },
            success: function (data) {
                if (page === 1) {
                    $('.shopProducts').html(data.html);
                } else {
                    $('.shopProducts').append(data.html);
                }
                $('.digit').text(data.count);
                loading = false;
            },
            error: function () {
                alert('Failed to fetch products.');
                loading = false;
            }
        });
    }

    getProduct(page = 1, "{{request('search')}}");
    
    $(document).on('click', '.pagination a', function (e) {
        e.preventDefault();
        let page = $(this).attr('href').split('page=')[1];
        getProduct(page);
    });

</script>
@endpush