@extends('main')
@section('styles')
@endsection
@section('page-title')
@endsection
@section('content')
  
  <div class="breadcrumbs">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <ul>
            {{-- <li class="home">
            <a href="{{ Route('site.home.page') }}">{{ __('Home') }}</a>
            <span>/</span>
          </li> --}}
          <li>
            <a href="{{ Route('product.index') }}">{{ __('Products') }}</a>
            <span>/</span>
          </li>
          @foreach ($category->getAncestorsAndSelfWithoutRoot() as $cate)
            @if ($loop->last)
              <li >
                {{ $category->title }}
              </li>
            @else
              <li><a href="{{ Route('product.category',[$category->slug]) }}">{{ $category->title }}</a>
                <span>/</span>
              </li>
            @endif
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<section class="main-container col2-left-layout">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="block-title mb-15">
          <h1>{!! $category->title !!} <span class="page-heading-title"> ( <b>{!! siteName() !!}</b>) </span></h1>
        </div>
      </div>
      <div class="col-sm-9 col-xs-12 col-sm-push-3">
        <article class="col-main">
          <div class="category-products">
            <ul class="products-grid">
              @foreach ($products as $key => $product)
                <li class="item col-md-3 col-sm-4 col-xs-6">
                  @livewire('front-end.product.item-inner' , ['product' => $product], key($loop->index))
                </li>
              @endforeach
            </ul>
          </div>
          <div class="row">
            <div class="col-xs-12 text-center">
              {{ $products->links() }}
            </div>
          </div>
        </article>
      </div>
      <div class="col-left sidebar col-sm-3 col-xs-12 col-sm-pull-9">
        <aside class="col-left sidebar">
          @if (isDesktop())
            @widget('ListCategoriesMenu')
            @widget('Sidebar\BlockBanner')
          @else
          @endif
          @widget('Sidebar\DeliveryReturns')
          @widget('MostPopularFood')
        </div>
      </div>
    </section>
  @endsection
  @section('scripts')
    <script language="javascript">
      jQuery(document).ready(function($) {
        $('.item-inner').matchHeight();
        $('.products-grid .item .item-title').matchHeight({
          byRow: true,
          property: 'height',
          target: null,
          remove: false
        });
      });
    </script>
  @endsection