@extends('layout.layout')
@section('meta')
    @include('layout.partials.seo', [
        'title' =>  $SubCategory->meta_title,
        'description' => $SubCategory->meta_description,
        'keywords' => $SubCategory->keywords,
        'image' => $SubCategory->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::SUB_CATEGORY_BANNER_MEDIA_PATH, 'webp')['url'],
        'schema' => $SubCategory->schema
    ])
@endsection
@section('content')
<main class="main">
    <div class="page-header text-center"
         style="background: url({{$SubCategory->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::SUB_CATEGORY_BANNER_MEDIA_PATH , 'webp')['url']}}) no-repeat center top/cover;"
         title="{{$SubCategory->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::SUB_CATEGORY_BANNER_MEDIA_PATH)['title']}}"
         role="img"
         aria-label="{{$SubCategory->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::SUB_CATEGORY_BANNER_MEDIA_PATH)['alt']}}"
    >
        <div class="container">
            <h1 class="page-title">{{$SubCategory->heading}}
            <span>
            {!!$SubCategory->description!!}
            </span>
            </h1>
        </div>
    </div>
    <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('general.home') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('allcategory') }}">{{json_decode($settings['category_title'])->{app()->getLocale()} }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{$SubCategory->name}}</li>
            </ol>
        </div>
    </nav>
    <div class="mb-2"></div>
    <div class="page-content">
        <div class="container">
            <div class="row">
                <div class="col-lg-9">

                    <div class="toolbox">
                        <div class="toolbox-left">
                            <div class="toolbox-info">
                                {{ __('product.showing') }}<span>({{$SubCategory->products()->count()}})</span> {{ __('product.products') }}
                            </div>
                            <div class="toolbox-right">
                                <div class="toolbox-sort">
                                    <label for="sortby">{{ __('product.sort_by') }}:</label>
                                    <div class="select-custom">
                                        <form action="{{route('subCategory',$SubCategory->slug)}}" method="get">
                                            <select id="sortBy" class="form-control" onchange="this.form.submit();" role="form" name="sortBy">
                                                @if (request()->get("sortBy") == null)
                                                    <option value="" selected disabled>Select</option>
                                                @endif
                                                {{--                                                                <option  readonly=""> Sort By </option>--}}
                                                <option value="All" {{session()->get('All')?'selected' :''}}>{{__('product.all')}}</option>
                                                <option value="Newestontop" {{session()->get('Newestontop')?'selected' :''}}>{{__('product.newest_on_top')}}</option>
                                                <option value="Oldestontop" {{session()->get('Oldestontop')?'selected' :''}}>{{__('product.oldest_on_top')}}</option>
                                                <option value="PriceLowtoHigh" {{session()->get('PriceLowtoHigh')?'selected' :''}}>{{__('product.price_low_to_high')}}</option>
                                                <option value="PriceHightoLow" {{session()->get('PriceHightoLow')?'selected' :''}}>{{__('product.price_high_to_low')}}</option>
                                            </select>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="products mb-3">
                        <div class="row">
                            @foreach ($products as $product)
                            <div class="col-md-4 col-lg-4 col-6">
                            @include('layout.partials.product-box',['product' => $product,'style' => 'product'])
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="row">
                    <div class="col-12 d-flex">
                    <nav aria-label="Page navigation" class="style_pagination">
                    {!!$products->withQueryString()->onEachSide(2)->links() !!}
                    </nav>
                    </div>
                    </div>
                </div>
                <aside class="col-lg-3 order-lg-first">
                    <div class="sidebar sidebar-shop">
{{--                        @if($product->brands->count() > 0)--}}
{{--                        <div class="widget widget-collapsible">--}}
{{--                            <h3 class="widget-title">--}}
{{--                                <a data-toggle="collapse" href="#widget-1" role="button" aria-expanded="true" aria-controls="widget-1">--}}
{{--                                    {{ __('general.our_brand') }}--}}
{{--                                </a>--}}
{{--                            </h3><!-- End .widget-title -->--}}

{{--                            <div class="collapse show" id="widget-1">--}}
{{--                                <div class="widget-body">--}}
{{--                                    <div class="filter-items filter-items-count">--}}
{{--                                        @foreach($products as $product)--}}
{{--                                        @foreach ($product->brands as $brand)--}}
{{--                                        <div class="filter-item">--}}
{{--                                            <a href="{{route('brands.product',$brand->slug)}}" title="{{$brand->name}}">--}}
{{--                                            <div class="custom-control custom-checkbox">--}}
{{--                                                <label class="custom-control-label" for="cat-1">{{$brand->name}}</label>--}}
{{--                                            </div><!-- End .custom-checkbox -->--}}
{{--                                            <span class="item-count">{{$brand->products()->count()}}</span>--}}
{{--                                        </div><!-- End .filter-item -->--}}
{{--                                        </a>--}}
{{--                                        @endforeach--}}
{{--                                        @endforeach--}}
{{--                                    </div><!-- End .filter-items -->--}}
{{--                                </div><!-- End .widget-body -->--}}
{{--                            </div><!-- End .collapse -->--}}
{{--                        </div>--}}
{{--                        @endif--}}
                       @if($product->tags->count() > 0)
                        <div class="widget">
                            <h3 class="widget-title">{{ __('product.tags') }}:</h3>
                            <div class="tagcloud">
                            @foreach($products as $product)
                            @foreach ($product->tags as $tag)
                                <a href="{{route('tags',$tag->slug)}}">{{$tag->name}}</a>
                            @endforeach
                            @endforeach
                            </div>
                        </div>
                        @endif
                    </div>
                </aside>
            </div>
        </div>
    </div>
</main>
@include('layout.partials.faq')
@include('layout.partials.news_letter')
@endsection