@extends('layouts.web')

@section('estilos')
	<style>
		.hero_in.general:before {
			background:url({{ asset('img/clientes/'.$cliente->cli_img_bg) }}) center center no-repeat;
			-webkit-background-size: cover;
		  	-moz-background-size: cover;
		  	-o-background-size: cover;
		  	background-size: cover;
		}
	</style>
@endsection

@section('main')
	<main>
		<section class="hero_in general">
			<div class="wrapper">
				<div class="container">
					<h1 class="fadeInUp"><span></span>{{ $cliente->cli_nombre }}</h1>
				</div>
				<span class="magnific-gallery">
					<a href="{{ asset('img/clientes/'.$cliente->cli_logo) }}"  class="btn_photos" title="Galeria" data-effect="mfp-zoom-in">Ver Galeria</a>
					@foreach($imagenes as $imagen)
						<a href="{{ asset('img/clientes/'.$imagen->ima_url) }}" title="Galeria" data-effect="mfp-zoom-in"></a>
					@endforeach
				</span>
			</div>
		</section>
		<!--/hero_in-->

		<div class="bg_color_1">
			<nav class="secondary_nav sticky_horizontal">
				<div class="container">
					<ul class="clearfix">
						<li><a href="#description" class="active">Descripción</a></li>
						<li><a href="#reviews"></a></li>
						<li><a href="#sidebar">Booking</a></li>
					</ul>
				</div>
			</nav>
			<div class="container margin_60_35">
				<div class="row">
					<div class="col-lg-8">
						<section id="description">
							<h2>Descripción</h2>
							<p>{{ $cliente->cli_descripcion }}</p>
							<div class="row">
								<div class="col-lg-6">
									<ul class="">
										<li><i class="fas fa-phone"></i> {{ $cliente->cli_telefono }}</li>
										<li><i class="fas fa-map-marked-alt"></i> {{ $cliente->cli_direccion }}</li>
									</ul>
								</div>
								@if($cliente->cli_correo)
								<div class="col-lg-6">
									<ul class="">
										<li><i class="far fa-envelope"></i> {{ $cliente->cli_correo }}</li>
									</ul>
								</div>
								@endif
								@if($cliente->cli_pagina_web)
								<div class="col-lg-12">
									<ul class="">
										<li><i class="fab fa-chrome"></i> <a href="{{ $cliente->cli_pagina_web }}" target="_blank">{{ $cliente->cli_pagina_web }}</a></li>
									</ul>
								</div>
								@endif
							</div>
							<!-- /row -->
							<hr>
							<div class="col-lg-12">
								<div class="main_title_2">
									<h2>Galeria de imagenes</h2>
									<p></p>
								</div>
								<div class="grid">
									<ul class="magnific-gallery">
										@foreach($imagenes as $imagen)
											<li>
												<figure>
													<img src="{{ asset('img/clientes/'.$imagen->ima_url) }}" alt="">
													<figcaption>
														<div class="caption-content">
															<a href="{{ asset('img/clientes/'.$imagen->ima_url) }}" title="Galeria" data-effect="mfp-zoom-in">
																<i class="fas fa-images"></i>
																<p>Ver</p>
															</a>
														</div>
													</figcaption>
												</figure>
											</li>
										@endforeach										
									</ul>
								</div>
								<!-- /grid gallery -->
							</div>
							<hr>
							<h3>Ubicación</h3>
							<div id="map" class="map map_single add_bottom_30">				
								<iframe src="{{$cliente->cli_ubicacion }}" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
							</div>
							<!-- End Map -->
						</section>
						<!-- /section -->

					</div>
					<!-- /col -->
					
					<aside class="col-lg-4" id="sidebar">
						<div class="box_detail booking">
						<div class="main_title_3">
							<span><em></em></span>
							<h2>Paginas relacionadas</h2>
						</div>
						@foreach($relacionados as $relacionado)
						<div class="col-md-12">
							<a href="{{ url('ver/'.$relacionado->cli_slug) }}" class="grid_item">
								<figure>
									<img src="{{ asset('img/clientes/'.$relacionado->cli_logo) }}" class="img-fluid" alt="">
									<div class="info">
										<h3>{{ $relacionado->cli_nombre }}</h3>
										<p>{{ $relacionado->categoria->cat_nombre }}</p>
									</div>
								</figure>
							</a>
						</div>
						<!-- /grid_item -->
						@endforeach
						</div>
						<ul class="share-buttons">
							<li><a class="fb-share" href="#0"><i class="social_facebook"></i> Share</a></li>
							<li><a class="twitter-share" href="#0"><i class="social_twitter"></i> Tweet</a></li>
							<li><a class="gplus-share" href="#0"><i class="social_googleplus"></i> Share</a></li>
						</ul>
					</aside>
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /bg_color_1 -->
	</main>
	<!--/main-->
@endsection

@section('scripts')
		
@endsection