@extends('layouts.app')
<style>
label {
	font-weight: 500;
}
input, input[type="checkbox"] {
	display: inline;
	height: inherit !important;
	width: inherit !important;
}
.freelancers-list-layout .freelancer-details-list ul {
	display: -webkit-inline-box !important;
}

</style>
@section('content')
<div class="container">
	<div class="col-md-12 margin-top-25">
	
	<div class="row">
		<div class="col-xl-3 col-lg-4">
			<div class="sidebar-container">
				
				<!-- Location -->
				<div class="sidebar-widget">
					<h3>Location</h3>
					<div class="input-with-icon">
						<div id="autocomplete-container">
							<input id="autocomplete-input" type="text" placeholder="Location" list="locations" value="{{ $data['location']->area->area??'' }}">
							<datalist id="locations">
							@foreach($data['areas'] as $area)
							 <option value="{{ $area->area }}" >
							@endforeach
							</datalist>
						</div>
						<i class="icon-material-outline-location-on"></i>
					</div>
				</div>

				<!-- Category -->
				<div class="sidebar-widget">
					<h3>Category</h3>
					<select class="selectpicker default" multiple data-selected-text-format="count" data-size="7" title="All Categories" >
						@foreach($data['services'] as $service)
							<optgroup label="{{ $service->service }}">
							@foreach($service->active_subservices as $subservice)	
							<option value="{{ $subservice->id }}">{{ $subservice->service }}</option>
							@endforeach
							</optgroup>
						@endforeach
					</select>
				</div>

				<!-- Keywords -->
				<div class="sidebar-widget">
					<h3>Keywords</h3>
					<div class="keywords-container">
						<div class="keyword-input-container">
							<input type="text" class="keyword-input" placeholder="e.g. task title"/>
							<button class="keyword-input-button ripple-effect"><i class="icon-material-outline-add"></i></button>
						</div>
						<div class="keywords-list"><!-- keywords go here --></div>
						<div class="clearfix"></div>
					</div>
				</div>

				<!-- Hourly Rate -->
				<div class="sidebar-widget">
					<h3>Hourly Rate</h3>
					<div class="margin-top-55"></div>

					<!-- Range Slider -->
					<input class="range-slider" type="text" value="" data-slider-currency="$" data-slider-min="10" data-slider-max="250" data-slider-step="5" data-slider-value="[10,250]"/>
				</div>

				<!-- Tags -->
				<div class="sidebar-widget">
					<h3>Skills</h3>

					<div class="tags-container">
						<div class="tag">
							<input type="checkbox" id="tag1"/>
							<label for="tag1">front-end dev</label>
						</div>
						<div class="tag">
							<input type="checkbox" id="tag2"/>
							<label for="tag2">angular</label>
						</div>
						<div class="tag">
							<input type="checkbox" id="tag3"/>
							<label for="tag3">react</label>
						</div>
						<div class="tag">
							<input type="checkbox" id="tag4"/>
							<label for="tag4">vue js</label>
						</div>
						<div class="tag">
							<input type="checkbox" id="tag5"/>
							<label for="tag5">web apps</label>
						</div>
						<div class="tag">
							<input type="checkbox" id="tag6"/>
							<label for="tag6">design</label>
						</div>
						<div class="tag">
							<input type="checkbox" id="tag7"/>
							<label for="tag7">wordpress</label>
						</div>
					</div>
					<div class="clearfix"></div>

					<!-- More Skills -->
					<div class="keywords-container margin-top-20">
						<div class="keyword-input-container">
							<input type="text" class="keyword-input" placeholder="add more skills"/>
							<button class="keyword-input-button ripple-effect"><i class="icon-material-outline-add"></i></button>
						</div>
						<div class="keywords-list"><!-- keywords go here --></div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="clearfix"></div>

			</div>
		</div>
		<div class="col-xl-9 col-lg-8 content-left-offset">

			<h3 class="page-title">Search Results</h3>

			<div class="notify-box margin-top-15">
				<div class="switch-container">
					<label class="switch"><input type="checkbox"><span class="switch-button"></span><span class="switch-text">Turn on email alerts for this search</span></label>
				</div>

				<div class="sort-by">
					<span>Sort by:</span>
					<select class="selectpicker hide-tick">
						<option>Relevance</option>
						<option>Newest</option>
						<option>Oldest</option>
						<option>Random</option>
					</select>
				</div>
			</div>
			
			<!-- Freelancers List Container -->
			<div class="freelancers-container freelancers-list-layout compact-list margin-top-35">
				@foreach($data['contractors'] as $contractor)
				<!--Freelancer -->
				<div class="freelancer">

					<!-- Overview -->
					<div class="freelancer-overview">
						<div class="freelancer-overview-inner">
							
							<!-- Bookmark Icon -->
							<span class="bookmark-icon"></span>
							
							<!-- Avatar -->
							<div class="freelancer-avatar">
								<div class="verified-badge"></div>
								<a href="single-freelancer-profile.html"><img src="{{ asset('demo-2/images/user-avatar-big-01.jpg') }}" alt=""></a>
							</div>

							<!-- Name -->
							<div class="freelancer-name">
								<h4><a href="#">{{ $contractor->user_information->contact_person }} 
								<!-- <img class="flag" src="{{ asset('demo-2/images/flags/gb.svg') }}" alt="" title="United Kingdom" data-tippy-placement="top"></a> -->
								</h4>
								<span>UI/UX Designer</span>
								<!-- Rating -->
								<div class="freelancer-rating">
									<div class="star-rating" data-rating="{{ $contractor->user_information->avg_stars }}"></div>
								</div>
							</div>
						</div>
					</div>
					
					<!-- Details -->
					<div class="freelancer-details">
						<div class="freelancer-details-list">
							<ul>
								<li>Location <strong><i class="icon-material-outline-location-on"></i> {{ $contractor->location->area->area??'N/A' }}</strong></li>
								<li>Rate <strong>R{{ $contractor->user_information->hourly_rate }} / hr</strong></li>
								<li>Job Success <strong>95%</strong></li>
							</ul>
						</div>
						<a href="{{ route('client-management.view_contractor', $contractor->id) }}" class="button button-sliding-icon ripple-effect">View Profile <i class="icon-material-outline-arrow-right-alt"></i></a>
					</div>
				</div>
				<div class="col-md-12 gray">
				<div class="row">
								@if(count($contractor->services) > 0)	
										@foreach($contractor->services as $service)
										<div class="col-md-3">
											<li>{{ $service->service->service }}</li>
										</div>
										@endforeach
								@else
										
								@endif	
				</div>
				</div>
				<!-- Freelancer / End -->
			@endforeach
	
			</div>
			<!-- Freelancers Container / End -->


			<!-- Pagination -->
			<div class="clearfix"></div>
			<div class="col-md-12">
				<div class="row">
					<div class="pull-right">
						@if(count($data['contractors']) > 0)
						{{ $data['contractors']->links() }}
						@endif
					</div>
				</div>
				</div>
			<!-- Pagination / End -->

		</div>
	</div>


	</div>
</div>

<div class="modal" id="myModal" aria-hidden="true" tab-index="-1" role="dialog"></div>

@endsection
@section('scripts')
<script  type="application/javascript">
  function view_audit(id){
     	$('#myModal').load('/audit_data/contractor/'+id, function(response) {
			  $('#myModal').modal( {backdrop:'static'} );
	    });
	}
</script>
<script  type="application/javascript">
  function apply_contractor(id){
     	$('#myModal').load('/client-management/apply_contractor_form/'+id, function(response) {
			  $('#myModal').modal( {backdrop:'static'} );
	    });
	}
</script>
@endsection