@extends('layout.index')

@section('meta_content')
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Design Partners - Your Dreams Our Design</title>
@endsection

@section('content')
<main data-router-wrapper data-smooth>

	<article data-router-view="home">

		<section class="page-title" data-smooth-item>
			<div class="page-title__inner pt160 js-stagger">
				<div class="container">
					<h1 class="h1 mb30">Portfolio</h1>
				</div>
			</div>
		</section>
		<section data-smooth-item>
			<div class="container container--large mb10">
				<nav class="filter l:df">
					<p class="ttu m0 p0 filter__title js-stagger">Filter</p>
					<ul class="s:df ttu p0 m0 | js-filter">
						<li class="pv10 s:pv0 s:mr20 is-active js-stagger"><a href="{{ route('portfolio') }}">All</a></li>
						@foreach($category as $categorydata)
						<li class="pv10 s:pv0 s:mr20 js-stagger"><a href="{{ route('categoryproject', ['slug' => $categorydata['slug']]) }}">{{ $categorydata['title'] }}</a></li>
						@endforeach
					</ul>
				</nav>
			</div>
		</section>
		@if(isset($data['project']))
		@foreach($data['project'] as $projects)

		@if (count($projects['img']) > 0)
		<section class="feature wct | js-hero" data-smooth-item>
			<div class="feature-inner rel vh100 vw100 oh df aic">
				<div class="feature-inner__title abs z1 x">
					<div class="container container--small">
						<h2 class="h1 pb5 js-stagger">{{ $projects['title'] }}</h2>
						<div class="dib js-stagger">
							<a href="{{ route('projectdetail', ['title' => str_replace(' ','_',$projects['title']),'id'=>$projects['id']]) }}" class="button  df" aria-label="View View Build">
								<span class="arrow"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="13.74px" height="10.29px" viewBox="0 0 13.74 10.29" style="enable-background:new 0 0 13.74 10.29;" xml:space="preserve">
										<g id="Group_3_Copy_2_1_" transform="translate(-0.092 -0.015)">
											<path id="Fill_1_1_" class="st0" d="M0.09,5.92h11.9V4.39H0.09V5.92z" />
											<path id="Fill_2_1_" class="st0" d="M8.69,10.3L7.61,9.23l4.07-4.07L7.61,1.09l1.08-1.08l5.14,5.14L8.69,10.3z" />
										</g>
									</svg>
								</span>
								<span class="text">View Build</span>
							</a>

						</div>
					</div>
				</div>
				<div class="js-parallax x y">
					<figure class="feature-inner__img pen o60 oh x y">
						<img src="{{asset('static/placeholder.png')}}" data-lazy-src="{{ asset('frontend/images/project/'.$projects['img'][0]->image_url) }}" alt="{{ $projects['title'] }}" class="abs top left x y o-cover">
					</figure>
				</div>
			</div>
		</section>
		@endif
		@endforeach
		@endif


		@include('partial.footer')
		<div class="site-sidebar df fw aic fix z1 right y top pen">

			<div class="site-sidebar__timeline x tc h50 s:pt40">
				<div class="site-sidebar__timeline-num site-sidebar__timeline-num--first">1</div>
				<div class="site-sidebar__timeline-bar df jcc">
					<div class="site-sidebar__timeline-barOuter"></div>
					<div class="site-sidebar__timeline-barInner"></div>
				</div>
				<div class="site-sidebar__timeline-num site-sidebar__timeline-num--last">{{ count($data['project']) }}</div>

			</div>

			@include('partial.sociallink')
		</div>
	</article>
</main>
@endsection