@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-intro" data-smooth-item>
			<div class="page-intro pt120 mb100">
				<div class="container container--large mb10">
					<nav class="filter l:df">
						
						<ul class="s:df ttu p0 m0 | js-filter">
							<li class="pv10 s:pv0 s:mr20 js-stagger"><a href="{{ route('portfolio') }}">Portfolio</a></li>
							@foreach($data['project'][0]['category'] as $categorydata)
							<li class="pv10 s:pv0 s:mr20 js-stagger"><a href="{{ route('categoryproject', ['slug' => $categorydata['slug']]) }}">{{ $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>


				<div class="page-title df x">
					<div class="page-title__inner x abs pt40 m:pt100 z1 js-s-parallax">
						<div class="container">
							<h1 class="h1 mb30 js-stagger">{{ $data['project'][0]['title'] }}</h1>
							<div class="x m:w55 js-stagger">
								<p class="lh140">{!! nl2br($data['project'][0]['desc']) !!}</p>
								<p class="lh140">{!! nl2br($data['project'][0]['address']) !!}</p>
							</div>
						</div>
					</div>

					@if(count($data['project'][0]['img'])>0)

					<div class="x y oh">
						<div class="page-title__image x rel oh o60 pen js-hero feature-inner__img">
							<img alt="{{ $data['project'][0]['title'] }}" src="{{asset('static/placeholder.png')}}" data-lazy-src="{{  asset('frontend/images/project/'.$data['project'][0]['img'][0]->image_url) }}" class="abs fill x y o-cover" draggable="false">
						</div>
					</div>

					@endif

				</div>
			</div>
		</section>
		@php
		$i=1
		@endphp
		@foreach($data['project'][0]['img'] as $images)

		@if($i>1)
		<section data-smooth-item>
			<div class="container container--large">
				<figure class="image js-stagger mb40 rel @if($i%2==0) image--left @else image--right  @endif">
					<div class="aspect" style="--aspect: 67%"></div>
					<img src="{{asset('static/placeholder.png')}}" alt="{{ $data['project'][0]['title'] }}" data-lazy-src="{{ asset('frontend/images/project/'.$images->image_url) }}" class="abs left top x y o-cover">
				</figure>
			</div>
		</section>
		@endif

		@php
		$i++
		@endphp
		@endforeach



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