@extends('front.index')

@section('meta_title'){{trans('front.Categories')}}  @endsection
@section('meta_des'){{trans('front.Categories')}}   @endsection
@section('meta_key'){{trans('front.Categories')}}   @endsection

@section('content')
    <div class="ps-breadcrumb">
        <div class="ps-container">
            <ul class="breadcrumb">
                <li><a href="{{route('front.home')}}">{{trans('front.home')}}</a></li>
                <li>{{trans('front.Categories')}}</li>
            </ul>
        </div>
    </div>
    <br>
    <div class="ps-page--shop">

        <div class="ps-container">


            <div class="ps-layout--shop">
                <div class="ps-layout__left">
                    <aside class="widget widget_shop">
                        <h4 class="widget-title">{{trans('front.Categories')}}</h4>
                        <ul class="ps-list--categories">
                            @if($categories->count()>0)
                                @foreach($categories as $category)
                            <li class="current-menu-item menu-item-has-children">
                                <a href="{{route('front.categories',['cate='.$category->id])}}">{{$category->name}}</a>
                                <span class="sub-toggle"><i class="fa fa-angle-down"></i></span>
                                <ul class="sub-menu">

                                    @if(@$category->Subcategories->count()>0)
                                        @foreach(@$category->Subcategories as $value)
                                            <li class="current-menu-item "><a href="{{route('front.categories',['cate='.$value->category_id.'&sub='.$value->id])}}">{{$value->name}}</a>
                                            </li>
                                        @endforeach
                                    @else
                                                {{trans('front.noData')}}

                                    @endif
                                </ul>
                            </li>
                                @endforeach
                                    @else

                                                {{trans('front.noData')}}

                                    @endif
                        </ul>
                    </aside>
                    <aside class="widget widget_shop">
                        <h4 class="widget-title">{{trans('front.BY-BRANDS')}}</h4>
                        <form >



                        <figure class="ps-custom-scrollbar" data-height="250">

                            @if($brands->count()>0)
                                @foreach($brands as $brand)
                            <div class="ps-checkbox">
                                <input class="form-control" type="checkbox" id="brand-{{$brand->id}}" value="{{$brand->id}}" name="brand[]">
                                <label for="brand-{{$brand->id}}">{{$brand->name}} ({{$brand->products_count}})</label>
                            </div>
                                @endforeach
                            @else

                                {{trans('front.noData')}}

                            @endif

                        </figure>
                            <button class="ps-btn">{{trans('front.Submit')}}</button>

                        </form>


                    </aside>
                </div>
                <div class="ps-layout__right">

                    <div class="ps-shopping ps-tab-root">
                        <div class="ps-shopping__header">
                            <p><strong> {{$products->total()}}</strong> {{trans('front.Products-found')}}</p>

                        </div>
                        <div class="ps-tabs">
                            <div class="ps-tab active" id="tab-1">
                                <div class="ps-shopping-product">
                                    <div class="row">


                                        @if($products->count()>0)
                                            @foreach($products as $product )
                                                @php
                                                    $dbState=0;

                                                if(empty(@$product->StarRating['avarage'])){
                                                $dbState = $product->stars;
                                                }else{ $dbState = @$product->StarRating['avarage'];}
                                                @endphp
                                                <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6 ">
                                                    <div class="ps-product">
                                                        <div class="ps-product__thumbnail">

                                                            <a href="{{route('front.product',[$product->id,$product->name])}}">
                                                                <img src="{{asset('uploads/products/')}}/{{$product->image_main}}" alt="{{$product->name}}">
                                                            </a>
                                                            <div class="ps-product__badge">{{$product->discount}}%</div>
                                                            <ul class="ps-product__actions">
                                                                <li><a href="{{route('front.product',[$product->id,$product->name])}}" data-toggle="tooltip" data-placement="top" title="{{trans('front.ReadMore')}}"><i class="icon-bag2"></i></a></li>
                                                                <li><a href="{{route('front.product',[$product->id,$product->name])}}" data-toggle="tooltip" data-placement="top" title="{{trans('front.QuickView')}}"><i class="icon-eye"></i></a></li>
                                                                <li><a href="{{route('front.favorites.store',[$product->id])}}" data-toggle="tooltip" data-placement="top" title="{{trans('front.AddtoWhishlist')}}"><i class="icon-heart"></i></a></li>
                                                            </ul>
                                                        </div>
                                                        <div class="ps-product__container"><a class="ps-product__vendor" href="{{route('front.vendor',[@$product->vendor_id])}}">{{@$product->Vendor->UserVendors[0]->name}}</a>
                                                            <div class="ps-product__content"><a class="ps-product__title" href="{{route('front.product',[$product->id,$product->name])}}">{{$product->name}}</a>
                                                                <div class="ps-product__rating">
                                                                    <select class="ps-rating" data-read-only="true">
                                                                        <option value="1" @if(@$dbState ==1) selected @endif>1</option>
                                                                        <option value="2" @if(@$dbState ==2) selected @endif>2</option>
                                                                        <option value="3" @if(@$dbState ==3) selected @endif>3</option>
                                                                        <option value="4" @if(@$dbState ==4) selected @endif>4</option>
                                                                        <option value="5" @if(@$dbState ==5) selected @endif>5</option>
                                                                    </select><span>{{$product->CountProductReviews}}</span>
                                                                </div>
                                                                <p class="ps-product__price sale">{{$product->price_after_discount}} <del>{{$product->price}}</del></p>
                                                            </div>
                                                            <div class="ps-product__content hover"><a class="ps-product__title" href="{{route('front.product',[$product->id,$product->name])}}">{{$product->name}}</a>
                                                                <p class="ps-product__price sale">{{$product->price_after_discount}} <del>{{$product->price}}</del></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else

                                            {{trans('front.noData')}}

                                        @endif

                                    </div>
                                </div>
                                <div class="ps-pagination">
                                    <ul class="pagination">
                                        @if($products->count()>0)
                                            {{$products->appends(\Request::except('_token'))->render()}}
                                        @endif
                                    </ul>
                                </div>
                            </div>
                            <div class="ps-tab" id="tab-2">

