@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">People</li>
</ol>
</div>
@endsection
<div class="container">
	<form id="filtersForm">
		<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">
						Work Status
					</button>
					<div class="dropdown-menu" style="width: 200px !important;">
						<div class="p-3" style="font-size: 12px;">
							@foreach($workStatusFilters as $workStatus)
							<label class="form-check">
								<input class="form-check-input" type="checkbox" name="workStatus[]" value="{{$workStatus->name}}">
								<span class="form-check-label">
									{{$workStatus->name. ' ('.$workStatus->work_status_count.')'}}
								</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">
						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. ' ('.$type->person_type_count.')'}}
								</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. ' ('.$source->person_source_count.')'}}
								</span>
							</label> <!-- form-check.// -->
							@endforeach
						</div>
					</div>
				</div>

				
			</div>
	
		</div>
	</form>
	<div class="row">
		<div class="col-2">
			<strong>Actions:</strong>
			<p>
				<a href="#">No new action</a>
				<!--form id="filtersForm">
		            <input type="text" class="form-control" name="search" placeholder="Search Organizations">
        		     <input type="button" name="search" value="Search"  onclick="searchFilters()" class="btn btn-primary margintop">
            	</form-->
			</p>
		</div>
		<div class="col-7">
		
			<h4 class="p-0 m-0 p-0 mb-2"><strong>People</strong></h4>
			<div class="ajax-load">
			@include('internal.person.listing')
		</div>
		</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 = $('#filtersForm').serializeArray();
		$.get('?page=' + page, filters, function(data){
				$('.ajax-load').append(data.html);
			});
	}
	$('input[type="checkbox"]').click(function(){
		searchFilters();
		});
	function searchFilters(){
		
		let filters = $('#filtersForm').serializeArray();
			$.post("{{route('personFilters')}}",filters, function(data){
				$('.ajax-load').html(data.html);
			});
			page = 1;

	}
</script>


@endsection
@endsection