@extends('front.layouts.main')

@section('title'){{'Search & Browse Top Consultants from Different Categories'}}@endsection

@section('description')Empower Jobs allows you to browse and search top consultants with different skills, categories
and location. Search consultants according to your requirements.@endsection

@section('content')

<main class="consultant-filter-page">
	<div class="container">
		<div class="fixed-wrapper d-md-none">
			<div class="form-group mb-0 select transparent without-label d-block d-md-none">
				<i class="gray material-icons">import_export</i>
				<select class="gray m-0 p-0">
					<option value="">Sort by</option>
					<option value="0">Latest Jobs</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>
			</div>
			<a href="#filter-modal" class="gray filter-btn border-left" data-toggle="modal"
				data-target="#filter-modal"><i class="gray material-icons mr-1">filter_list</i> Filter</a>
		</div>
		<div class="row">
			<div class="col-lg-3 col-md-4">
				<div class="sidebar left modal" id="filter-modal">
					<div class="title-wrapper">
						<h3 class="h3-title h3">Search Consultants</h3>
						<a href="{{ route('consultant.browse') }}" class="clear-link float-right title-act gray"><i
								class="material-icons">refresh</i>
							Clear</a>
					</div>
					<form autocomplete="off" name="filter" id="filter">
						<div class="form-group search-input">
							<img src="{{ asset('../img/ic_search.png') }}"
								srcset="{{ asset('../img/ic_search@2x.png') }} 2x" alt="search">
							<input type="text" name="search" placeholder="Search by name" class="form-control"
								value="{{Request::get('search') }}">
						</div>

						<div class="title-wrapper">
							<h3 class="h3-title h3">Filter Results</h3>
						</div>

						<div class="form-group select">
							<label class="control-label">Location</label>
							<select id="location" name="location" class="form-control">
							</select>
						</div>

						<div class="form-group select">
							<label class="control-label">Category</label>
							<select name="categories[]" id="categories" class="form-control" multiple>
								@foreach($categories as $category)
								<option value="{{ $category->id }}" @if(in_array($category->id, $selectedCategories))
									selected="selected" @endif>{{ $category->name }}</option>
								@endforeach
							</select>
						</div>

						<div class="form-group select btm-arrow">
							<label class="control-label">Skill</label>
							<select name="skills[]" id="skills" class="form-control" multiple>
								@foreach($skills as $skill)
								<option value="{{ $skill->id }}" @if(in_array($skill->id, $selectedSkills))
									selected="selected" @endif>{{ $skill->name }}</option>
								@endforeach
							</select>
						</div>

						<div class="form-group select btm-arrow">
							<label class="control-label">Experience Level</label>
							<select name="experience_level" id="experience_level" class="form-control">
								<option value="">Select</option>
								<option value="apprentice" @if(Request::get('experience_level')=='apprentice' )
									selected="selected" @endif>Apprentice</option>
								<option value="intermediate" @if(Request::get('experience_level')=='intermediate' )
									selected="selected" @endif>Intermediate</option>
								<option value="guru" @if(Request::get('experience_level')=='guru' ) selected="selected"
									@endif>Guru
								</option>
							</select>
						</div>

						<div class="form-group select btm-arrow">
							<label class="control-label">Hourly Rate</label>
							<select class="form-control" id="hourly_rate" name="hourly_rate">
								<option value="">Select</option>
								<option value="1" @if(Request::get('hourly_rate')==1) selected="selected" @endif>TZS
									5000 - 10,000
								</option>
								<option value="2" @if(Request::get('hourly_rate')==2) selected="selected" @endif>TZS
									10,000 - 20,000
								</option>
								<option value="3" @if(Request::get('hourly_rate')==3) selected="selected" @endif>TZS
									20,000 - 30,000
								</option>
								<option value="4" @if(Request::get('hourly_rate')==4) selected="selected" @endif>TZS
									30,000 - 45,000
								</option>
								<option value="5" @if(Request::get('hourly_rate')==5) selected="selected" @endif>TZS
									50,000 - 75,000
								</option>
								<option value="6" @if(Request::get('hourly_rate')==6) selected="selected" @endif>TZS
									75,000 - 100,000
								</option>
								<option value="7" @if(Request::get('hourly_rate')==7) selected="selected" @endif>TZS
									100,000 - 150,000
								</option>
								<option value="8" @if(Request::get('hourly_rate')==8) selected="selected" @endif>TZS
									150,000+</option>
							</select>
						</div>

						<div class="form-group select btm-arrow">
							<label class="control-label">Consultant Type</label>
							<select name="consultant_type" class="form-control">
								<option value="">Select</option>
								<option value="individual" @if(Request::get('consultant_type')=='individual' )
									selected="selected" @endif>Individual
								</option>
								<option value="business" @if(Request::get('consultant_type')=='business' )
									selected="selected" @endif>
									Business</option>
							</select>
						</div>

						<input type="hidden" name="sort" value="{{app('request')->input('sort')}}">
						<input type="submit" class="btn btn-transparent" value="Search">
						<a href="{{ route('consultant.browse') }}" class="btn btn-bordered"><i
								class="material-icons">refresh</i>
							Clear</a>

					</form>
				</div>
			</div>
			@if(!blank($consultants))
			<div class="col-lg-9 col-md-8 mt-3 mt-md-0 trending-cons">
				<div class="row">
					@foreach($consultants as $consultant)
					<div class="col-lg-4 col-md-12 col-sm-6 mb-5">
						@include('front.modules.consultant.common.consultant_box_h100', ['consultant' => $consultant])
					</div>
					@endforeach
				</div>
				{{ $consultants->onEachSide(7)->appends(request()->input())->links('front.common.pagination') }}
			</div>
			@else
			<div class="col-lg-9 col-md-8 mt-3 mt-md-0 trending-cons">
				<div class="box white job-list d-flex flex-column mb-5 col-md-12">
					No consultants to show!
				</div>
			</div>
			@endif
		</div>
	</div>

	@if(!$userDetails || ($userDetails && !$userDetails->consultant_profile))
	@include('front.modules.consultant.common.join_as_consultant')
	@endif

