@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">Todos</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">
				<form action="{{ url($nombre) }}" type="GET">
					
				<div class="row no-gutters custom-search-input-2 inner">
					<div class="col-lg-10">
						<div class="form-group">
							<input class="form-control" type="text" name="nombre" id="nombre" placeholder="Cual categoría estas buscando">
							<i class="icon_search"></i>
						</div>
					</div>
					
					<div class="col-lg-2">
						<input type="submit" class="btn_search" value="Search">
					</div>
				</div>
				</form>
				<!-- /row -->
			</div>
			<!-- /custom-search-input-2 -->
			
			<div class="isotope-wrapper">
			<div class="row">
				@foreach($categorias as $categoria)
					<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('categoria/'.$categoria->cat_slug) }}"><img src="{{ asset('img/categorias/'.$categoria->cat_imagen) }}" class="img-fluid" alt="" width="800" height="533"><div class="read_more"><span>Ver más</span></div></a>
								
							</figure>
							<div class="wrapper">
								<h3><a href="{{ url('categoria/'.$categoria->cat_slug) }}">{{ $categoria->cat_nombre }}</a></h3>
								
							</div>
						</div>
					</div>
					<!-- /box_grid -->	
				@endforeach
			</div>
			<!-- /row -->
			</div>
			<!-- /isotope-wrapper -->
			
			<!--<p class="text-center"><a href="#0" class="btn_1 rounded add_top_30">Cargar mas..</a></p>-->
			
		</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