@extends('layouts.welcomelayouts.app')
@section('title')
<title>{{$seller->title}} - {{$appSetting->h1}} | {{$appSetting->slogan}}</title>
@endsection
@section('SEO')
<meta name="description" content="{!!$appSetting->meta_description!!}">
<meta name="keywords" content="{{$appSetting->meta_keyword}}">
<meta property="og:title" content="{{$appSetting->h1}} {{$appSetting->slogan}}">
<meta property="og:description" content="{!!$appSetting->meta_description!!}">
<meta property="og:image" content="{asset($appSetting->logo())}}">
<meta property="og:url" content="{{ route('welcome.vendorShop', [$seller,new_slug($seller->title)]) }}">
@endsection
@push('css')
<style>
    .shop-main-body {
    margin: 10px 0;
    }
    
    .shop-products {
    margin: 10px 0;
    }
    .shop-sidebar {
    background: white;
    min-height: 500px;
    }
    .shop-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .shop-sidebar ul li a {
    text-decoration: none;
    color: #4e4e4e;
    padding: 5px 10px;
    border-bottom: 1px solid #eaeded;
    display: block;
    }
    .shop-sidebar ul li a:hover {
    background: #4e71b9;
    color: white;
    }
    @media only screen and (max-width: 770px) {
        .shop-sidebar{
            display:none;
        }
        .sellerallproducts{
            padding:0;
        }
    }
</style>
@endpush
@section('contents')

<div class="container">
    <div class="shop-main-body">
    <center style="background-image: url({{asset('welcome_asset/images/shop.png')}});height: 120px;padding: 15px;">
    <p style="font-size: 25px;color: white;text-transform: uppercase;">{{$seller->title}}</p>
    <span style="background: #ffffff;padding: 5px 10px;border-radius: 5px;font-weight: bold;">{{App\Model\Product::where('active', true)->where('seller_id',$seller->id)->latest()->count()}} Products</span>
    </center>
    
    <div class="shop-products">
        <div class="row" style="margin:0;">
            <div class="col-md-3">
                <div class="shop-sidebar">
                    <ul>
                        <li style="padding: 5px 10px;background: #4592c1;color: white;font-size: 18px;font-weight: bold;">CATEGORIES</li>
                        @foreach($cates as $ca)
                        <li>
                            <a href="{{ route('welcome.productCategory',[$ca,new_slug($ca->title)]) }}">{{ $ca->title }}</a>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="col-md-9 sellerallproducts">
                        <div class="row" style="margin:0;">
            
            @foreach($products as $product)
            <div class="col-4 col-lg-3 col-md-3 col-sm-4" style="padding: 5px;">
            @include('welcome.products.include.productCard')
            </div>
            @endforeach

        </div>
        
        {{$products->links()}}
            </div>
        </div>
    
    </div>
    </div>
</div>

@endsection
@push('js')

@endpush