@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="portfolio">

		<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">
				<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  js-stagger"><a href="{{ route('portfolio') }}">All</a></li>
						
						@foreach($category as $categorydata)
						
						<li class="pv10 s:pv0 s:mr20 js-stagger {{ $data['cat_id'] == $categorydata['id'] ? 'is-active' : '' }} "><a href="{{ str_replace(' ','_',$categorydata['title']) }}-{{ $categorydata['id'] }}">{{ $categorydata['title'] }}</a></li>
						@endforeach
						<!--<li class="pv10 s:pv0 s:mr20 js-stagger"><a href="portfolio/special-projects.html">Special
								Projects</a></li>
						<li class="pv10 s:pv0 s:mr20 js-stagger"><a href="portfolio/commercial.html">Commercial</a>
						</li>-->
					</ul>
				</nav>
			</div>
		</section>

		<section data-smooth-item>
			@if(isset($data['project']))
			@foreach($data['project'] as $projects)
			
			@if (count($projects['img']) > 0)
			
			<div class="slider oh js-stagger | custom-homes1" id="slider1-{{ $projects['id'] }}">
				<div class="slider__outer rel pv20">

					<div class="slider__inner rel">
						<div class="slider__wrap">
							<div class="slider__wrap-in pen df">

								<div class="slider__wrap-item pen">
									<div class="slider__wrap-inner rel oh df aic">
										<div class="slider__wrap-img x y rel o35">
											<img src="{{ asset('frontend/images/project/'.$projects['img'][0]->image_url) }}" alt="{{ $projects['title'] }}"
												class="abs left top x y o-cover"
												data-lazy-src="{{ asset('frontend/images/project/'.$projects['img'][0]->image_url) }}" draggable="false">
										</div>
										<div class="slider__wrap-title abs white left rel z2 | js-stagger">
											<h2 class="h1 pb5">{{ $projects['title'] }}</h2>

											<div class="dib pea">
												<a href="{{ 'project-'.str_replace(' ','_',$projects['title']).'-'.$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>
								@php
								$i = 0
								@endphp
								@foreach($projects['img'] as $projectsimg)
									@if($i>0)
									<div class="slider__wrap-item pen rel">
										<div class="slider__wrap-inner oh">
											<div class="slider__wrap-img rel">
												<img src="static/placeholder.png" alt="Ivanhoe Blvd <br> Custom Home"
													class="abs left top x y o-cover"
													
													data-lazy-src="{{ asset('frontend/images/project/'.$projectsimg->image_url) }}" draggable="false">
											</div>
										</div>
										<a href="#" class="abs top left x y z1 pea"></a>
									</div>
									@endif
									@php
									$i++
									@endphp
								@endforeach
								
							</div>
						</div>
					</div>
					
					<div class="container container--smaller">
						<div class="slider__wrapper-bar df aic mt20">
							<div class="slider__wrapper-arrow pr10">
								<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>

							</div>

							<div class="slider__wrapper-num pr10">01</div>

							<div class="slider__bar rel">
								<div class="slider__bar-in rel bg-white"></div>
							</div>

							<div class="slider__wrapper-num pl10">{{ count($projects['img']) }}</div>
						</div>
					</div>
				</div>
			</div>
			@endif
			@endforeach
			@endif
		</section>

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