@extends('layouts.master')

@section('title')
	{{ title_case($page_product) }}
@endsection

@php
	$share_url = Request::url();
	if(!empty($meta_tags)){
		foreach ($meta_tags as $key => $value) {
			$meta[$value->name] = $value->content;
		}
		$share_title = isset($meta['title']) ? $meta['title'] : '';
		$share_desc = isset($meta['description']) ? $meta['description'] : '';
	}else{
		$share_title = title_case($page_product)." | ".$masterName;
		$share_desc = title_case($page_product).' '.$masterName;
	}
	$share_img = asset($storage_url.'img/'.$masterLogo);
@endphp

@section('sharing-meta')
{{-- FACEBOOK --}}
<meta property="og:url" content="{{$share_url}}" />
<meta property="og:type" content="place" />
<meta property="og:title" content="{{$share_title}}" />
<meta property="og:description" content="{{ $share_desc }}" />
<meta property="og:image" content="{{$share_img}}" />

{{-- TWITTER --}}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="{{$share_url}}">
<meta name="twitter:title" content="{{$share_title}}">
<meta name="twitter:description" content="{{ $share_desc }}">
<meta name="twitter:image:src" content="{{$share_img}}">

{{--GOOGLE PLUS --}}
<meta itemprop="name" content="{{ $share_title }}">
<meta itemprop="description" content="{{ $share_desc }}">
<meta itemprop="image" content="{{$share_img}}">

@endsection

@section('content')
  <main id="mainContent product-category" class="container-fluid">
		@if(count($categories) == 0)
			<section class="empty-product">
				<div>
					<h1 class="text-center"><i class="fa fa-shopping-bag" aria-hidden="true"></i></h1>
				</div>
			</section>
		@endif

		{{-- categories loop --}}
    @foreach($categories as $category)
    <section class="row category-wrapper">

			{{-- category side image --}}
      <div class="col-xs-12 col-sm-6 category-box category-name {{ ($loop->index % 2 != 0) ? 'category-right' : 'category-left' }}">
        <img alt="" src="{{asset($storage_url.'img/products/category/'.$category->category_image1)}}"/>
        <header class="{{ ($loop->index % 2 != 0) ? 'text-right' : 'text-left' }}">
          <a href="{{ route('category', [
          		'id' => $category->id,
          		'category' => str_slug($category->category_name)
          		])}}">
            <h2>{{ $category->category_name or '' }}</h2>
            {{-- <button class="btn btn-default">@lang('frontend.see_all_product')</button> --}}
          </a>
        </header>
      </div>
			{{-- /. category side image --}}

			{{-- product side cards --}}
      <div class="col-xs-12 col-sm-6 category-box">
        <div class="row product-list">
					<div>

						{{-- cards loop --}}
						@if (count($category->products))
							@foreach ($category->products()->latest()->take(2)->get() as $product)

								{{-- card --}}
								<article class="col-xs-12 col-sm-6 {{ ($loop->index % 2 != 0)?'hidden-xs':'' }}">
		              <div class="card">

		                {{-- card image --}}
		                <figure class="card-img">
		                  <img alt=""
		                  	src="{{ asset($storage_url.'img/products/'.$product->product_code.'/'.$product->product_image)}}"/>
		                </figure>
		                {{-- /. card image --}}

		                {{-- card content --}}
		                <div class="text-center card-content">
		                  <header class="card-header">

						            <h2>{{ $product->product_name or '' }}</h2>

												<p class="product-price">@currency($product->product_price)</p>
		                  </header>
											<div class="card-footer">
												@php
													$categorySlug = str_slug($category->category_name);
													$name = str_slug( $product->product_name ? $product->product_name : 'no name' );
												@endphp
												<a href="{{ route('productDetail',['category'=>$categorySlug,'id'=>$product->product_code,'slug'=>$name]) }}" class="btn btn-default">@lang('frontend.detail')</a>
											</div>
		                </div>
										{{-- ./ card content --}}

		              </div>
		            </article>
		            {{-- ./ card --}}

							@endforeach
						@endif
						{{-- /. card loop --}}

            <aside class="col-xs-12 text-center">
							<br>
							<a href="{{route('category',['id'=>$category->id,'category'=>str_slug($category->category_name)])}}" class="btn btn-default fs-shadow">@lang('frontend.see_all_product')</a>
						</aside>


					</div>
        </div>
      </div>
			{{-- product side cards --}}

    </section>
		@endforeach
  </main>

@endsection

@section('script')
	<script>
		function resize_card(){
			var $highest = 0;
			$(".product-list .card").each(function(){
				var $h = $($(this)).height();
				if($h > $highest){
					$highest = $h;
				}
			});

			$(".product-list .card").each(function(){
				$($(this)).css("height",$highest+"px");
			});
		};

		$(document).ready(function(){
			resize_card();
		});

		$(window).resize(function(){
			resize_card();
		});
	</script>
@endsection
