@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 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>
						<!-- <li class="pv10 s:pv0 s:mr20 js-stagger"><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="{{ 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>
								@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">
			<nav class="social x mta mba pea">
				<ul class="df fw tc">
					<li><a href="#" aria-label="Houzz" target="_blank"><svg
								xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
								<path id="Fill_1" data-name="Fill 1"
									d="M0,0V16H5.185V10.667h3.63V16H14V6.791L3.63,3.733V0Z" fill="#fff" />
							</svg>
						</a></li>
					<li><a href="#" aria-label="Instagram" target="_blank"><svg
								xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
								<path id="Shape"
									d="M12.908,16H3.092A3.1,3.1,0,0,1,0,12.908V3.092A3.1,3.1,0,0,1,3.092,0h9.815A3.1,3.1,0,0,1,16,3.092v9.815A3.1,3.1,0,0,1,12.908,16ZM1.559,6.358v6.55a1.535,1.535,0,0,0,1.534,1.534h9.815a1.535,1.535,0,0,0,1.534-1.534V6.358H12.053a4.375,4.375,0,1,1-8.1,0ZM8,5.183A2.827,2.827,0,0,0,5.717,6.358a2.816,2.816,0,1,0,4.567,0A2.827,2.827,0,0,0,8,5.183Zm6.149-3.34-.354,0-2.36.006.01,2.713,2.7-.009Z"
									transform="translate(0)" fill="#fff" />
							</svg>
						</a></li>
					<li><a href="#" aria-label="Facebook" target="_blank"><svg
								xmlns="http://www.w3.org/2000/svg" width="8" height="17" viewBox="0 0 8 17">
								<path id="Shape"
									d="M5.32,17H1.773V8.5H0V5.57H1.773V3.811C1.773,1.422,2.773,0,5.617,0H7.984V2.93H6.5c-1.107,0-1.18.409-1.18,1.173l0,1.466H8L7.686,8.5H5.319V17Z"
									fill="#fff" />
							</svg>
						</a></li>
				</ul>
			</nav>
		</div>
	</article>
</main>
@endsection