{{--                                <div class="ps-shopping-product">--}}
{{--                                    <div class="ps-product ps-product--wide">--}}
{{--                                        <div class="ps-product__thumbnail"><a href="product-default.html"><img src="img/products/shop/1.jpg" alt=""></a>--}}
{{--                                        </div>--}}
{{--                                        <div class="ps-product__container">--}}
{{--                                            <div class="ps-product__content"><a class="ps-product__title" href="product-default.html">Apple iPhone Retina 6s Plus 64GB</a>--}}
{{--                                                <p class="ps-product__vendor">Sold by:<a href="#">ROBERT’S STORE</a></p>--}}
{{--                                                <ul class="ps-product__desc">--}}
{{--                                                    <li> Unrestrained and portable active stereo speaker</li>--}}
{{--                                                    <li> Free from the confines of wires and chords</li>--}}
{{--                                                    <li> 20 hours of portable capabilities</li>--}}
{{--                                                    <li> Double-ended Coil Cord with 3.5mm Stereo Plugs Included</li>--}}
{{--                                                    <li> 3/4″ Dome Tweeters: 2X and 4″ Woofer: 1X</li>--}}
{{--                                                </ul>--}}
{{--                                            </div>--}}
{{--                                            <div class="ps-product__shopping">--}}
{{--                                                <p class="ps-product__price">$1310.00</p><a class="ps-btn" href="#">Add to cart</a>--}}
{{--                                                <ul class="ps-product__actions">--}}
{{--                                                    <li><a href="#"><i class="icon-heart"></i> Wishlist</a></li>--}}
{{--                                                    <li><a href="#"><i class="icon-chart-bars"></i> Compare</a></li>--}}
{{--                                                </ul>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="ps-pagination">--}}
{{--                                    <ul class="pagination">--}}
{{--                                       --}}
{{--                                    </ul>--}}
{{--                                </div>--}}

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal" id="shop-filter-lastest" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="list-group"><a class="list-group-item list-group-item-action" href="#">Sort by</a><a class="list-group-item list-group-item-action" href="#">Sort by average rating</a><a class="list-group-item list-group-item-action" href="#">Sort by latest</a><a class="list-group-item list-group-item-action" href="#">Sort by price: low to high</a><a class="list-group-item list-group-item-action" href="#">Sort by price: high to low</a><a class="list-group-item list-group-item-action text-center" href="#" data-dismiss="modal"><strong>Close</strong></a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection