@extends('front.layout.master')
@push('css')
    <style>
        .active{
            background: #ffc200;
        }
    </style>
@endpush
@section('content')


{{--    @include('front.layout.slider')--}}

    <!--  start catogeries-->
    <div class="main-catogeries-area mt-40 mb-30">
        <div class="container">

            <div class="shop-topbar-wrapper">
                <div class="shop-topbar-left">

                    <span class="title-checkbox"><input type="checkbox" checked> خدمة جمع لي</span>
                    <a href="#" class="brands-select">براندات <img src="{{asset('front/assets/images/icon/Component%2010%20%E2%80%93%201.png')}}"></a>
                </div>
                <div class="product-sorting-wrapper">
                    <a href="#" class="hight_price" data-url="{{route('single-product')}}">اعلي سعر <img src="{{asset('front/assets/images/icon/sort-descending-interface-symbol.png')}}" class="icon-filter0"></a>
                    <a href="#" class="low_price" data-url="{{route('single-product')}}">اقل سعر <img src="{{asset('front/assets/images/icon/sort-descending-interface-symbol.png')}}" class="icon-filter1"></a>
                </div>
            </div>
            <div class="row">
                @foreach($subCategory as $index => $sub)
                <buttoon  style="margin: 11px;" href="#" class="{{$index == 0 ? "active view-all" : "view-catogery"}} subCat" id="sa_{{$sub['id']}}" data-id="{{$sub['id']}}" data-type="{{$sub['type']}}" data-parent_id="{{$sub['parent_id']}}" data-url="{{route('single-product')}}">
                    <span style="    padding: 0px;">{{$sub['name']}}</span>
                </buttoon>
                @endforeach
            </div>

        </div>

    </div>
    <!--   end catogeries-->

    <!--start products-->
    <div class="products-section mt-20 mb-30 offers">

        <div class="container">

            <div class="row"  id="data">

                    @include('front.data')

            </div>
            <div class="ajax-load text-center" style="display:none">
                <p><img src="{{asset('Loading_icon.gif')}}" style="width: 200px"></p>
            </div>

            <span style="display: none" id="type">0</span>
            <span style="display: none" id="category_id">{{isset($id) ? $id : ''}}</span>
            <span style="display: none" id="order">ASC</span>
        </div>
    </div>

    <!--end products-->

@endsection
@push('js')

    <script>

        $('body').on('click','.subCat',function (e){
            e.preventDefault();
            $('.subCat').removeClass('active');
            $(this).addClass('active');
        });

    </script>

    <script type="text/javascript">
        var page = 1;
        $(window).scroll(function(event) {
            if($(window).scrollTop() + $(window).height() >= $(document).height() - 1000) {
                var type = $('#type').html();
                var id = $('#category_id').html();
                var order = $('#order').html();
                page++;
                loadMoreData(page,id,type,order);
            }
        });

        function loadMoreData(page , id , type , order){
            // console.log(page , $('#type').html() , $('#order').html() , id);
            $.ajax(
                {
                    url:"/products?id="+id+"&type="+type+"&order="+order+"&page="+page,
                    method: "get",
                    dataType: 'html',
                    beforeSend: function()
                    {
                        $('.ajax-load').show();
                    }
                })
                .done(function(data)
                {

                    console.log(data);

                    if(data.html == " "){
                        $('.ajax-load').html("No more records found");
                        return;
                    }
                    $('.ajax-load').hide();
                    $("#data").append(data);
                })
                .fail(function(jqXHR, ajaxOptions, thrownError)
                {
                    alert('server not responding...');
                });
        }

    </script>






@endpush