@extends('layouts.internal')

@section('content')

@section('breadcrumb')
<div class="c-subheader justify-content-between px-3">
<ol class="breadcrumb border-0 m-0 px-0 px-md-3">
<li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
@if(url()->previous() != url()->current())
<li class="breadcrumb-item"><a href="{{url()->previous()}}">&leftarrow; Previous Page</a></li>
@endif						
<li class="breadcrumb-item " aria-current="page">Jobs</li>
</ol>
</div>
@endsection
<div class="container">
	<form id="JobFiltersForm">
		<div class="row ">
			<div class="col-12 text-right mb-4">
				<strong>Filters: </strong>
				@foreach($filters as $key => $filter)
				<div class="btn-group">
					<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						{{$key}}
					</button>
					<div class="dropdown-menu" style="width: 200px !important;">
						<div class="p-3" style="font-size: 12px;">
							@foreach($filter as $keyId => $keyWords)
							@if($keyWords['skillName'] != "")
							<label class="form-check">
								<input class="form-check-input" type="checkbox" name="skillsFilters[]" value="{{$keyId}}">
								<span class="form-check-label">
									{{$keyWords['skillName']. ' ('.$keyWords['count'].')'}}
								</span>
							</label> <!-- form-check.// -->
							@endif
							@endforeach				
						</div>
					</div>				
				</div>
				@endforeach		

				<div class="btn-group">
					<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						Location
					</button>
					<div class="dropdown-menu" style="width: 200px !important;">
						<div class="p-3" style="font-size: 12px;">
							@foreach($cityFilters as $city)
							<label class="form-check">
								<input class="form-check-input" type="checkbox" name="city[]" value="{{$city->name}}">
								<span class="form-check-label">
									{{$city->name. ' ('.count($city->city).')'}}
								</span>
							</label> <!-- form-check.// -->
							@endforeach
						</div>
					</div>
				</div>

				<div class="btn-group">
					<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						Job Type
					</button>
					<div class="dropdown-menu" style="width: 200px !important;">
						<div class="p-3" style="font-size: 12px;">
							@foreach($typeFilters as $type)
							<label class="form-check">
								<input class="form-check-input" type="checkbox" name="type[]" value="{{$type->name}}">
								<span class="form-check-label">
									{{$type->name. ' ('.count($type->type).')'}}
								</span>
							</label> <!-- form-check.// -->
							@endforeach
						</div>
					</div>
				</div>

				<div class="btn-group">
					<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Source
					</button>
					<div class="dropdown-menu" style="width: 200px !important;">
						<div class="p-3" style="font-size: 12px;">
							@foreach($sourceFilters as $source)
							<label class="form-check">
								<input class="form-check-input" type="checkbox" name="source[]" value="{{$source->name}}">
								<span class="form-check-label">
									{{$source->name. ' ('.count($source->source).')'}}
								</span>
							</label> <!-- form-check.// -->
							@endforeach
						</div>
					</div>
				</div>

				<div class="btn-group">
					<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Status
					</button>
					<div class="dropdown-menu" style="width: 200px !important;">
						<div class="p-3" style="font-size: 12px;">
							@foreach($statusFilters as $name => $status)
							<label class="form-check">
								<input class="form-check-input" type="checkbox" name="status[]" value="{{$name}}">
								<span class="form-check-label">
									{{$name. ' ('.$status.')'}}
								</span>
							</label> <!-- form-check.// -->
							@endforeach
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
	<div class="row">
		<div class="col-2">
			<strong>Actions:</strong>
			<p>
				<a href="#">View sourcing queue</a>
			</p>
		</div>
		<div class="col-7 ajax-load">
			<h4 class="p-0 m-0 p-0 mb-2"><strong>Current Job Openings</strong></h4>
			@include('internal.jobs.jobListing')
		</div>
		<div class="col-3">
			Advertisement space
		</div>
	</div>
</div>

@section('script')
<script>
var page = 1;
	$(window).scroll(function() {
	    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
	        page++;
	        loadMoreData(page);
	    }
	});


	function loadMoreData(page){
		let filters = $('#JobFiltersForm').serializeArray();
		$.get('?page=' + page,filters, function(data){
				$('.ajax-load').append(data.html);
			});
	}
	function jobupdate(event, id){
		let txt = '<i class="fa fa-eye fa-1x"></i>';
		if($(event).closest('.jobListingContainer').hasClass('disabledbutton')){
			txt = '<i class="fa fa-eye-slash fa-1x"></i>';
		}
		$(event).html(txt);
		$(event).closest('.jobListingContainer').toggleClass('disabledbutton');
		$.post("{{route('jobUpdate')}}",{'id':id}, function(){
			});

	}
	
	$('input[type="checkbox"]').click(function(){
		searchFilters();
		});
	function searchFilters(){
		
		let filters = $('#JobFiltersForm').serializeArray();
			$.post("{{route('jobFilters')}}",filters, function(data){
				$('.ajax-load').html(data.html);
			});
			page = 1;

	}
</script>

@endsection
@endsection