@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>
            <li>
              {{ __('Exclusive Offers') }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <section class="main-container col2-left-layout">
    <div class="container">
      <div class="row">
        <div class="col-sm-9 col-xs-12 col-sm-push-3">
          <article class="col-main">
            <h1 class="page-heading">{{ __('Exclusive Offers') }}<span class="page-heading-title"> ( <b>{!! siteName() !!}</b>) </span> </h1>
            <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>
            {{ $products->links() }}

          </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