@extends('layouts.web')

@section('estilos')
	<style>
		.hero_in.general:before {
			background:url({{ asset('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>{{ $nombre }}</h1>
				</div>
			</div>
		</section>
		<!--/hero_in-->
		
		<div class="filters_listing sticky_horizontal">
			<div class="container">
				<ul class="clearfix">
					<li>
						<div class="switch-field">
							<input type="radio" id="all" name="listing_filter" value="all" checked data-filter="*" class="selected">
							<label for="all">All</label>
							<input type="radio" id="popular" name="listing_filter" value="popular" data-filter=".popular">
							<label for="popular">Popular</label>
							
						</div>
					</li>
					<li>
						<div class="layout_view">
							<a href="#0" class="active"><i class="fas fa-th"></i></a>
							<a href="#0"><i class="fas fa-th-list"></i></a>
						</div>
					</li>
				</ul>
			</div>
			<!-- /container -->
		</div>
		<!-- /filters -->

		<div class="container margin_60_35">
			<div class="col-lg-12">
				@include('web.partials.buscador')
				<!-- /row -->
			</div>
			<!-- /custom-search-input-2 -->
			
			<div class="isotope-wrapper">
			<div class="row">
				@foreach($clientes as $cliente)
					<div class="col-xl-4 col-lg-6 col-md-6 isotope-item popular">
						<div class="box_grid">
							<figure>
								<a href="#0" class="wish_bt"></a>
								<a href="{{ url('ver/'.$cliente->cli_slug) }}"><img src="{{ asset('img/clientes/'.$cliente->cli_logo) }}" class="img-fluid" alt="" width="800" height="533"><div class="read_more"><span>Ver más</span></div></a>
								<small>{{ $cliente->categoria->cat_nombre }}</small>
							</figure>
							<div class="wrapper">
								<div class="cat_star"><i class="icon_star"></i><i class="icon_star"></i><i class="icon_star"></i><i class="icon_star"></i></div>
								<h3><a href="{{ url('ver/'.$cliente->cli_slug) }}">{{ $cliente->cli_nombre }}</a></h3>
								<p>Id placerat tacimates definitionem sea, prima quidam vim no. Duo nobis persecuti cu.</p>
								<span class="">{{ $cliente->cli_direccion }}</span>
							</div>
							
						</div>
					</div>
					<!-- /box_grid -->	
				@endforeach
			</div>
			<!-- /row -->
			</div>
			<!-- /isotope-wrapper -->
			{{ $clientes->appends(['nombre' => Request::get('nombre'), 'categoria' => Request::get('categoria')])->links() }} 
			
			
		</div>
		<!-- /container -->
		
		<div class="bg_color_1">
			<div class="container margin_60_35">
				<div class="row">
					<div class="col-md-4">
						<a href="#0" class="boxed_list">
							<i class="fab fa-yelp"></i>
							<h4>Need Help? Contact us</h4>
							<p>Cum appareat maiestatis interpretaris et, et sit.</p>
						</a>
					</div>
					<div class="col-md-4">
						<a href="#0" class="boxed_list">
							<i class="fas fa-wallet"></i>
							<h4>Payments</h4>
							<p>Qui ea nemore eruditi, magna prima possit eu mei.</p>
						</a>
					</div>
					<div class="col-md-4">
						<a href="#0" class="boxed_list">
							<i class="fas fa-sticky-note"></i>
							<h4>Cancel Policy</h4>
							<p>Hinc vituperata sed ut, pro laudem nonumes ex.</p>
						</a>
					</div>
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /bg_color_1 -->
		
	</main>
	<!--/main-->
@endsection

@section('scripts')
	<!-- Masonry Filtering -->
	<script src="{{ asset('js/web/isotope.min.js') }}"></script>
	<script>
	$(window).load(function(){
	  var $container = $('.isotope-wrapper');
	  $container.isotope({ itemSelector: '.isotope-item', layoutMode: 'masonry' });
	});

	$('.filters_listing').on( 'click', 'input', 'change', function(){
	  var selector = $(this).attr('data-filter');
	  $('.isotope-wrapper').isotope({ filter: selector });
	});
	</script>
@endsection