@extends('shop.skele')

@section('shop_title')
    {{$categoryInfo->category}} Products
@endsection

@section('shop_content')
    <div class="page-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <ul class="page-breadcrumb__menu">
                        <li class="page-breadcrumb__nav"><a href="#">Home</a></li>
                        <li class="page-breadcrumb__nav active">{{$categoryInfo->category}} Products</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <main id="main-container" class="main-container">
        <div class="container">
            <div class="row">
                <!-- Start Rightside - Content -->
                <div class="col-12">
                    <!-- ::::::  Start banner Section  ::::::  -->
                    <div class="banner">
                        <div class="row">
                            <div class="col-12">
                                <div class="banner__box">
                                    @if($bigBanner)
                                        <a href="{{$bigBanner->url ?? '#'}}" class="banner__link">
                                            <img src="{{asset('advertpics/'.$bigBanner->advert)}}"  alt="{{asset('shopfiles/img/banner/banner-shop-1-img-1.jpg')}}" class="banner__img">
                                        </a>
                                    @else
                                        <a href="#" class="banner__link">
                                            <img src="{{asset('shopfiles/img/banner/banner-shop-1-img-1.jpg')}}"  alt="{{asset('shopfiles/img/banner/banner-shop-1-img-1.jpg')}}" class="banner__img">
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div> <!-- ::::::  End banner Section  ::::::  -->

                    <!-- ::::::  Start Sort Box Section  ::::::  -->
                    <div class="sort-box m-tb-30">
                        <!-- Start Sort Left Side -->
                        <div class="sort-box__left">

                            <span>There Are {{$products->count()}} Products.</span>
                        </div> <!-- Start Sort Left Side -->

                        {{--<div class="sort-box__right">
                            <span>Sort By:</span>
                            <div class="sort-box__option">
                                <label class="select-sort__arrow">
                                    <select name="select-sort" class="select-sort">
                                        <option value="1">Relevance</option>
                                        <option value="2">Name, A to Z</option>
                                        <option value="3"> Name, Z to A </option>
                                        <option value="4"> Price, low to high</option>
                                        <option value="5">Price, high to low</option>
                                    </select>
                                </label>
                            </div>
                        </div>--}}
                    </div> <!-- ::::::  Start Sort Box Section  ::::::  -->

                    <div class="product-tab-area">
                        <div class="tab-content ">
                            <div class="tab-pane show active clearfix" id="sort-grid">
                                <!-- Start Single Default Product -->
                                @foreach($products as $product)
                                <div class="product__box product__box--default product__box--border-hover text-center float-left float-3">
                                    <div class="product__img-box">
                                        <a href="{{url('product-info/'.$product->id)}}" class="product__img--link">
                                            <img class="product__img" src="{{asset('prodimages/thumbnails/'.$product->thumbnail)}}" alt="{{asset('shopfiles/img/product/size-normal/product-home-1-img-1.jpg')}}">
                                        </a>

                                        <livewire:add-to-cart :product="$product" />
                                    </div>
                                    <div class="product__price m-t-10">
                                        @if($product->on_promotion)
                                            <span class="product__price-del">${{$product->price}}</span>
                                            <span class="product__price-reg">${{$product->discounted_price}}</span>
                                        @else
                                            <span class="product__price-reg">${{$product->price}}</span>
                                        @endif
                                    </div>
                                    <a href="{{url('product-info/'.$product->id)}}" class="product__link product__link--underline product__link--weight-light m-t-15">
                                        {{$product->name}}
                                    </a>
                                </div>
                                @endforeach

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

                    <div class="page-pagination">
                        <span>{{ $products->links('shop.partials.pagination') }}</span>
                    </div>
                </div>  <!-- Start Rightside - Content -->
            </div>
        </div>
    </main>

@endsection