@extends('layouts.master')

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

@php
	use Carbon\Carbon;
	if(!empty($meta_tags)){
		foreach ($meta_tags as $key => $value) {
			$meta[$value->name] = $value->content;
		}
		$share_title = $meta['title'];
		$share_desc = $meta['description'];
	}else{
		$share_title = title_case($page)." | ".$masterName;
		$share_desc = $masterName." | ".$masterAddress." | ".str_replace(';',' ',$masterPhone)." | ".$masterEmail;
	}
	$share_url = Request::url();
	// $share_img = asset($storage_url.'img/gallery/'.$banner);
@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('style')
	<style>
		.thumb {
	    display: block;
			width: 100%;
			height: 350px;
			margin: 0;
			object-fit: cover;
		}

		/* Style to article Author */
		.by-author {
			font-style: italic;
			line-height: 1.3;
			color: #aab6aa;
		}

		/* Main Article [Module]
		-------------------------------------
		* Featured Article Thumbnail
		* have a image and a text title.
		*/
		.featured-article {
			position: relative;
			margin-bottom: 1em;
		}

		.featured-article .block-title {
			/* Position & Box Model */
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			/* background */
			background: rgba(0,0,0,0.7);
			/* Width/Height */
			padding: .5em;
			width: 100%;
			/* Text color */
			color: #fff;
		}

		.featured-article .block-title h2 {
			margin: 0;
		}
		.featured-article .block-title a h2 {
			color: #fff;
		}

		/* Featured Articles List [BS3]
		--------------------------------------------
		* show the last 3 articles post
		*/

		.main-list {
			padding-left: .5em;
		}

		.main-list .media {
			padding-bottom: 1.1em;
			border-bottom: 1px solid #e8e8e8;
		}

		.media img {
			height: 90px;
			width: 150px;
			object-fit: cover;
		}
		.content-list {
			min-height: 60px;
		}
	</style>
@endsection

@section('content')

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

		{{-- banner area --}}
    <div class="row">
			
			@isset ($articles)
				<div class="col-md-5 col-lg-5 col-sm-12 col-xs-12 xs-clear">
					<!-- artigo em destaque -->
					@if ($featured)
						<div class="featured-article">
							<a href="{{ route('article.post', $featured->slug) }}">
								<img src="{{ asset($storage_url.'img/article/'.$featured->banner) }}" alt="" class="thumb">
							</a>
							<div class="block-title">
								<a href="{{ route('article.post', $featured->slug) }}">
									<h2>{{ $featured->title or '' }}</h2>
								</a>
								<p class="by-author"><small>{{ isset($featured->user) && $featured->user->count() ? 'By '.$featured->user->name : '' }}</small> <i class="fa fa-clock-o m-l-10"></i> {{ Carbon::createFromTimestamp(strtotime($featured->created_at))->toFormattedDateString() }}</p>
							</div>
						</div>
					@endif
					<!-- /.featured-article -->
				</div>
				
				<div class="col-md-7 col-lg-7 hidden-xs hidden-sm">
					<ul class="media-list main-list">

						@foreach ($articles as $article)
						  <li class="media">
						    <a class="pull-left" href="{{ route('article.post', $article->slug) }}">
						      <img class="media-object img-responsive" src="{{ asset($storage_url.'img/article/'.$article->banner) }}" alt="{{ $article->banner }}">
						    </a>
						    <div class="media-body">
									<a href="{{ route('article.post', $article->slug) }}">
							      <h4 class="media-heading">{{ $article->title or '' }}</h4>
							    </a>
						      <p class="by-author">{{ isset($article->user) && $article->user->count() ? 'By '.$article->user->name : '' }} <i class="fa fa-clock-o m-l-10"></i> {{ Carbon::createFromTimestamp(strtotime($article->created_at))->toFormattedDateString() }}</p>
						    </div>
						    <ul class="tags">
						    	@foreach ($article->tags as $tag)
						    		<li class="tag"><a href="{{ route('article.tag', $tag->slug) }}">{{ $tag->name }}</a></li>
						    	@endforeach
						    </ul>
						  </li>
						@endforeach

					</ul>
				</div>			    
			@endisset

		</div>
		{{-- /. banner area --}}

		{{-- aricle list --}}
		<div class="row infinite-scroll">
			@isset ($articles)
				@foreach ($articles as $article)
				  <div class="article-card-list visible-xs visible-sm">
						<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
							<a href="{{ route('article.post', $article->slug) }}">
								<img src="{{ asset($storage_url.'img/article/'.$article->banner) }}" class="img-responsive" alt="">						
							</a>
						</div>

						<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">
							<div class="media-body">
								<h4 class="media-heading">
									<a href="{{ route('article.post', $article->slug) }}">{{ $article->title or '' }}</a>
								</h4>
								<p class="by-author">{{ isset($article->user) && $article->user->count() ? 'By '.$article->user->name : '' }} <i class="fa fa-clock-o m-l-10"></i> {{ Carbon::createFromTimestamp(strtotime($article->created_at))->toFormattedDateString() }}</p>
							</div>
							<ul class="tags">
					    	@foreach ($article->tags as $tag)
					    		<li class="tag"><a href="{{ route('article.tag', $tag->slug) }}">{{ $tag->name }}</a></li>
					    	@endforeach

					    </ul>

					    <div class="content-list">
					    	{!! str_limit($article->content, 200) !!}					    	
					    </div>

				    	<a href="{{ route('article.post', $article->slug) }}" class="read-more pull-right">@lang('frontend.read-more')</a>

				    	<hr class="visible-sm visible-xs">

						</div>					
					</div>
				@endforeach
			@endisset

			@foreach ($lists as $list)

				<div class="article-card-list">
					<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
						<a href="{{ route('article.post', $list->slug) }}">
							<img src="{{ asset($storage_url.'img/article/'.$list->banner) }}" class="img-responsive" alt="">						
						</a>
					</div>

					<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">
						<div class="media-body">
							<h4 class="media-heading"><a href="{{ route('article.post', $list->slug) }}">{{ $list->title or '' }}</a></h4>
							<p class="by-author">{{ isset($list->user) && $list->user->count() ? 'By '.$list->user->name : '' }} <i class="fa fa-clock-o m-l-10"></i> {{ Carbon::createFromTimestamp(strtotime($list->created_at))->toFormattedDateString() }}</p>
						</div>
						<ul class="tags">
				    	@foreach ($list->tags as $tag)
				    		<li class="tag"><a href="{{ route('article.tag', $tag->slug) }}">{{ $tag->name }}</a></li>
				    	@endforeach

				    </ul>
				    <div class="content-list">
				    	{!! str_limit($list->content, 200) !!}					    	
				    </div>

			    	<a href="{{ route('article.post', $list->slug) }}" class="read-more pull-right">@lang('frontend.read-more')</a>

			    	<hr class="visible-sm visible-xs">

					</div>					
				</div>

			@endforeach

			
			{{ $lists->links() }}
			


		</div>
		{{-- /. article list --}}
		
	</main>

	

@endsection

@section("script")
	<script>
		
	</script>
@endsection