@php
/*
$layout_page = shop_home
$products: paginate
Use paginate: $products->appends(request()->except(['page','_token']))->links()
*/ 
@endphp

@extends($sc_templatePath.'.layout')

{{-- block_main_content_center --}}
@section('block_main_content_center')
<div class="col-lg-12 col-xl-12">
  
 <!-- {{-- Sort filter --}}
  <div class="product-top-panel group-md">
    <p class="product-top-panel-title">
      {!! trans('front.result_item', ['item_from' => $products->firstItem(), 'item_to'=> $products->lastItem(), 'item_total'=> $products->total()  ]) !!}
    </p>
        <form action="" method="GET" id="filter_sort">
          @php
          $queries = request()->except(['filter_sort','page']);
          @endphp
          @foreach ($queries as $key => $query)
          <input type="hidden" name="{{ $key }}" value="{{ $query }}">
          @endforeach
          
          <select class="form-control" name="filter_sort">
              <option value="">{{ trans('front.filters.sort') }}</option>
              <option value="price_asc" {{ ($filter_sort =='price_asc')?'selected':'' }}>
                  {{ trans('front.filters.price_asc') }}</option>
              <option value="price_desc" {{ ($filter_sort =='price_desc')?'selected':'' }}>
                  {{ trans('front.filters.price_desc') }}</option>
              <option value="sort_asc" {{ ($filter_sort =='sort_asc')?'selected':'' }}>
                  {{ trans('front.filters.sort_asc') }}</option>
              <option value="sort_desc" {{ ($filter_sort =='sort_desc')?'selected':'' }}>
                  {{ trans('front.filters.sort_desc') }}</option>
              <option value="id_asc" {{ ($filter_sort =='id_asc')?'selected':'' }}>{{ trans('front.filters.id_asc') }}
              </option>
              <option value="id_desc" {{ ($filter_sort =='id_desc')?'selected':'' }}>
                  {{ trans('front.filters.id_desc') }}</option>
          </select>
        </form>
  </div>
  {{-- //Sort filter --}}-->

  {{-- Product list --}}
  <div class="row row-30 row-lg-50">
    @foreach ($products as $key => $product)
    <div class="col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <!-- Product-->
        <article class="product wow fadeInRight">
          <div class="product-body">
            <div class="product-figure">
                <a href="{{ $product->getUrl() }}">
                <img src="{{ asset($product->getThumb()) }}" alt="{{ $product->name }}"/>
                </a>
            </div>
            <h5 class="product-title"><a href="{{ $product->getUrl() }}">{{ $product->name }}</a></h5>

            {{-- Go to store --}}
            @if (sc_config_global('MultiStorePro') && config('app.storeId') == 1)
            <div class="store-url"><a href="{{ $product->goToStore() }}"><i class="fa fa-shopping-bag" aria-hidden="true"></i> {{ trans('front.store').' '. $product->store_id  }}</a>
            </div>
            @endif
            {{-- End go to store --}}

              {{$product->subtitle}}

{{--            @if ($product->allowSale())--}}
{{--            <a onClick="addToCartAjax('{{ $product->id }}','default','{{ $product->store_id }}')" class="button button-lg button-secondary button-zakaria add-to-cart-list">--}}
{{--              <i class="fa fa-cart-plus"></i> {{trans('front.add_to_cart')}}</a>--}}
{{--            @endif--}}

            {!! $product->showPrice() !!}
          </div>
          
          @if ($product->price != $product->getFinalPrice() && $product->kind !=
          SC_PRODUCT_GROUP)
          <span><img class="product-badge new" src="{{ asset($sc_templateFile.'/images/home/sale.png') }}" class="new" alt="" /></span>
          @elseif($product->kind == SC_PRODUCT_BUILD)
          <span><img class="product-badge new" src="{{ asset($sc_templateFile.'/images/home/bundle.png') }}" class="new" alt="" /></span>
          @elseif($product->kind == SC_PRODUCT_GROUP)
          <span><img class="product-badge new" src="{{ asset($sc_templateFile.'/images/home/group.png') }}" class="new" alt="" /></span>
          @endif
          <div class="product-button-wrap">
            <div class="product-button">
                <a class="button button-secondary button-zakaria" onClick="addToCartAjax('{{ $product->id }}','wishlist','{{ $product->store_id }}')">
                    <i class="fas fa-heart"></i>
                </a>
            </div>
            <!--<div class="product-button">
                <a class="button button-primary button-zakaria" onClick="addToCartAjax('{{ $product->id }}','compare','{{ $product->store_id }}')">
                    <i class="fa fa-exchange"></i>
                </a>
            </div>-->
          </div>
        </article>
      </div>
    @endforeach

      @if(count($products)==0)
            <div style="text-align:center">No product found !</div>
          @endif
  </div>

  <div class="pagination-wrap">
    <!-- Bootstrap Pagination-->
    <nav aria-label="Page navigation">
      <ul class="pagination">
        {{ $products->appends(request()->except(['page','_token']))->links() }}
      </ul>
    </nav>
  </div>
  {{-- //Product list --}}
@endsection
{{-- //block_main_content_center --}}


{{-- breadcrumb --}}
@section('breadcrumb')
@php
  $bannerStore = $modelBanner->start()->getBannerStore()->getData()->first();
  $bannerImage = $bannerStore['image'] ?? '';
@endphp
<section class="breadcrumbs-custom">
  <div class="parallax-container" data-parallax-img="{{ asset($bannerImage) }}">
    <div class="material-parallax parallax"><img src="{{ asset($bannerImage) }}" alt="" style="display: block; transform: translate3d(-50%, 83px, 0px);"></div>
    <div class="breadcrumbs-custom-body parallax-content context-dark">
      <div class="container">
        <h2 class="breadcrumbs-custom-title">{{ $title ?? '' }}</h2>
      </div>
    </div>
  </div>
  
  
  
  
  
  <style>
    
   /*search box css start here*/
.search-sec{
    padding: 2rem;
}
.search-slt{
    display: block;
    width: 100%;
    font-size: 16px;
	font-weight: 600;
	letter-spacing:1px;
    line-height: 1.5;
    color: #55595c;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    height: calc(3rem + 2px) !important;
    border-radius:0;
}
.wrn-btn{
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    height: calc(3rem + 2px) !important;
    border-radius:0;
}
@media (min-width: 992px){
    .search-sec{
        position: relative;
        top: 0;
      /*  background: rgba(26, 70, 104, 0.51);*/
    }
}

@media (max-width: 992px){
   /* .search-sec{
        background: #1A4668;
    }*/
}
    
    </style>
    
  
  
  <section class="search-sec">
    <div class="container">
        <form action="{{url('shop')}}" method="get" >
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        
                        
                        <div class="col-lg-5 col-md-4 col-sm-12 p-0">
                            <select class="form-control search-slt"
                                    id="exampleFormControlSelect1" required name="city">
                                <option>Select City</option>
                                @foreach($cities as $city)
                                    @if($city->city!='')
                                        <option value="{{$city->city}}">{{$city->city}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-5 col-md-4 col-sm-12 p-0">
                            <select class="form-control search-slt"
                                    id="exampleFormControlSelect1" required name="category">
                                <option value="">Select Service</option>
                                @foreach($categories as $category)
                                    <option value="{{$category->id}}">{{$category->title}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-12 p-0">
                            <button type="submit" class="btn btn-danger wrn-btn" value="find" name="submit">Find Vendors
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
  
  
  
  
  
  <div class="breadcrumbs-custom-footer">
    <div class="container">
      <ul class="breadcrumbs-custom-path">
        <li><a href="{{ sc_route('home') }}">{{ trans('front.home') }}</a></li>
        <li class="active">{{ $title ?? '' }}</li>
      </ul>
    </div>
  </div>
</section>
@endsection
{{-- //breadcrumb --}}

@push('styles')
@endpush

@push('scripts')
<script type="text/javascript">
  $('[name="filter_sort"]').change(function(event) {
      $('#filter_sort').submit();
  });
</script>
@endpush