@extends('layouts.frontend')
@section('content')
  <div class="ps-page--single ps-page--vendor">
        <div class="ps-breadcrumb">
            <div class="container">
                <ul class="breadcrumb">
                    <li><a href="{{ route('welcome') }}">Home</a></li>
                    <li>Sellers</li>
                </ul>
            </div>
        </div>
        <section class="ps-store-list">
            <div class="container">
                <div class="ps-section__header">
                    <h3>Seller list</h3>
                </div>
                <div class="ps-section__wrapper">
                    <div class="ps-section__left">
                        <aside class="widget widget--vendor">
                            <h3 class="widget-title">Search</h3>
                            <input class="form-control" id="myInput" type="text" placeholder="Search...">
                        </aside>
                        
                        <h4 class="widget-title">Filter by Sectors</h4>
                        <ul class="ps-list--categories">
                        <li><a href="{{ route('view-vendors', ["sector"=>"all"]) }}">All<span class="sub-toggle"><i class="fa fa-angle-right"></i></span></a>
                            </li>
                             <li><a href="{{ route('view-vendors', ["sector"=>"arts and craft"]) }}">Arts and Craft<span class="sub-toggle"><i class="fa fa-angle-right"></i></span></a>
                            </li>
                            <li><a href="{{ route('view-vendors', ["sector"=>"agri-business"]) }}">Agri-business<span class="sub-toggle"><i class="fa fa-angle-right"></i></span></a>
                            </li>
                            <li><a href="{{ route('view-vendors', ["sector"=>"construction"]) }}">Construction<span class="sub-toggle"><i class="fa fa-angle-right"></i></span></a>
                            </li>
                            <li><a href="{{ route('view-vendors', ["sector"=>"clothing"]) }}">Clothing<span class="sub-toggle"><i class="fa fa-angle-right"></i></span></a>
                            </li>
                             <li><a href="{{ route('view-vendors', ["sector"=>"fresh produce"]) }}">Fresh Produce<span class="sub-toggle"><i class="fa fa-angle-right"></i></span></a>
                            </li>
                            <li><a href="{{ route('view-vendors', ["sector"=>"furniture"]) }}">Furniture<span class="sub-toggle"><i class="fa fa-angle-right"></i></span></a>
                            </li>
                            <li><a href="{{ route('view-vendors', ["sector"=>"ict"]) }}">ICT<span class="sub-toggle"><i class="fa fa-angle-right"></i></span></a>
                            </li>
                             <li><a href="{{ route('view-vendors', ["sector"=>"packaging"]) }}">Packaging<span class="sub-toggle"><i class="fa fa-angle-right"></i></span></a>
                            </li>
                             <li><a href="{{ route('view-vendors', ["sector"=>"processed food"]) }}">Processed Food<span class="sub-toggle"><i class="fa fa-angle-right"></i></span></a>
                            </li>
                             <li><a href="{{ route('view-vendors', ["sector"=>"services"]) }}">Services<span class="sub-toggle"><i class="fa fa-angle-right"></i></span></a>
                            </li>
                           
                            </ul>
                         
                    </div>
                    <div class="ps-section__right">
                        <section class="ps-store-box">
                            <div class="ps-section__header">
                                <p>Our sellers</p>
                                <select class="ps-select">
                                    <option value="1">Sort by Newest: A to Z</option>
                                    <option value="2">Sort by Newest: New to old</option>
                                    <option value="3">Sort by average rating: low to hight</option>
                                </select>
                            </div>
                            <div class="ps-section__content">
                                <div class="row">
                                @if(count($vendors) == 0)
                                    <p>No vendors available , please try again later</p>
                                    @endif
                                 @foreach ($vendors as $vendor)
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 stretch-card">
                                        <article class="ps-block--store">
                                        @if($vendor->header_photo_path != "" || $vendor->header_photo_path != Null) 
                                            <div class="ps-block__thumbnail bg--cover" 
                                            data-background="{{ asset("storage/profile-photos/$vendor->header_photo_path")}}"  ></div>
                                        @else
                                           <div class="ps-block__thumbnail bg--cover" 
                                            data-background="{{ asset("storage/profile-photos/default-store-banner.png")}}"  ></div>
                                        @endif
                                        <div class="ps-block__content">
                                            <div class="ps-block__author"><a class="ps-block__user" href="#">
                                            @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
                                                </a>
                                               <a class="ps-btn" href="{{ route('visit-store', ["id"=> $vendor->slug ]) }}">Visit Store</a>
                                                </div>
                                                <a href="{{ route('visit-store', ["id"=> $vendor->slug]) }}"><h4>{{ $vendor->name }}</h4></a>
                                                <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>{{ $vendor->address }}</p>
                                                <ul class="ps-block__contact">
                                                    <li><i class="icon-envelope"></i>
                                                    <a href="mailto:{{ $vendor->email }}">{{ $vendor->email }}</a></li>
                                                    @if( $vendor->phone != "" || $vendor->phone  != Null)
                                                          <li><i class="icon-telephone"></i> (+263) {{ $vendor->phone }}</li>
                                                    @endif
                                                  
                                                </ul>
                                                <div class="ps-block__inquiry"><a href="{{ route('visit-store', ["id"=> $vendor->slug ]) }}">
                                                <i class="icon-question-circle"></i> inquiry</a></div>
                                            </div>
                                        </article>
                                    </div>
                                @endforeach
                                </div>
                                 {!! $vendors->links() !!}
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </section>
    </div>

@endsection