</main>
@endsection

@push('pageJs')
<script>
	$('#location').select2({
		placeholder: 'Select an option',
		minimumInputLength: 3,
		allowClear: true,
		ajax: {
			delay: 250,
			url: '{{route("city.ajaxSearch")}}',
			dataType: 'json',
			data: function(params) {
				var query = {
					search: params.term
				}
				return query;
			},
			processResults: function(response) {
				return {
					results: response,
				};
			}
		}
	});
	$('#categories').select2({
		placeholder: 'Select an option',
		allowClear: true
	});
	$('#skills').select2({
		placeholder: "Select",
		allowClear: true
	});

	$(document).on('change', '#categories', function() {
		axios.get("{{ route('common.select2Options') }}", {
			params: {
				type: 'skills',
				category: $('#categories').val()
			}
		}).then(function(response) {
			this.data = response.data;
			$('#skills').empty();
			this.data.forEach(function(item) {
				$('#skills').append($('<option>', {
					value: item.id,
					text: item.text
				}))
			});
			@if($selectedSkills)
			$('#skills').val([{{implode(',',$selectedSkills)}}]).trigger('change');
			@endif
		});
	});

	$('#categories').trigger('change');
	$('#skills').trigger('change');

	@if(!empty($city))
	var data = {
		id: "{{$city->id}}",
		text: "{{$city->name}}"
	};
	var newOption = new Option(data.text, data.id, true, true);
	$('#location').append(newOption).trigger('change');
	@endif
</script>
@endpush

@include('front.modules.consultant.common.contact_consultant',[
'userDetails' => $userDetails
])