@extends('shop.skele')

@section('shop_title')
    Shop
@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">All Products</li>
                    </ul>
                </div>
            </div>
        </div>
    </div> <!-- ::::::  End  Breadcrumb Section  ::::::  -->

    <!-- ::::::  Start  Main Container Section  ::::::  -->
    <main id="main-container" class="main-container">
        <div class="container">
            <div class="row flex-column-reverse flex-lg-row">
                <!-- Start Leftside - Sidebar -->
                <div class="col-lg-3">

                    <div class="sidebar">
                        <!-- Start Single Sidebar Widget -->
                        <div class="sidebar__widget gray-bg">
                            <div class="sidebar__box">
                                <h5 class="sidebar__title">Gadgets</h5>
                            </div>
                            @foreach($categories as $category)
                            <ul class="sidebar__menu-collapse">

                                <li class="sidebar__menu-collapse-list">
                                    <div class="accordion">
                                        <a href="{{url('category-products/'.$category->id)}}" class="accordion__title" data-toggle="collapse" data-target="#{{$category->category.$loop->index}}">
                                            {{$category->category}} <i class="icon-chevron-down"></i>
                                        </a>
                                        <div id="{{$category->category.$loop->index}}" class="collapse">
                                                <ul class="accordion__category-list">
                                                    @foreach($category->subcategory as $subcat)
                                                        <li><a href="{{url('subcategory-products/'.$subcat->id)}}">{{$subcat->sub_category}}</a></li>
                                                    @endforeach
                                                </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            @endforeach
                        </div>  <!-- End Single Sidebar Widget -->

                        <!-- ::::::  Start banner Section  ::::::  -->
                        <div class="sidebar__widget banner">
                            <div class="row">
                                <div class="col-12">
                                    <div class="banner__box">
                                        <a href="#" class="banner__link">
                                            <img src="{{asset('shopfiles/img/banner/banner-shop-1-img-2.jpg')}}"  alt="" class="banner__img">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- ::::::  End banner Section  ::::::  -->
                    </div>


                </div>  <!-- End Left Sidebar -->

                <!-- Start Rightside - Content -->
                <div class="col-lg-9">
                    <!-- ::::::  Start banner Section  ::::::  -->
                    <div class="banner">
                        <div class="row">
                            <div class="col-12">
                                <div class="banner__box">
                                    @if($advert1)
                                    <a href="{{$advert1->url ?? '#'}}" class="banner__link">
                                        <img src="{{asset('advertpics/'.$advert1->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">
                            <div class="sort-box__tab">
                                <ul class="sort-box__tab-list nav">
                                    <li><a class="sort-nav-link active" data-toggle="tab" href="#sort-grid"><i class="icon-grid"></i>  </a></li>
                                    <li><a class="sort-nav-link" data-toggle="tab" href="#sort-list"><i class="icon-list"></i></a></li>
                                </ul>
                            </div>
                            <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
                                <!-- End Single Default Product -->
                            </div>
                            <div class="tab-pane shop-list" id="sort-list">
                                <!-- Start Single List Product -->
                                @foreach($products as $product)
                                    <div class="product__box product__box--list">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <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>

                                            </div>
                                        </div>
                                        <div class="col-md-5 pos-relative">
                                            <div class="border-right pos-absolute"></div>
                                            <div class="product__price">
                                                @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 class="product__desc m-t-25 m-b-30">
                                                <p>{!! $product->description !!}</p>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div>
                                                <ul class="shop__list-link">
                                                    <livewire:add-to-cart :product="$product" />
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

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

            </div>
        </div>
    </main> <!-- ::::::  End  Main Container Section  ::::::  -->

@endsection