@extends('layouts.app')

@section('head')
	<title>{{ trans('portfolio.projects') }} | {{ env('APP_NAME') }}</title>
	<meta name="description" content="">

	<meta property="og:type" content="article" />
	<meta property="og:url" content="{{ route(trans('url.portfolio')) }}" />
	<meta property="og:title" content="{{ trans('portfolio.projects') }}" />
	<meta property="og:image" content="{{ url('/img/uploads/1424287049.jpg') }}" />
	<meta property="og:description" content="Desarrollamos conceptos y los hacemos tangibles para crear experiencias" />
@endsection

@section('content')

<div class="container-fluid">
	<div class="row">
		<div class="col">
			<div style="font-size: 35px;font-weight: bold; text-align: center;">
				{{ trans('portfolio.our_projects') }}
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row" style="margin-top: 20px;margin-bottom: 20px">
			@foreach ($services as $service)
				@if (isset($service->content))
				<div class="col text-center">
					<a href="{{ route(trans('url.service'), [$service->content->slug, $service->id]) }}"><img src="/img/uploads/{{$service->icon}}" class="img-fluid"></a>
					<p><a href="{{ route(trans('url.service'), [$service->content->slug, $service->id]) }}" style="color: black"><strong>{{$service->content->name}}</strong></a></p>
				</div>
				@endif
			@endforeach
		</div>
	</div>
	<div class="row">
		<div class="col">
			<p><a href="{{ route(trans('url.contact')) }}" class="btn btn-yellow w-100" href="">&nbsp;</a></p>
		</div>
	</div>
</div>

<div class="container-fluid" style="margin-top: 20px;">
	@php($i=1)
	@foreach ($projects as $project)
		@if ($i%2 == 0)
			<div class="row" style="display: flex;align-items: center;text-align: right;">
				<div class="col-md-6">
					<div class="flex-wrapper" style="font-size: 30px; font-weight: bold;line-height: 30px">
						@if (isset($project->content))
							<p>{!!str_replace('-', '<br><small class="text-yellow">', $project->name)!!}</small></p>
							<p><a href="{{ route(trans('url.project'), [$project->content->slug, $project->id]) }}" class="btn btn-yellow" href="">{{ trans('portfolio.see_more') }}</a></p>
						@endif
					</div>
				</div>
				<div class="col-md-6">
					<div id="carouselPortfolioControls" class="carousel slide" data-ride="carousel">
						<div class="carousel-inner">
					    	<div class="carousel-item active">
					      		<div style="height: 350px; width: 100%;background-size: cover; background-position: top center; background-image: url('/img/uploads/{{$project->thumbnail}}');"></div>
					    	</div>
					  	</div>
					</div>
				</div>
			</div>
		@else
			<div class="row" style="display: flex;align-items: center;text-align: right;">
				<div class="col-md-6">
					<div id="carouselPortfolioControls" class="carousel slide" data-ride="carousel">
						<div class="carousel-inner">
					    	<div class="carousel-item active">
					      		<div style="height: 350px; width: 100%;background-size: cover; background-position: top center; background-image: url('/img/uploads/{{$project->thumbnail}}');"></div>
					    	</div>
					  	</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="flex-wrapper" style="font-size: 30px; font-weight: bold;line-height: 30px; text-align: left;">
						@if (isset($project->content))
							<p>{!!str_replace('-', '<br><small class="text-yellow">', $project->name)!!}</small></p>
							<p><a href="{{ route(trans('url.project'), [$project->content->slug, $project->id]) }}" class="btn btn-yellow" href="">{{ trans('portfolio.see_more') }}</a></p>
						@endif
					</div>
				</div>
			</div>
		@endif
		@php($i++)
	@endforeach
</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.develop_concept') !!}
			</div>
		</div>
	</div>
</div>
@endsection