@extends('layouts.frontend')
@section('content')
 <div class="ps-page--single">
        <div class="ps-breadcrumb">
            <div class="container">
                <ul class="breadcrumb">
                    <li><a href="{{ route('welcome') }}">Home</a></li>
                    <li>Vendor Store</li>
                </ul>
            </div>
        </div>
        <div class="ps-vendor-store">
            <div class="container">
                <div class="ps-section__container">
                    <div class="ps-section__left">
                        <div class="ps-block--vendor">
                            <div class="ps-block__thumbnail">
                            @if($vendor->profile_photo_path != "" || $vendor->profile_photo_path != Null) 
                            <img src="{{ asset("storage/profile-photos/$vendor->profile_photo_path")}}" alt="">
                            @else
                             <img src="{{ asset("storage/profile-photos/default-store-profile.png")}}" alt="">
                             @endif
                            </div>
                            <div class="ps-block__container">
                                <div class="ps-block__header">
                                    <h4>{{ $vendor->name}}</h4>
                                    <select class="ps-rating" data-read-only="true">
                                        <option value="1">1</option>
                                        <option value="1">2</option>
                                        <option value="1">3</option>
                                        <option value="1">4</option>
                                        <option value="2">5</option>
                                    </select>
                                    <p><strong>85% Positive</strong> (562 rating)</p>
                                </div><span class="ps-block__divider"></span>
                                <div class="ps-block__content">
                                    <p> {{ $vendor->about}}</p>
                                    <figure>
                                     @if($vendor->facebook != '' || $vendor->website != '' || $vendor->linkedin != '' || $vendor->whatsapp != '' || $vendor->twitter != '' )
                                    <figcaption>Follow us on social</figcaption>
                                    <ul class="ps-list--social-color"> 
                                        @if($vendor->facebook != '')
                                       <li> <a class="facebook" href="{{ $vendor->facebook }}"><i class="fa fa-facebook"></i></a>   
                                        </li>
                                        @endif
                                        @if($vendor->twitter != '')
                                           <li> <a class="twitter" href="{{ $vendor->twitter }}"><i class="fa fa-twitter"></i></a>
                                        </li>
                                        @endif
                                        @if($vendor->whatsapp != '')
                                            <li><a class="whatsapp" href="{{ $vendor->whatsapp }}"><i class="fa fa-whatsapp"></i></a>
                                        </li>
                                        @endif
                                        @if($vendor->linkedin != '')
                                            <li><a class="linkedin" href="{{ $vendor->linkedin }}"><i class="fa fa-linkedin"></i></a>
                                        </li>
                                        @endif
                                       
                                    </ul>
                                    @endif
                                    </figure>
                                </div>
                                <div class="ps-block__footer">
                                <p>
                                @if( $vendor->ohours != "" || $vendor->ohours  != Null)
                                   Operating Hours<strong>
                                    {{ $vendor->ohours }}
                                    </strong></p>
                                    @endif
                                    @if( $vendor->website != "" || $vendor->website  != Null)
                                  <p> Visit our Website<strong>
                                    <a href="{{ $vendor->website }}" target="">{{ $vendor->website }}</a> 
                                    </strong></p>
                                    @endif
                                    @if( $vendor->phone != "" || $vendor->phone  != Null)
                                   <p> Call us directly<strong>
                                    (+263) {{ $vendor->phone}} 
                                    <br/><br/> {{ $vendor->cell}}
                                    </strong></p>
                                    <p>or 
                                    @endif
                                    Download our Company Profile</p>
                                    <a class="ps-btn ps-btn--fullwidth" href="#">Download</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ps-section__right">
                        <div class="ps-block--vendor-filter">
                            <div class="ps-block__left">
                                <ul>
                                    <li class="active"><a href="#">Products</a></li>
                                    <li><a href="#">Reviews</a></li>
                                </ul>
                            </div>
                            <div class="ps-block__right">
                                <form class="ps-form--search" >
                                    <input class="form-control" type="text"  id="myInput" placeholder="Search in this shop">
                                </form>
                            </div>
                        </div>
                        <div class="ps-vendor-best-seller">    
                        <div class="ps-shopping ps-tab-root">
                            <div class="ps-shopping__header">
                               <p>Seller Products</p>
                                <div class="ps-shopping__actions">
                                    <select class="ps-select" data-placeholder="Sort Items">
                                        <option>Sort by latest</option>
                                        <option>Sort by A - Z</option>
                                        <!--<option>Sort by average rating</option>-->
                                    </select>
                                   
                                </div>
                                
                            </div>
                            <div class="ps-tabs">
                                <div class="ps-tab active" id="tab-1">
                                    <div class="row">
                                    @foreach($products as $product)
                                    
                                        <div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 col-6 stretch-card">
                                            <div class="ps-product">
                                                <div class="ps-product__thumbnail"><a href="{{ route('product-detail', ["id"=>$product->id]) }}">
                                                <img src="{{ asset("storage/img/products/$product->img_photo_path")}}" width="155" height="155" alt=""></a>
                                                    @if( $product->discount_id != "" )
                                                    <div class="ps-product__badge"> {{ $product->discount_id }}%</div>
                                                    @endif
                                                    <ul class="ps-product__actions">
                                                        <li><a href="{{ route('product-detail', ["id"=>$product->id]) }}" data-toggle="tooltip" data-placement="top" title="Read More"><i class="icon-bag2"></i></a></li>
                                                        <li><a href="#" data-placement="top" title="Quick View" data-toggle="modal" data-target="#product{{$product->id}}">
                                                        <i class="icon-eye"></i></a></li>
                                                        <li><a href="#" data-toggle="tooltip" data-placement="top" title="Call now">
                                                        <i class="icon-phone"></i></a></li>
                                                        </ul>
                                                </div>
                                                <div class="ps-product__container">
                                                    <div class="ps-product__content">
                                                    <a class="ps-product__title" href="{{ route('product-detail', ["id"=>$product->id]) }}">
                                                     {{ $product->name }}</a>
                                                        <div class="ps-product__rating">
                                                            <select class="ps-rating" data-read-only="true">
                                                                <option value="1">1</option>
                                                                <option value="1">2</option>
                                                                <option value="1">3</option>
                                                                <option value="1">4</option>
                                                                <option value="2">5</option>
                                                            </select><span>01</span>
                                                        </div>
                                                    </div>
                                                    <div class="ps-product__content hover">
                                                    <a class="ps-product__title" href="{{ route('product-detail', ["id"=>$product->id]) }}">
                                                    {{ $product->name }}
                                                    </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                         @include('layouts.template_parts.product_modal')
                                      @endforeach
                                    </div>
                                     {!! $products->links() !!}
                                </div>
                                 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
     
@endsection