@extends('layouts.master')

@section('title', isset($masterName) ? $masterName : '')

@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 = $masterName;
		$share_desc = $masterDesc;
	}
	$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')

	@includeif("components.{$homeBanner}")

	<!-- MAIN CONTENT -->
	<main id="mainContent" class="container-fluid home">

		{{-- divider --}}
		@if ($divider1->general_content != '')
			<section class="divider text-center row">
				<div class="col-xs-12" data-animate="true" data-effect="zoomIn">
					@php
						$target_page = App\PageName::where('key', $divider1->general_url)->first();
					@endphp
					<p>{{ $divider1->general_content or '' }}</p>
					<a class="btn btn-default" href="{{ $target_page ? $target_page->slug : '' }}">
						{{ $target_page ? ucwords($target_page->page_name) : '' }}
					</a>
				</div>
			</section>
		@endif
		{{-- /. divider --}}

		{{-- featured products --}}
		@if (config('corepackage.catalog.featured_products'))
			<section class="featured-products">
				<header class="row text-center">
					<div class="col-xs-12">
						<div class="plate m-t-50 m-b-50">
							<h2 class="heading">{{ $featured_heading->general_title or '' }}</h2>
						</div>
					</div>
				</header>
				<div class="slider-wrapper text-center">
					<ul class="content-slider">
						@foreach ($featured as $element)
							<li class="slider-item">
								<div class="item-wrapper text-center">
									@php
										$param = [
											'category' => str_slug($element->category->category_name),
											'id' => $element->product_code,
											'slug' => str_slug(($element->product_name ? $element->product_name : 'no-names'))
										];
									@endphp
									<a href="{{ route('productDetail', $param) }}">
										<img src="{{ asset($storage_url.'img/products/'.$element->product_code.'/'.$element->product_image) }}" alt="{{$element->alt or '' }}" style="height: auto; width: 100%">
									</a>

									<div class="text-wrapper">
										<a href="{{ route('productDetail', $param) }}">
											<p class="title">{{ $element->category->category_name or '' }}</p>
											<p class="subtitle">{{ $element->product_name or '' }}</p>
										</a>
									</div>
								</div>
							</li>
						@endforeach
					</ul>
					<a href="{{ route('categories') }}" class="btn btn-default m-t-20 m-b-20">Lihat Produk</a>
				</div>
				<header class="row text-center">
					<div class="col-xs-12">
						<div class="plate">
							<h2 class="heading"></h2>
						</div>
					</div>
				</header>
			</section>
		@endif
		{{-- /. featured products --}}

		{{-- intro --}}
		<section class="row home-content">
			<article class="col-xs-12 col-sm-10 col-sm-offset-1 text-center">

				<header data-animate="true" data-effect="fadeInUp">
					<h2>{{ $content->general_title or '' }}</h2>
				</header>
				<div data-animate="true" data-effect="fadeInUp">
					{!! $content->general_content or '' !!}
				</div>

			</article>
		</section>
		{{-- /. intro --}}

		{{-- banner 1 --}}
		<section class="banner-img row">
			<img alt="banner-background" src="{{ $banner1->media_url ? asset($storage_url.'img/home/'.$banner1->media_url) : '' }}" />
			<article class="banner-content col-xs-12">
				<div class="content-text">
					<div data-animate="true" data-effect="fadeInUp">
						@php
							$target_page = App\PageName::where('key', $banner1->media_target)->first();
						@endphp
						<header>
							<h2>{{ $banner1->media_title or '' }}</h2>
						</header>
						{!! $banner1->media_content or '' !!}
						<br />
						<a class="btn btn-default" href="{{ $target_page ? $target_page->slug : '' }}">
							{{ $target_page ? ucwords($target_page->page_name) : '' }}
						</a>
					</div>
				</div>
			</article>
		</section>
		{{-- /. banner 1 --}}

		{{-- cards --}}
		@if(count($cards) > 0)
		<section id="cards" class="row home-content">
			<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($cards as $key=>$val)
					<article class="col-xs-12 col-sm-4 p-l-5 p-r-5">
						<div class="card" data-animate="true" data-effect="fadeInUp">
							<img class="img img-responsive" alt="{{ $val->media_desc or '' }}" src="{{ $val->media_url ? asset($storage_url.'img/home/'.$val->media_url) : '' }}" />
							<div class="card-content">
								<header class="text-center">
									<h3>{{ $val->media_title or '' }}</h3>
								</header>
								{!! $val->media_content or '' !!}
							</div>
						</div>
					</article>
				@endforeach
				</div>
			</div>
		</section>
		@endif
		{{-- /. cards --}}

		{{-- divider 2 --}}
		@if ($divider2->general_content != '')
			<section class="divider text-center row">
				@php
					$target_page = App\PageName::where('key', $divider2->general_url)->first();
				@endphp
				<div class="col-xs-12" data-animate="true" data-effect="zoomIn">
					<p>{{ $divider2->general_content or '' }}</p>
					<a class="btn btn-default" href="{{ $target_page ? $target_page->slug : '' }}">
						{{ $target_page ? ucwords($target_page->page_name) : '' }}
					</a>
				</div>
			</section>
		@endif
		{{-- /. divider 2 --}}

		{{-- banner2 --}}
		<section class="banner-img row">
			<img alt="{{ $banner2->media_desc or '' }}" src="{{ $banner2->media_url ? asset($storage_url.'img/home/'.$banner2->media_url) : '' }}" />
			<article class="banner-content col-xs-12">
				<div class="content-text right">
					<div data-animate="true" data-effect="fadeInUp">
						@php
							$target_page = App\PageName::where('key', $banner2->media_target)->first();
						@endphp
						<header>
							<h2>{{ $banner2->media_title or '' }}</h2>
						</header>
						{!! $banner2->media_content or '' !!}
						<br />
						<a class="btn btn-default" href="{{ $target_page ? $target_page->slug : '' }}">
							{{ $target_page ? ucwords($target_page->page_name) : '' }}
						</a>
					</div>
				</div>
			</article>
		</section>
		{{-- /. banner2 --}}

		{{-- instagram --}}
		@if(config('corepackage.lowcost.instagram') && $homeInstagram)
			<div class="ig-row m-t-100 m-b-100">
				<div class="container">
					<div class="row">
						{{-- <div class="col-xs-12">
							<h3>Instagram media</h3>
						</div> --}}
						@if (count($instagram_media))
							<div class="col-xs-12 text-center" style="margin-bottom: 20px;">
								<a href="https://www.instagram.com/{{ $instagram_media[0]->user->username }}" target="_blank" style="font-size: 20px;">#{{ $instagram_media[0]->user->username }}</a>
							</div>
						@endif
						
						@foreach($instagram_media as $media)
							@if($loop->iteration <= $homeInstagramLimit)
								<div class="col-xs-12 col-sm-6 col-md-4">
									<a href="{{ $media->link }}" target="_blank">
										<img src="{{ $media->images->standard_resolution->url or '' }}" alt="">
									</a>
								</div>
							@endif
						@endforeach
					</div>

				</div>
			</div>
		@endif
		{{-- /. instagram --}}

	</main>

@endsection
