@extends('layouts.front.front')

@section('maincontent')
    <a name="product-listing-area"></a>
    <section class="global-space-section">
        <div class="lisitng-index">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2 hidden-xs">
                        <div class="leftFilterSection">
                            <div class="clearfix"></div>
                            <div class="layout-heading justify-space-between align-center ">
                                <!--h2>{{-- empty($categoryInfo)?'ProductsListing':$categoryInfo->name --}}</h2-->
                                <div style="padding:5px;display:none;" class="filterZone">
                                    <h5>Selected Filters</h5>
                                    <div id="selectedFilterArea"></div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            @include('front-shop.products.product-filter')
                        </div>
                        <div class="endOfFilter">&nbsp;</div>
                    </div>
                    <div class="col-md-10 col-sm-12 col-xs-12">
                       
                        <div class="product-lisiting-section">
                            <div class="product-layout-section custom-grid-product-layout-section">
                                <div class="category-banner-section">
                                    <div class="static-slide">
                                        <img src="{{ asset('front-shop/images/inner-slide-001.jpg') }}" alt="category">
                                    </div>
                                    <div class="sps-know-more clearfix">
                                        <div class="sps-left-colm">
                                            10% Off for SPS members
                                        </div>
                                        <div class="sps-right-colm">
                                            <a href="#" data-toggle="modal" data-target="#sps-modal">Know More</a>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="category_filter">
                                        <h4 class="page-title">                                           
                                            {{ $categoryInfo->name }}
                                        </h4>  
                                    <hr>                                    
                                </div>
                                <div class="row slim-scroll productDataContainer">
                                    @if ($products->count() > 0)
                                        @foreach ($products as $product)
                                        @if(!empty($product->articleInfo))
                                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                                @php 
                                                 $purl = route('front.shop.shop-product-details', ['code' => $product->article, 'color' => $product->color,  'pid' => $product->id]);
                                                $purl = str_replace('#', '__hash__', $purl);
                                                
                                                $IMG_article = str_replace('#', '', $product->article);
                                                $col_name = str_replace(' ', '_', $product->color);                                                
                                                $articleimg = \App\ArticleImg::where('code',$IMG_article)->where('color_name',$col_name)->orderBy('sort_order')->first(); 
                                                if(empty($articleimg)){
                                                    $articleimg = \App\ArticleImg::where('code',$IMG_article)->where('color_name',$product->color)->orderBy('sort_order')->first(); 
                                                }
                                               
                                                $images = empty($articleimg->imgname) || $articleimg->imgname == 'NULL' ? asset('front-shop/images/placeholder.png') : asset('/uploads/articles/photos/full/'.$articleimg->imgname);
                                                @endphp
                                                <div class="placeholder-image-portfolio-panel placeholder-image-portfolio-panel-layout">
                                                    <div class="prel-gutter">
                                                        <a href="{{ $purl }}">
                                                            <div 
                                                                class="{{ !empty($mini) ? 'dynamic-img-container-mini' : 'dynamic-img-container' }}"
                                                                style="background-image: url('{{ $images }}');background-repeat:no-repeat; background-size:contain; background-position:center center;"
                                                                @if(!empty($images))
                                                                onmouseover="this.style.backgroundImage = 'url({{ $images }})';"
                                                                onmouseout="this.style.backgroundImage = 'url({{ $images }})';"
                                                                @endif
                                                            >                     
                                                            <img style="height:368px;" src="{{  $images }}"/>
                                                            </div>            
                                                            <div class="group-title-panel">        
                                                                <div class="title-ellipsis">
                                                                    
                                                                    {{  $product->articleInfo->short_desc }}                    
                                                                    <div class="product-price ">{{ $homepageModel->formatCurrency($product->mrp) }}</div>
                                                                </div>
                                                                
                                                                <div class="clearfix">
                                                                    <div class="clearfix"></div> 
                                                                </div>
                                                            </div>

                                                        </a>
                                                    </div>
                                                </div>

                                            </div>
                                        @endif
                                        @endforeach
                                    @else
                                        <div class="alert alert-info">No record found!</div>
                                    @endif
                                </div>
                                <div class="row">
                                    <div class="col-md-12 startLoading">&nbsp;</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('extraJS')
    <script>
        var pg = {{ empty(request('page')) ? 2 : request('page') }};
        var stopLoading = false;

        function filterTheProducts(page) {
            var scrolltop = false;
            stopLoading = true;
            if (typeof(page) == 'undefined') {
                page = 1;
                scrolltop = true;
                $(".productDataContainer").html('');
            } else {}
            $('#selectedFilterArea').html('');
            showLoader();
            var route =
                "{{ route('front.shop.shop-by-category', ['c1' => !empty($c1var) ? $c1var : null, 'c2' => !empty($c2var) ? $c2var : null, 'c3' => !empty($c3var) ? $c3var : null]) }}";
            var qs = '?time=' + new Date();
            var cats = [];
            var color = [];
            var size = [];
            var filters = [];
            var selectedCats = [];
            var selectedFilters = [];

            $('.catFilterOption').each(function() {
                if ($(this).is(":checked")) {
                    cats.push($(this).val());
                    $('#selectedFilterArea').append(
                        '<span style="font-size:11px;margin-left:5px;margin-right:5px;border:1px solid #dcdcdc;border-radius:5px; background-color:#ececec; padding:5px;margin:5px;clear:both;" class="pull-left;">' +
                        '' + $(this).attr('data-selectedValue') +
                        // $(this).attr('data-selectedsection') + ': ' + $(this).attr('data-selectedValue') +
                        ' <a href="javascript:void(0);" onclick="document.getElementById(\'' + $(this).attr(
                            'data-selectedId') +
                        '\').checked=false;filterTheProducts();return false;"><i class=" text-danger fa fas fa-times"></i></a></span>'
                    );
                }
            });
            $('.colorFilterOption').each(function() {
                if ($(this).is(":checked")) {
                    color.push($(this).val());
                    $('#selectedFilterArea').append(
                        '<span style="font-size:11px;margin-left:5px;margin-right:5px;border:1px solid #dcdcdc;border-radius:5px; background-color:#ececec; padding:5px;margin:5px;clear:both;" class="pull-left;">' +
                        '' + $(this).attr('data-selectedValue') +
                        // $(this).attr('data-selectedsection') + ': ' + $(this).attr('data-selectedValue') +
                        ' <a href="javascript:void(0);" onclick="document.getElementById(\'' + $(this).attr(
                            'data-selectedId') +
                        '\').checked=false;filterTheProducts();return false;"><i class=" text-danger fa fas fa-times"></i></a></span>'
                    );
                }
            });
            $('.sizeFilterOption').each(function() {
                if ($(this).is(":checked")) {
                    size.push($(this).val());
                    $('#selectedFilterArea').append(
                        '<span style="font-size:11px;margin-left:5px;margin-right:5px;border:1px solid #dcdcdc;border-radius:5px; background-color:#ececec; padding:5px;margin:5px;clear:both;" class="pull-left;">' +
                        '' + $(this).attr('data-selectedValue') +
                        // $(this).attr('data-selectedsection') + ': ' + $(this).attr('data-selectedValue') +
                        ' <a href="javascript:void(0);" onclick="document.getElementById(\'' + $(this).attr(
                            'data-selectedId') +
                        '\').checked=false;filterTheProducts();return false;"><i class=" text-danger fa fas fa-times"></i></a></span>'
                    );
                }
            });
            $('.filterOptBox').each(function() {
                if ($(this).is(":checked")) {
                    filters.push({
                        label: $(this).attr('data-filterlabel'),
                        value: $(this).attr('data-filtervalue'),
                        masterid: $(this).attr('data-masterid'),
                        masterval: $(this).attr('data-masterval')
                    });
                    $('#selectedFilterArea').append(
                        '<span style="font-size:11px;margin-left:5px;margin-right:5px;border:1px solid #dcdcdc;border-radius:5px; background-color:#ececec; padding:5px;margin5px;" class="pull-left;">' +
                        $(this).attr('data-selectedsection') + ': ' + $(this).attr('data-selectedValue') +
                        ' <a href="javascript:void(0);" onclick="document.getElementById(\'' + $(this).attr(
                            'data-selectedId') +
                        '\').checked=false;filterTheProducts();return false;"><i class=" text-danger fa fas fa-times"></i></a></span>'
                    );
                }
            });
            if (cats.length > 0) {
                qs += '&categories=' + cats.join(',');
            }
            if (color.length > 0) {
                qs += '&color=' + color.join(',');
            }
            if (size.length > 0) {
                qs += '&size=' + size.join(',');
            }
            if (cats.length > 0 || filters.length > 0) {
                $(".filterZone").show();
            } else {
                $(".filterZone").hide();
            }
                //alert(filters);
            $.post(route + qs, {
                _token: document.tokenForm._token.value,
                filters: filters,
                //filter_ajax :1
                page: page
            }, function(result) {    
                //alert(resu);           
                if (result.tempProducts.length > 0) {                    
                    for (var i = 0; i < result.tempProducts.length; i++) {
                        $(".productDataContainer").append('<div class="col-md-3 col-sm-6 col-xs-12">' + result
                            .tempProducts[i] + '</div>');
                    }
                    hideLoader();
                    if (scrolltop) {
                        goToTopZone();
                    } else {
                        stopLoading = false;
                    }
                } else {
                    stopLoading = true;
                    hideLoader();
                    if (scrolltop) {
                        $(".productDataContainer").html('<div class="alert alert-warning">No product found!</div>');
                        $(".startLoading").html('<div class="alert alert-info">All products loaded!</div>');
                        goToTopZone();
                    }
                }
                return false;
            });
        }

        function loadMoreProducts() {
            if (stopLoading == false) {
                filterTheProducts(pg);
                pg++;
            }
        }

        $(window).scroll(function() {
            var hT = $('.startLoading').offset().top,
                hH = $('.startLoading').outerHeight(),
                wH = $(window).height(),
                wS = $(this).scrollTop();
                // $('.startLoading').html('hH: ' + hH + ', hT: ' + hT + ', wH: ' + wH + ', wS:' + wS);
            if (wS > (hT + hH - wH)) {
                loadMoreProducts();
            }
            //
            var hT1 = $('.endOfFilter').offset().top,
                hH1 = $('.endOfFilter').outerHeight(),
                wH1 = $(window).height(),
                wS1 = $(this).scrollTop();
            if (wS1 > (hT1 + hH1 - wH1)) {
                $('.leftFilterSection, .rightProductSection').addClass('posFixed');
                $('.leftFilterSection, .rightProductSection').css('z-index', 9999);
            } else {
                $('.leftFilterSection, .rightProductSection').removeClass('posFixed');
                $('.leftFilterSection, .rightProductSection').css('z-index', 100);
            }
        });

        function goToTopZone() {
            // window.location.href='#product-listing-area';
            goToTop();
        }
        goToTopZone();
    </script>
@endsection