@extends('layouts.web')

@section('estilos')
	<style>
		.hero_in.general:before {
			background:url({{ asset('img/web/12.jpg') }}) center center no-repeat;
		}
	</style>
@endsection

@section('main')
<main>	
	<section class="hero_in general">
		<div class="wrapper">
			<div class="container">
				<h1 class="fadeInUp"><span></span>Ofertas Laborales</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">
			<form action="{{ url('ofertas') }}" method="GET">
				<div class="row no-gutters custom-search-input-2 inner">
					<div class="col-lg-10">
						<div class="form-group">
							<input class="form-control" name="buscar" id="buscar" type="text" placeholder="Qué estás buscando...">
							<i class="icon_search"></i>
						</div>
					</div>
					<div class="col-lg-2">
						<input type="submit" class="btn_search" value="Buscar">
					</div>
				</div>
				<!-- /row -->
			</form>
		</div>
		<!-- /custom-search-input-2 -->
		<div class="isotope-wrapper">
			@foreach($empleos as $empleo)
			<div class="box_list isotope-item latest">
				<div class="row no-gutters">
					<div class="col-lg-12">
						<div class="wrapper">
							<a href="#0" class="wish_bt"></a>
							<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><a href="#0">Cargo: {{ $empleo->emp_cargo }}</a></h3>
							<h4>Empresa: {{ $empleo->emp_empresa }}</h4>
							<p>{{ $empleo->emp_descripcion }}</p>
							<span><i class="fas fa-clock"></i> <strong>{{ $empleo->emp_horario }}</strong></span><br>
							<span class="price"><i class="fas fa-dollar-sign"></i> <strong>{{ $empleo->emp_salario }}</strong></span><br>
							<span class="price"><i class="fas fa-list-ol"></i> Vacantes disponibles <strong>{{ $empleo->emp_vacante }}</strong></span><br>
							<span><i class="fas fa-map-marked"></i> {{ $empleo->emp_direccion }}</span>
						</div>
						<ul>
							<li><i class="fas fa-phone-square"></i> {{ $empleo->emp_telefono }}</li>
							<li><i class="far fa-envelope"></i> {{ $empleo->emp_correo }}</li>
							<li><div class="score"><span>Fecha de<em>Publicación</em></span><strong>{{ $empleo->created_at->toFormattedDateString() }}</strong></div></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- /box_list -->
			@endforeach
		</div>
		<!-- /isotope-wrapper -->
		
		{{ $empleos->appends(['buscar' => Request::get('buscar')])->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 and Refunds</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>Quality Standards</h4>
							<p>Hinc vituperata sed ut, pro laudem nonumes ex.</p>
						</a>
					</div>
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /bg_color_1 -->
	</main>
	<!--/main-->
@endsection