@extends('layouts.web_app')
@section('head')

	
@endsection
@section('breadcrumb')
<!-- CONTENT + SIDEBAR -->
<!-- <div class="tt-breadcrumb">
   <div class="container">
    <ul>
        <li><a href="{{route('frontpage')}}">Home</a></li>
        <li>Product List</li>
    </ul>
  </div>
</div> -->
@endsection
@section('content')
<div class="container-fluid" ng-init="getcategoryandsubcategory();getquantitytype()" ng-cloak>
        <div class="row">
                <input type="text" id="searchkeywordList" value="{{ $searchkeyword }}" hidden>
                <div class="col-md-4 col-lg-3 col-xl-3 leftColumn aside">
                    <div class="tt-btn-col-close">
                        <a href="#">Close</a>
                    </div>
                    <div class="tt-collapse open tt-filter-detach-option">
                        <div class="tt-collapse-content">
                            <div class="filters-mobile">
                                <div class="filters-row-select">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tt-collapse open ">
                        <h3 class="tt-collapse-title">SORT BY</h3>
                        <div class="tt-collapse-content">
                            <ul class="tt-filter-list">
                                <li id="LH">
                                    <a style="cursor: pointer" ng-click="filterbyprice('LH')">Low to High </a>
                                </li>
                                <li id="HL">
                                    <a style="cursor: pointer" ng-click="filterbyprice('HL')">High to Low</a>
                                </li>
                                <li id="AL">
                                    <a style="cursor: pointer" ng-click="filterbyprice('AL')">Alpha</a>
                                </li>
                            </ul>
                            <a href="#"  ng-click="clearallfilter()" class="btn-link-02">Clear All</a>
                        </div>
                    </div>
                    <div class="tt-collapse open">
                        <h3 class="tt-collapse-title">FILTER BY PRICE</h3>
                        <div class="tt-collapse-content">
                            <input type="text" id="min_price" name="min_price" ng-change="filterbyprice('AL')" ng-model= "search.min_price" value="" data-min="10" placeholder="Min price" />
                            <input type="text" id="max_price" name="max_price" ng-blur="filterbyprice('AL')" ng-model = "search.max_price" value="" data-max="100" placeholder="Max price" />
                        </div>
                    </div>
                    <div class="tt-collapse open">
                        <h3 class="tt-collapse-title">PRODUCT CATEGORIES</h3>
                        <div class="tt-collapse-content" ng-repeat="category in categorylist track by $index">
                            <ul class="tt-list-row">
                                <li><a href="#">
                                    <span><img width="25px" ng-src="{$ 'assets/category/'+category.icon_url $}" onerror="this.src='images/default_product.png' "></span>
                                    <span id="category_{$category.id$}" ng-click="shopbysearch(category.name)" class="iconmenu">{$category.name$}</span>
                                    <span ng-if="category.count > '0'" >({$category.count$})</span>
                                    </a>
                                </li>
                            </ul>
                             <div id="collapse{$category.id$}"  ng-if="category.subcategorylist.length != '0'" class="panel-collapse collapse">
                                <ul>
                                    <div ng-repeat="subcategoryid in category.subcategorylist track by $index" >
                                    <li ng-repeat="subcategory in subcategorylist track by $index" ng-if="subcategoryid.sub_category_id == subcategory.id" class="cat-item"><a href="javascript:void(0)" ng-click="searcybycategory(subcategory.name)">{$subcategory.name$}</a> <span ng-if="subcategory.count != '0'" >({$subcategory.count$})</span></li>
                                    </div>
                                </ul>                                       
                            </div>
                        </div>
                    </div>
                  <!--   <div class="tt-content-aside">
                         <div class="text-box">
                            <h4 class="title-3 fsz-14 blklt-clr"> FREE SHIPPING. FREE RETURN. </h4>
                            <h4 class="sec-title fsz-20 blklt-clr"> ALL THE TIME </h4>
                         </div>
                    </div> -->
                </div>
                <div class="col-md-12 col-lg-9 col-xl-9">
 


                    <div class="content-indent container-fluid-custom-mobile-padding-02">
                        <div class="tt-product-listing row">
                            <div class="col-12 col-sm-6 col-md-4 col-lg-3 tt-col-item" ng-repeat="product in productlist">
                                <div class="tt-product thumbprod-center">

                                     <div class="off  "> <span ng-if="product.discount > 0" class="tt-label-location">
                        <span class="tt-label-sale row">GET {$product.discount$}% OFF<img style="height:12px;width:12px" src="images/8-pointed-star.gif"></span>
                    </span> </div>

                                    <div class="tt-image-box">
                                        <a href="#" class="tt-btn-quickview" data-toggle="modal"  data-tooltip="Quick View" data-tposition="left" ng-click="getprod(product)"></a>
                                        <a href="#" class="tt-btn-wishlist" data-tooltip="Add to Wishlist" ng-if="product.wishlistid == undefined" ng-click="addtowishlist('add',product)" data-tposition="left"></a>
                                        <a href="#" class="tt-btn-wishlist" data-tooltip="Remove From Wishlist" ng-click="removewishlistitem(product)" ng-if="product.wishlistid != undefined" data-tposition="left"></a>
                                        <a href="#">
                                            <span class="tt-img"><img ng-src="{$ 'assets/products'+product.display_image $}" ng-click="detailview(product)" alt="" onerror="this.src='images/default_product.png' "></span>
                                            <span class="tt-img-roll-over"><img ng-src="{$ 'assets/products'+product.display_image $}" ng-click="detailview(product)" alt="" onerror="this.src='images/default_product.png' "></span>
                                          <!--   <span ng-if="product.discount > 0" class="tt-label-location">
                                                <span class="tt-label-sale">GET {$product.discount$}% OFF</span>
                                            </span> -->
                                        </a>
                                    </div>
                                    <div class="tt-description">
                                        
                                        <h2 class="tt-title"><a href="#" ng-click="detailview(product)">{$product.product_name$}</a></h2>
                                        <div class="tt-price" ng-if="product.actual_selling_amount > 0">
                                            <span style="font-size: small;font-weight: 100;" ng-if="product.actual_selling_amount > 0" class="old-price">SAR {$product.price$}</span>
                                            <span>SAR {$product.actual_selling_amount$} ({$product.quantity$} {$product.product_quantity.display_name$})
                                            </span>
                                        </div>
                                        <div class="tt-price" ng-if="product.actual_selling_amount == 0">
                                            <span>SAR {$product.price$} ({$product.quantity$} {$product.product_quantity.display_name$})</span>
                                        </div>
                                        <p class="no-margin {$product.product_price[0].market_price > 0 ? 'visible':'invisible'$}">Other Market Price - SAR {$product.product_price[0].market_price$}</p>
                                        <div class="tt-row">
                                            <div class="tt-rating">
                                                <i class="icon-star" ng-class="(1 <= product.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                                <i class="icon-star" ng-class="(2 <= product.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                                <i class="icon-star" ng-class="(3 <= product.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                                <i class="icon-star" ng-class="(4 <= product.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                                <i class="icon-star" ng-class="(5 <= product.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="tt-row-btn no-margin">
                                                <div class="tt-wrapper">
                                                    <div class="tt-row-custom-01 row">
                                                        <div class="col-12 col-md-5">
                                                            <div class="tt-input-counter style-01 small">
                                                                <span class="minus-btn" ng-click="cartqunatitychange(product,'0','list')"></span>
                                                                <input type="text" ng-model="product.cartquantity" ng-change="cartqunatitychange(product,'2','list')" value="1" size="5" class="small">
                                                                <span class="plus-btn" ng-click="cartqunatitychange(product,'1','list')"></span>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-md-7" ng-if="product.cartid == undefined" ng-click="addtocart(product)">
                                                            <button class="btn btn-xs cart-btn"><i class="icon-f-39"></i>ADD TO CART</button>
                                                        </div>
                                                        <div class="col-12 col-md-7" ng-if="product.cartid != undefined" ng-click="removecartitem(product)">
                                                            <button style="background-color:#f44336" class="btn btn-danger cart-btn"><i class="icon-h-02"></i>REMOVE CART</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tt-row-btn no-margin">
                                                <a href="#" class="tt-btn-quickview" data-toggle="modal" ng-click="getprod(product)"></a>
                                                <a href="#" class="tt-btn-wishlist" data-tooltip="Add to Wishlist" ng-if="product.wishlistid == undefined" ng-click="addtowishlist('add',product)" data-tposition="left"></a>
                                                <a href="#" class="tt-btn-wishlist" data-tooltip="Remove From Wishlist" ng-click="removewishlistitem(product)" ng-if="product.wishlistid != undefined" data-tposition="left"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-center tt_product_showmore">
                            <button ng-if="!reachLast" ng-click="searchscroll()" class="btn btn-border">LOAD MORE</button>
                            {$loadmore$}
                            <!-- <div class="tt_item_all_js" ng-if="reachLast">
                                <a href="#" class="btn btn-border01">NO MORE ITEM TO SHOW</a>
                            </div> -->
                        </div>
                    </div>
                </div>
</div>
</div>
        
 <style>
 .active {
  color: #28a745;
}
.col-md-4.col-lg-3.col-xl-3.leftColumn.aside {
    margin-left: 0px;
    margin-top: 26px;
    box-shadow: 0 0 9px #b6b6b6;
    margin-bottom: 40px;
}
</style>     

        
       

  @include('customer.footer')

    

	@endsection

    @section('js')  
                        
@endsection