@extends('layouts.app')

@section('head')
	<title>{{$project->content->name}} | {{ env('APP_NAME') }}</title>
	<meta name="description" content="">

	<meta property="og:type" content="article" />
	<meta property="og:url" content="{{ route(trans('url.project'), [$project->content->slug, $project->id]) }}" />
	<meta property="og:title" content="{{$project->content->name}}" />
	<meta property="og:image" content="{{ url('/img/uploads/' . $project->thumbnail) }}" />
	<meta property="og:description" content="{{ $project->content->short_description }}" />
@endsection

@section('content')
<div class="row-flex" style="height: 350px;width: 100%;background-size: 75%;background-position: right;background-image: url('/img/uploads/{{$project->thumbnail}}');background-repeat: no-repeat;">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-6">
				 <div class="flex-wrapper" style="font-size: 35px; font-weight: bold;background-color: white; padding: 40px;">
					<p>{!!str_replace('-', '<br><small class="text-yellow">', $project->name)!!}</small></p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="container-fluid"  style="background-color: #e9ae42; padding-top: 30px; padding-bottom: 30px; color: white; text-align: left; margin-bottom: 30px">
	<div class="container">
		<div class="row">
			<div class="col">
				<div style="font-size: 14px; ">
					<strong>{{ trans('portfolio.project') }}</strong> {{$project->content->name}} | <strong>{{ trans('portfolio.customer') }}</strong> {{$project->client}} | <strong>{{ trans('portfolio.dimensions') }}</strong> {{$project->size}} | <strong>{{ trans('portfolio.materials') }}</strong> {{$project->materials}} | <strong>{{ trans('portfolio.techniques') }}</strong> {{$project->skills}}
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container-fluid" style="margin-top: 40px;">
	<div class="row row-flex text-left">
		<div class="col-md-6 text-center">
			<div id="carouselHomeControls" class="carousel slide" data-ride="carousel">
				<div class="carousel-inner">
				@php($i=1)
				@foreach ($project->images as $image)
			    	<div class="carousel-item @if ($i==1) active @endif">
			      		<div style="height: 550px; width: 100%;background-size: cover; background-position: center; background-image: url('/img/uploads/{{$image->name}}');"></div>
			    	</div>
			    	@php($i++)
				@endforeach
			  	</div>
			  	<a class="carousel-control-prev" href="#carouselHomeControls" role="button" data-slide="prev">
			    	<img src="/img/a-left.png">
			  	</a>
			  	<a class="carousel-control-next" href="#carouselHomeControls" role="button" data-slide="next">
			    	<img src="/img/a-right.png">
			  	</a>
			</div>
		</div>
		<div class="col-md-6">

				<div style="font-size: 16px; background-color: #f7f9fa; padding: 60px; padding-bottom: 35px;">
					<div class="workshops-content">
						<div class="workshops-tab workshop-1" style="font-size: 16px; margin-top: 20px; ">
							<p style="font-weight: bold; font-size: 25px">Necesidad</p>
							<div style="direction: block; margin: 10px 0px">
								{{$project->content->short_description}}
							</div>
						</div>
						<div class="workshops-tab workshop-2" style="font-size: 16px; margin-top: 20px; display: none;">
							<p style="font-weight: bold; font-size: 25px">Proceso</p>
							<div style="direction: block; margin: 10px 0px">
								{{$project->content->description}}
							</div>
						</div>
						<div class="workshops-tab workshop-3" style="font-size: 16px; margin-top: 20px; display: none;">
							<p style="font-weight: bold; font-size: 25px">Resultado</p>
							<div style="direction: block; margin: 10px 0px">
								{{$project->content->description_2}}
							</div>
						</div>
					</div>
					<ul class="workshops-paginate transparent" style="margin-top: 20px">
						<li data-page="1" class="active">1</li>
						<li data-page="2">2</li>
						<li data-page="3">3</li>
					</ul>
				</div>

		</div>
	</div>
</div>

<div class="container-fluid"  style="background-color: #e9ae42; padding-top: 30px; padding-bottom: 30px; color: white; text-align: center; margin-top: 30px; margin-bottom: 30px">
	<div class="row">
		<div class="col">
			<div style="font-size: 30px; font-weight: bold;">
				{{ trans('portfolio.learn_more') }}
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row" style="color: white; font-size: 16px; font-weight: bold;margin-top: 25px">
			@if (isset($prev_project->content))
				<div class="col-md-1" style="padding-top: 15px;padding-bottom: 15px">
					<a style="color: white" href="{{ route(trans('url.project'), [$prev_project->content->slug, $prev_project->id]) }}"><img src="/img/arrow-left-white.png" class="img-fluid"></a>
				</div>
				<div class="col-md-3" style="padding-top: 15px;padding-bottom: 15px">
					<a style="color: white" href="{{ route(trans('url.project'), [$prev_project->content->slug, $prev_project->id]) }}">{{$prev_project->content->name}}</a>
				</div>
			@else
				<div class="col-md-1" style="padding-top: 15px;padding-bottom: 15px"></div>
				<div class="col-md-3" style="padding-top: 15px;padding-bottom: 15px"></div>
			@endif

			<div class="col-md-4" style="border-left: 1px solid white;border-right: 1px solid white;padding-top: 15px;padding-bottom: 15px">
				{{$project->content->name}}
			</div>
			
			@if (isset($next_project->content))
				<div class="col-md-3" style="padding-top: 15px;padding-bottom: 15px">
					<a style="color: white" href="{{ route(trans('url.project'), [$next_project->content->slug, $next_project->id]) }}">{{$next_project->content->name}}</a>
				</div>
				<div class="col-md-1" style="padding-top: 15px;padding-bottom: 15px">
					<a style="color: white" href="{{ route(trans('url.project'), [$next_project->content->slug, $next_project->id]) }}"><img src="/img/arrow-right-white.png" class="img-fluid"></a>
				</div>
			@endif
		</div>
	</div>
</div>
@endsection

@section('scripts')
	<script>
		$('.workshops-paginate>li').on('click', function(){
			var page = $(this).data('page');
			$('.workshops-paginate>li').removeClass('active');
			$(this).addClass('active');
			$('.workshops-tab').hide();
			$('.workshop-' + page).fadeIn();
		});
	</script>
@endsection