@extends('layouts.master')

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

@php
	$share_url = Request::url();
	$share_title = $masterName." | ".ucfirst($page);
	$share_desc = title_case($page).' @ '.title_case($page_product).' '.$masterName;
	$share_img = asset($storage_url.'img/products/category/'.$main_image);
@endphp

@section('meta')
	<meta name="title" content="{{$share_title}}">
	<meta name="description" content="{{$share_desc}}">
@endsection

@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')
  <header class="container-fluid text-center">
    @php
      $url = asset($storage_url.'img/products/category/'.$banner);
    @endphp
    <div class="banner-section">
      <img alt="banner-header" src="{{ $url }}" />
      <div class="banner-section-content">
        <h1 data-animate="true" data-effect="fadeInUp">
          {{$page}}
        </h1>
      </div>
    </div>
  </header>

  <main id="mainContent" class="container-fluid">
		@if(count($products) == 0)
			<section class="empty-product">
				<div>
					<h1 class="text-center"><i class="fa fa-shopping-bag" aria-hidden="true"></i></h1>
				</div>
			</section>
		@endif
    <section class="row product-list">
      <div class="col-xs-12 col-md-12 col-md-offset-0 col-lg-10 col-lg-offset-1">
        <div class="row m-md-15">
          @foreach($products as $key => $val)
						@php
							$get = $val->locales()->where('locale',config('app.locale'))->first();
						@endphp
            <article class="col-xs-12 col-sm-6 col-md-4 p-l-5 p-r-5">
              <div class="card" style="">
                <figure class="card-img">
                  <img alt="" src="{{asset($storage_url.'img/products/'.$val->product_code.'/'.$val->product_image)}}"/>
                </figure>
                <div class="text-center card-content">
                  <header class="card-header">
                    <h2>{{ $get->product_name or $val->product_name }}</h2>
										<p class="product-price">@currency($val->product_price)</p>
                  </header>
									<div class="card-footer">
										@php
											$category = str_slug($page);
											$name = str_slug(isset($get)?$get->product_name:$val->product_name);
										@endphp
										<a href="{{ route('productDetail',['category'=>$category,'id'=>$val->product_code,'slug'=>$name]) }}" class="btn btn-default">@lang('frontend.detail')</a>
									</div>
                </div>
              </div>
            </article>
          @endforeach
        </div>
      </div>
    </section>
  </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
