@extends('layouts.web')

@section('estilos')
	<!-- SPECIFIC CSS -->
    <link href="{{ asset('layerslider/css/layerslider.css') }}" rel="stylesheet" type="text/css">
    <style>
    	.call_section {
  			background:url({{ asset('img/web/6.jpg') }}) center center no-repeat fixed;
		}
    </style>
@endsection

@section('main')
	<main>
		<!-- Slider -->
		<div id="full-slider-wrapper">
			<div id="layerslider" style="width:100%;height:550px;">
				<!-- first slide -->
				<div class="ls-slide" data-ls="slidedelay: 5000; transition2d:103;">
					<img src="{{ asset('img/clientes/bg9.jpg') }}" class="ls-bg" alt="Slide background">
					<h3 class="ls-l slide_typo" style="top: 47%; left: 50%;" data-ls="offsetxin:0;durationin:2000;delayin:1000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% bottom 0;offsetxout:0;rotatexout:90;transformoriginout:50% bottom 0;">Book <strong>Unique</strong> Espacio 1</h3>
					<p class="ls-l slide_typo_2" style="top:55%; left:50%;" data-ls="durationin:2000;delayin:1000;easingin:easeOutElastic;">
						Empresas | Profesionales | Turismo
					</p>
					<a class="ls-l btn_1 rounded" style="top:65%; left:50%;white-space: nowrap;" data-ls="durationin:2000;delayin:1400;easingin:easeOutElastic;" href='#0'>Ver mas</a>
				</div>
				@foreach($patrocinadores as $patrocinador)
				<!-- second slide -->
				<div class="ls-slide" data-ls="slidedelay:5000; transition2d:103;">
					<img src="{{ asset('img/clientes/'.$patrocinador->cli_img_bg) }}" class="ls-bg" alt="Slide background">
					<h3 class="ls-l slide_typo" style="top: 47%; left: 50%;" data-ls="offsetxin:0;durationin:2000;delayin:1000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% bottom 0;offsetxout:0;rotatexout:90;transformoriginout:50% bottom 0;"><strong>{{ $patrocinador->cli_nombre }}</strong> - Espacio Disponible</h3>
					<p class="ls-l slide_typo_2" style="top:55%; left:50%;" data-ls="durationin:2000;delayin:1000;easingin:easeOutElastic;">
						Empresas | Profesionales | Turismo
					</p>
					<a class="ls-l btn_1 rounded" style="top:65%; left:50%;white-space: nowrap;" data-ls="durationin:2000;delayin:1400;easingin:easeOutElastic;" href="{{ url('ver/'.$patrocinador->cli_slug) }}">Ver mas...</a>
				</div>
				@endforeach
			</div>
		</div>
		<!-- End layerslider -->

		
		<div class="search_container">
			<div class="container">
				<div class="col-lg-12">
					@include('web.partials.buscador')
					<!-- /row -->
				</div>
				<!-- /custom-search-input-2 -->
			</div>
		</div>
		<!-- /search_container -->
		
		<div class="container-fluid margin_60_0">
			<div class="main_title_2">
				<span><em></em></span>
				<h2>Our Popular Tours Recomendado</h2>
				<p>Cum doctus civibus efficiantur in imperdiet deterruisset.</p>
			</div>
			<div id="reccomended" class="owl-carousel owl-theme">
				<div class="item">
					<div class="box_grid">
						<figure>
							<a href="#0" class="wish_bt"></a>
							<a href="{{ url('empresas') }}"><img src="{{ asset('img/web/5.jpg') }}" class="img-fluid" alt="" width="800" height="533"><div class="read_more"><span>Ver mas ..</span></div></a>
							<small>Empresas</small>
						</figure>
						<div class="wrapper">
							<h3><a href="{{ url('empresas') }}"> Empresas</a></h3>
							<p>Id placerat tacimates definitionem sea, prima quidam vim no. Duo nobis persecuti cu.</p>
							<span class=""></span>
						</div>
						
					</div>
				</div>
				<!-- /item -->	
				<div class="item">
					<div class="box_grid">
						<figure>
							<a href="#0" class="wish_bt"></a>
							<a href="{{ url('profesionales') }}"><img src="{{ asset('img/web/8.jpg') }}" class="img-fluid" alt="" width="800" height="533"><div class="read_more"><span>Ver mas ..</span></div></a>
							<small>Profesionales</small>
						</figure>
						<div class="wrapper">
							<h3><a href="{{ url('profesionales') }}"> Profesionales</a></h3>
							<p>Id placerat tacimates definitionem sea, prima quidam vim no. Duo nobis persecuti cu.</p>
							<span class=""></span>
						</div>
						
					</div>
				</div>
				<!-- /item -->	
				<div class="item">
					<div class="box_grid">
						<figure>
							<a href="#0" class="wish_bt"></a>
							<a href="{{ url('patrocinadores') }}"><img src="{{ asset('img/web/10.jpg') }}" class="img-fluid" alt="" width="800" height="533"><div class="read_more"><span>Ver mas ..</span></div></a>
							<small>Patrocinadores</small>
						</figure>
						<div class="wrapper">
							<h3><a href="{{ url('patrocinadores') }}"> Patrocinadores</a></h3>
							<p>Id placerat tacimates definitionem sea, prima quidam vim no. Duo nobis persecuti cu.</p>
							<span class=""></span>
						</div>
						
					</div>
				</div>
				<!-- /item -->	
				
							
			</div>
			<!-- /carousel -->
			<div class="container">
				<p class="btn_home_align"><a href="{{ url('buscar') }}" class="btn_1 rounded">Ver todo</a></p>
			</div>
			<!-- /container -->
			<hr class="large">
		</div>
		<!-- /container -->
		
		<div class="container-fluid margin_30_95 pl-lg-5 pr-lg-5">
			<section class="add_bottom_45">
				<div class="main_title_3">
					<span><em></em></span>
					<h2>Mas destacados</h2>
					<p>Cum doctus civibus efficiantur in imperdiet deterruisset.</p>
				</div>
				<div class="row">
					@foreach($populares as $popular)
						<div class="col-xl-3 col-lg-6 col-md-6">
							<a href="{{ url('ver/'.$popular->cli_slug) }}" class="grid_item">
								<figure>
									
									<img src="{{ asset('img/clientes/'.$popular->cli_logo) }}" class="img-fluid" alt="">
									<div class="info">
										<div class="cat_star"><i class="icon_star"></i><i class="icon_star"></i><i class="icon_star"></i><i class="icon_star"></i><i class="icon_star"></i></div>
										<h3>{{ $popular->cli_nombre }}</h3>
										<p>{{ $popular->categoria->cat_nombre }}</p>
									</div>
								</figure>
							</a>
						</div>
						<!-- /grid_item -->
					@endforeach
				</div>
				<!-- /row -->
				<a href="{{ url('buscar') }}"><strong>Ver todos<i class="arrow_carrot-right"></i></strong></a>
			</section>
			<!-- /section -->
			
			<section>
				<div class="main_title_3">
					<span><em></em></span>
					<h2>Últimos agregados</h2>
					<p>Cum doctus civibus efficiantur in imperdiet deterruisset.</p>
				</div>
				<div class="row">
					@foreach($recientes as $reciente)
						<div class="col-xl-3 col-lg-6 col-md-6">
						<a href="{{ url('ver/'.$reciente->cli_slug) }}" class="grid_item">
							<figure>
								
								<img src="{{ asset('img/clientes/'.$reciente->cli_logo) }}" class="img-fluid" alt="">
								<div class="info">
									<h3>{{ $reciente->cli_nombre }}</h3>
									<p>{{ $reciente->categoria->cat_nombre }}</p>
								</div>
							</figure>
						</a>
					</div>
					<!-- /grid_item -->
					@endforeach
				</div>
				<!-- /row -->
				<a href="{{ url('buscar') }}"><strong>Ver Todos<i class="arrow_carrot-right"></i></strong></a>
			</section>
			<!-- /section -->
		</div>
		<!-- /container -->

		<div class="call_section">
			<div class="container clearfix">
				<div class="col-lg-5 col-md-6 float-right wow" data-wow-offset="250">
					<div class="block-reveal">
						<div class="block-vertical"></div>
						<div class="box_1">
							<h3>Espacio aun sin utilizar contenido</h3>
							<p>Ius cu tamquam persequeris, eu veniam apeirian platonem qui, id aliquip voluptatibus pri. Ei mea primis ornatus disputationi. Menandri erroribus cu per, duo solet congue ut. </p>
							<a href="#0" class="btn_1 rounded">Read more</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--/call_section-->
	</main>
	<!-- /main -->
@endsection

@section('scripts')
	<!-- SPECIFIC SCRIPTS -->
    <script src="{{ asset('layerslider/js/greensock.js') }}"></script>
    <script src="{{ asset('layerslider/js/layerslider.transitions.js') }}"></script>
    <script src="{{ asset('layerslider/js/layerslider.kreaturamedia.jquery.js') }}"></script>
    <script>
        'use strict';
        $('#layerslider').layerSlider({
            autoStart: true,
            lazyLoad: true,
            navButtons: true,
            navStartStop: false,
            showCircleTimer: false,
            responsive: true,
            responsiveUnder: 1280,
            layersContainer: 1200,
            skinsPath: 'layerslider/skins/'
                // Please make sure that you didn't forget to add a comma to the line endings
                // except the last line!
        });
    </script>
@endsection