@extends('front.layouts.main')

@section('content')

<!--<section class="slider-main full-slider mb-0">
      <div class="slide" style="background-image:url({{asset('root-assets/images/banner-1.jpg')}})"></div>
      <div class="slide" style="background-image:url({{asset('root-assets/images/banner-1.jpg')}})"></div>
</section>-->
<section class="home-slider-wrapper">
    <div class="slider-main full-slider slider-overlay mb-0">
        <div class="slide" style="background-image:url({{asset('root-assets/images/banner-1.jpg')}})"></div>
        <div class="slide" style="background-image:url({{asset('root-assets/images/banner-1.jpg')}})"></div>
    </div>
    <div class="slider-description text-center">
        <h1 class="mt-0 mb-30">Welcome to CafeJava's</h1>
        <a href="{{ url('user/menu') }}"><button type="button" class="btn btn-green">START ORDER</button></a>
    </div>
</section>

@if(count($data['data']) > 0)
  <section class="pt-40">
    <div class="container">
      <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">
                    <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 text-center "><a class="text-blue" 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