@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('labels.frontend.auth.register_box_title'))

@section('content')
	<div class="wrapper">

<div class="main-content no-header">
			<form method="post" action="{{url('service-provider-list-post')}}">
				{{csrf_field()}}
			<div class="search-blocks">
				<div class="search-field by-location">
					<select name="service">
				<option value="">Select Service</option>
				@if($services)
					@foreach($services as $val)
						@if($val->serviceProviderService->count() > 0)
							@if($val->serviceProviderService[0]->user)
								<option value="{{$val->id}}">{{$val->category_name}}</option>
							@endif
						@endif
					@endforeach
				@endif
				</select>
				</div><!-- search-field -->
				<div class="search-field by-location" >
				<select name="city">
				<option value="">Which Town/City?</option>
				@if($cities)
					@foreach($cities as $val)
						@if($val->serviceProviderCity->count() > 0)
							@if($val->serviceProviderCity[0]->user)
								<option value="{{$val->id}}">{{$val->city_name}}</option>
							@endif	
						@endif	
					@endforeach
				@endif
				</select>
				</div><!-- search-field -->
				<div class="search-field">
					<input type="submit" class="btn btn-warning" value="Search">
				</div><!-- search-field -->
			</div><!-- search-blocks -->	
			</form>
	<div class="banner-slider owl-carousel">
			<div class="item">
				<img src="{{url('img/banner1.jpg')}}" alt="">
			</div><!-- item -->
			<div class="item">
				<img src="{{url('img/banner1.jpg')}}" alt="">
			</div><!-- item -->
		</div><!-- banner-slider -->

		
			<div class="category-block">
				@if($services)
					@foreach($services as $val)
						@if($val->serviceProviderService->count() > 0)
							@if($val->serviceProviderService[0]->user)
								<a href="{{ url('/service-provider-list-post/'.$val->category_alias)}}">
									<div class="categories-block">
										
											<div class="category-image">
												@if($val->category_image)
												<img src="{{url('storage/'.$val->category_image)}}" alt="">
												@else
												<img src="{{url('img/no-image.jpg')}}" alt="no-image">
												@endif
											</div>
											<div class="category-title">
												<h3>{{$val->category_name}}</h3>
											</div>
									</div><!-- categories-block -->
								</a>
							@endif
						@endif
					@endforeach
				@endif
			</div><!-- category-block -->
		
		</div>
		
		<!-- footer -->
		<div class="footer">
		@if(Auth::user())
			<ul class="footer-tab-section @if(Auth::user()->user_type==2){{'login-cls'}}@endif">
				@if(Auth::user()->user_type==2)
				<li>
					<a href="{{url('/')}}">
						<span><i class="fa fa-home"></i></span>
						<span>Home</span>
					</a>
				</li>
				@endif
				<li>
					<a href="{{url('/my-quotation')}}">
						<span><i class="fa fa-file"></i></span>
						<span>My Quotation</span>
					</a>
				</li>
				<li>
					<a href="{{url('/account')}}">
						<span><i class="fa fa-user"></i></span>
						<span>My Profile</span>
					</a>
				</li>
			</ul>
		@else
			<ul class="footer-tab-section login-cls">
				<li>
					<a href="{{url('/login')}}">
						<span><i class="fa fa-lock"></i></span>
						<span>Login</span>
					</a>
				</li>
			</ul>
		@endif
		</div><!-- footer -->
		
	</div><!-- wrapper -->

<!-- owl carousel -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
	jQuery(document).ready(function(){
		$('.owl-carousel').owlCarousel({
			stagePadding: 50,
			center: true,
		    loop: true,
		    margin: 10,
		    items: 1,
		    dots: false,
		    autoplay: true,
		})
	})
</script>		
@endsection