@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="">choose service</option>
				@if($services)
					@foreach($services as $val)
					<option value="{{$val->id}}">{{$val->category_name}}</option>
					<!--<input type="search" placeholder="{{$val->city_name}}">-->
					@endforeach
				@endif
				</select>
				</div><!-- search-field -->
				<div class="search-field by-location" >
				<select name="city">
				<option value="">choose city</option>
				@if($cities)
					@foreach($cities as $val)
					<option value="{{$val->id}}">{{$val->city_name}}</option>
					<!--<input type="search" placeholder="{{$val->city_name}}">-->
					@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)
					<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"><a href="{{ url('/service-provider-list-post/'.$val->category_name)}}"><h3>{{$val->category_name}}</h3></a></div>
					</div><!-- categories-block -->
					@endforeach
				@endif
			</div><!-- category-block -->
		
		</div>
		<!-- footer -->
		<div class="footer">
			<ul class="footer-tab-section">
				<li>
					<a href="{{url('/dashboard')}}">
						<span><i class="fa fa-home"></i></span>
						<span>Home</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0)">
						<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>
		</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