@extends('front.layouts.main')

@section('content')

@if(count($data['data']) > 0)
<section class="pt-40">
  <div class="container">

    <h2 class="col mt-0 text-center">Welcome To CJ’s!!</h2>
    <div class="d-flex flex-center">
      <div class="col text-center mb-30 text-gray">Welcome to CJ's delicious universe. Everything from our Big on Breakfast, Perfected Drinks, Decadent to your Generous Big Meals Right here at your fingertips. ORDER NOW.
      </div>
    </div>
    <div class="product-list-wrapper product-list-landing d-flex flex-wrap">
      @foreach($data['data'] as $product)
      <div class="col xs6">
        <div class="product-card mb-30">
          <div class="product-thumbnail main-product-thumbnail">
            <a href="{{url('user/productSubCategory/'.base64_encode($product['catId']).'/'.base64_encode($product['name']))}}"><img src="{{$product['image']}}" alt="Product Image" /></a>
          </div>
          <div class="product-info">
            <div class="product-name" style="text-align:center;">
              <a style="font-weight:normal;" href="{{url('user/productSubCategory/'.base64_encode($product['catId']).'/'.base64_encode($product['name']))}}">{{strtoupper($product['name'])}}</a></div>
              
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>
@else
<center>
  <h3>NO CATEGORIES FOUND</h3>
</center>
@endif

@endsection
@section('js')
<script>
  $(document).ready(function() {
    $('.full-slider').slick({
      dots: true,
      infinite: true,
      speed: 500,
      autoplay: true,
      cssEase: "ease"
    });
  });
</script>
@endsection