@extends('layouts.app')

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

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

@section('content')

<div class="container-fluid" style="margin-top: 20px;">
	<div class="row row-flex text-left">
		<div class="col-md-6">
			<div class="flex-wrapper" style="padding-left: 30px;">
				<div style="font-size: 45px;font-weight: bold; line-height: 40px">
					{{$service->content->name}} <br>
					<span style="font-size: 20px;font-weight: bold;" class="text-yellow">{{$service->content->caption}}</span> <br>
				</div>
				<div style="font-size: 15px; margin-top: 20px; ">
					{{$service->content->short_description}}
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div id="carouselService1Controls" class="carousel slide" data-ride="carousel">
				<div class="carousel-inner">
				@php($i=1)
				@foreach ($service->images->slice(0,2) as $image)
			    	<div class="carousel-item @if ($i==1) active @endif">
			    		<div style="height: 500px; width: 100%;background-size: cover; background-position: top center; background-image: url('/img/uploads/{{$image->name}}');"></div>
			    	</div>
			    	@php($i++)
				@endforeach
			  	</div>
			  	<a class="carousel-control-prev" href="#carouselService1Controls" role="button" data-slide="prev">
			    	<img src="/img/a-left.png">
			  	</a>
			  	<a class="carousel-control-next" href="#carouselService1Controls" role="button" data-slide="next">
			    	<img src="/img/a-right.png">
			  	</a>
			</div>
		</div>
	</div>
	<div class="row row-flex" style="margin-bottom: 70px">
		<div class="col-md-5">
			<div id="carouselService2Controls" class="carousel slide" data-ride="carousel" style="margin-top: -50px;position: relative;z-index: 2">
				<div class="carousel-inner">
				@php($i=1)
				@foreach ($service->images->slice(2,2) as $image)
			    	<div class="carousel-item @if ($i==1) active @endif">
			      		<div style="height: 350px; 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="#carouselService2Controls" role="button" data-slide="prev">
			    	<img src="/img/a-left.png">
			  	</a>
			  	<a class="carousel-control-next" href="#carouselService2Controls" role="button" data-slide="next">
			    	<img src="/img/a-right.png">
			  	</a>
			</div>
		</div>
		<div class="col-md-7">
			<div style="padding: 20px; min-height: 350px;background-color: #e9ae42; margin-left: -85px; padding-left: 100px; padding-right: 30px; display: flex;align-items: center;">
				<div>
					{!!$service->content->description!!}
				</div>
			</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('services.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_service->content->slug))
				<div class="col-md-1" style="padding-top: 15px;padding-bottom: 15px">
					<a style="color: white" href="{{ route(trans('url.service'), [$prev_service->content->slug, $prev_service->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.service'), [$prev_service->content->slug, $prev_service->id]) }}">{{$prev_service->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">
				{{$service->content->name}}
			</div>
			
			@if (isset($next_service->content->slug))
				<div class="col-md-3" style="padding-top: 15px;padding-bottom: 15px">
					<a style="color: white" href="{{ route(trans('url.service'), [$next_service->content->slug, $next_service->id]) }}">{{$next_service->content->name}}</a>
				</div>
				<div class="col-md-1" style="padding-top: 15px;padding-bottom: 15px">
					<a style="color: white" href="{{ route(trans('url.service'), [$next_service->content->slug, $next_service->id]) }}"><img src="/img/arrow-right-white.png" class="img-fluid"></a>
				</div>
			@endif
		</div>
	</div>
</div>
@endsection