@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
        @include('web.layouts.header')


        <section class="products_sec section">
            <div class="container">
                <div class="row">
                    @foreach($products as $row)
                        <div class="col-lg-3 col-md-4 col-6">
                            @include('web.pages.components.product.product',['product'=>$row])
                        </div>
                    @endforeach
                </div>

                <div class="pagination-wrapper mt-4">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-center">
                            @if (!$products->onFirstPage())
                                <li class="page-item">
                                    <a class="page-link" href="{{ $products->previousPageUrl() }}" aria-label="Previous">
                                        <span aria-hidden="true">«</span>
                                    </a>
                                </li>
                            @endif
                            @foreach ($products->getUrlRange(1, $products->lastPage()) as $key => $url)
                                <li class="page-item"><a class="page-link {{$key == $products->currentPage() ? 'active' : ''}} " href="{{$url}}">{{$key}}</a></li>
                            @endforeach
                            @if ($products->hasMorePages())
                                <li class="page-item">
                                    <a class="page-link" href="{{ $products->nextPageUrl() }}" aria-label="Next">
                                        <span aria-hidden="true">»</span>
                                    </a>
                                </li>
                            @endif
                        </ul>
                    </nav>
                </div>
            </div>
        </section>


        <!-- Start section -->
        @include('web.layouts.newsletter')
    </main>
@section('inject_js')
    <script>
        let url_fetch_subAttr = "{{route('fetch.attributeSub')}}"
        function showSubAttribute()
        {
            let data = $('#filter').serialize();
            $.ajax
            ({
                url : url_fetch_subAttr,
                type: 'GET',
                data: data,
                success:function(data)
                {
                    $('.sub_attributes').html('');
                    $.each( data.data, function( key, value ) {
                        $('#sub_attribute_'+key).html(value);
                    });
                }
            })
        }
    </script>
@endsection
@stop
