@extends('layouts.app')

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

	<meta property="og:type" content="article" />
	<meta property="og:url" content="{{ route(trans('url.home')) }}" />
	<meta property="og:title" content="Inicio | {{ env('APP_NAME') }}" />
	<meta property="og:image" content="{{ url('/img/uploads/1456959341.jpg') }}" />
	<meta property="og:description" content="Ambientación tematica y diseño para eventos. Lo mejor en modelado 3D, esculturas, escenografía, props y letreros" />
@endsection

@section('content')


<div class="container-fluid" style="margin-top: 20px;">
	<div class="row" style="display: flex;align-items: center;text-align: right;">
		<div class="col-md-6">
			<div class="flex-wrapper" style="font-size: 35px; font-weight: bold;">
				{{-- <p>Ambientación tematica y diseño para eventos. Lo mejor en modelado 3D, <span class="text-yellow">esculturas, escenografía,</span> props y letreros</p> --}}
				{!! trans('welcome.carousel_description') !!}
				<p><a href="{{ route(trans('url.contact')) }}" class="btn btn-gray" href="">{{ trans('welcome.request_quote') }}</a></p>
			</div>
		</div>
		<div class="col-md-6">
			<div id="carouselHomeControls" class="carousel slide" data-ride="carousel">
				<div class="carousel-inner">
				@php($i=1)
				@foreach ($projects as $project)
			    	<div class="carousel-item @if ($i==1) active @endif">
			      		<div style="height: 450px; width: 100%;background-size: cover; background-position: top center; background-image: url('/img/uploads/{{$project->thumbnail}}');"></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>
</div>

<div class="container" style="margin-top: 40px;">
	<div class="row">
		<div class="col text-center">
			<h4><strong>{{ trans('welcome.customer_say') }}</strong></h4>
		</div>
	</div>

	<div id="carouselFade" class="carousel slide" data-ride="carousel" style="margin-top: 20px">
		<div class="carousel-inner">
			<div class="carousel-item active">
		    	<img src="/img/clientes-atika-01.png" class="img-fluid">
		    </div>
			<div class="carousel-item">
				<img src="/img/clientes-atika-02.png" class="img-fluid">
		    </div>
		    <div class="carousel-item">
		    	<img src="/img/clientes-atika-03.png" class="img-fluid">
		    </div>
		    <div class="carousel-item">
		    	<img src="/img/clientes-atika-04.png" class="img-fluid">
		    </div>
		    <div class="carousel-item">
		    	<img src="/img/clientes-atika-05.png" class="img-fluid">
		    </div>
		    <div class="carousel-item">
		    	<img src="/img/clientes-atika-06.png" class="img-fluid">
		    </div>
		</div>
	</div>
</div>

<div class="container-fluid" style="margin-top: 40px;">
	<div class="row" style="display: flex;align-items: center;text-align: left;">
		<div class="col-md-6">
			<img src="/img/home-images-02.png" class="img-fluid">
		</div>
		<div class="col-md-6">
			<div class="flex-wrapper" style="font-size: 35px;">
				<div style="font-weight: bold;">
					{!! trans('welcome.our_projects') !!}
				</div>
				<div style="margin-top: 20px; font-size: 23px">
					{!! trans('welcome.results_obtained') !!}
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container hidden-xs" style="margin-top: 20px">
	<div class="row">
		<div class="col-md-5">
			<a target="_blank" style="margin-top: 60px;display: block;font-size: 30px;color:black;font-weight: bold;padding: 5px;text-decoration: none;" href="https://www.instagram.com/scenic.mx/">{{ trans('welcome.follow_instagram') }} <i style="color: #e9ae42; font-size: 50px; position: relative;top: 7px;" class="fa fa-instagram"></i></a>
		</div>
		<div class="col-md-2 text-center">
			<img src="/img/arrow-scroll.png">
		</div>
		<div class="col-md-5">

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

<div class="container-fluid hidden-xs" style="margin-top: 40px;">
	<div class="row">
		@foreach ($services as $service)
			@if (isset($service->content))
			<div class="col-xs-4 col">
				<a title="{{$service->content->name}}" href="{{ route(trans('url.service'), [$service->content->slug, $service->id]) }}"><img src="/img/uploads/{{$service->thumbnail}}" class="img-fluid"></a>
			</div>
			@endif
		@endforeach
	</div>
</div>

<div class="container-fluid" style="margin-top: 30px;">
	<div id="NewsletterHome">
		<div class="container">
			<div class="row">
				<div class="col-md-6 offset-md-6">
					<div style="font-size: 25px; font-weight: bold;margin-bottom: 30px">
						{!! trans('welcome.receive_information') !!}
					</div>
					<form action="{{ route('subscribers.store') }}" method="POST">
						<input type="email" name="email" class="form-control w-100" placeholder="{{ trans('welcome.form_name') }}" style="border-radius: 0;padding: 10px 20px;border: none; margin-bottom: 20px;">
						<input type="hidden" value="-" name="name">
		                <input name="comments" tabindex="-1" style="position: absolute; left: -5000px" placeholder="If you're human and you can view this, jus leave empty">
		                <input type="hidden" name="language" value="{{ App::getLocale() }}">
		                <input type="hidden" name="referral_url" value="{{ Request::url() }}">
		                {{ csrf_field() }}
						<button type="submit" class="btn btn-gray w-100">{{ trans('welcome.register') }}</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container" style="margin-top: 40px;margin-bottom: 30px;">
	<div class="row">
		<div class="col text-center">
			<h4><strong>{{ trans('welcome.materialize_project') }}</strong></h4>
		</div>
	</div>
	<div class="row" style="margin-top: 20px">
		@foreach ($workshops as $workshop)
			<div class="col-md-4">
				<div style="display: flex;align-items: center;">
					@if (isset($workshop->content))
						<div style="flex: 4;text-align: left;"><img src="/img/uploads/{{$workshop->icon}}"></div>
						<div style="flex: 8;text-align: left;"><a style="color: black;text-decoration: none;" href="{{ route(trans('url.workshop'), [$workshop->content->slug, $workshop->id]) }}"><strong style="font-size: 19px">{{$workshop->content->name}}</strong> <br> {{str_limit($workshop->content->short_description, 55)}}</a></div>
					@endif
				</div>
			</div>
		@endforeach
	</div>
</div>
@endsection