@extends('layouts.app')
@section('content')
<div class="main_content">
    <div class="section">
        <div class="container">
            <div class="row">
                <div class="col-lg-9">
                    <div class="row align-items-center mb-4 pb-1 product_title">
                        <div class="col-12">
                            <h2>Products List</h2>
                        </div>
                    </div>
                    <div class="product_ajax_data">
                        @include('frontend.products.ajax_data')
                    </div>
                    <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
                </div>
                @include('components.filter')
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    $('.menu_{{$category_slug}}').addClass('active');
    //pagination
    $(document).on('click', '.pagination a', function(event){
        event.preventDefault();
        var page = $(this).attr('href').split('page=')[1];
        $('#hidden_page').val(page);
        $('.pagination li').removeClass('active');
        $(this).parent().addClass('active');

        fetch_data(page);
    });

    function fetch_data(page)
    {
        showLoader();
        $.ajax({
            url : '{{route("products", [$category_slug, $subcategory_slug])}}',
            data: {
                'page': page,
            },
            success:function(data)
            {
                $(".product_ajax_data").html(data);
                
                hideLoader();
                getAllProductPrice();
            }
        })
    }
</script>
@endpush