@extends('layouts.main')

@section('content')
<div id="intro">
		<div class="container">
			<div class="intro-text">
				<h1 class="hd-h1">@lang('messages.products')</h1>
			</div>
		</div>
	</div><!--END: Intro--> 

	<section id="content">
		<div class="product-content">
			<div class="container">			
				<div class="row justify-content-center">
					<div class="col-lg-4 col-sm-6">
						<select class="target form-control transparent" onchange="if (this.value) window.location.href=this.value">
							<option value="option1" selected="selected">@lang('messages.select_region')</option>
							@if(isset($states) && !empty($states))
								@foreach($states as $state)
							<option value="{{ route('product_filter', ['state' ,str_slug($state->name)])}}">{{$state->name}}</option>
								@endforeach
							@endif
						</select>
					</div>
					<div class="col-lg-4 col-sm-6">

						<select class="target form-control transparent" onchange="if (this.value) window.location.href=this.value">
							<option value="option1" selected="selected">@lang('messages.select_category')</option>
							@if(isset($categories) && !empty($categories))
								@foreach($categories as $category)
									<option value="{{ route('product_filter', ['category' ,$category->url_alias])}}">@if(isset($category->category_descriptions[0]->title)){{$category->category_descriptions[0]->title}}@endif</option>
									
									@if(isset($category->childs) && !empty($category->childs))
									@foreach($category->childs as $values)
									@if(isset($values->category_descriptions[0]->title) && !empty($values->category_descriptions[0]->title))
									<option value="{{ route('product_filter', ['category' ,$values->url_alias])}}">&nbsp;&nbsp;&nbsp;-->@if(isset($values->category_descriptions[0]->title)){{$values->category_descriptions[0]->title}}@endif</option>
									@endif
									@endforeach
									@endif
								@endforeach
							@endif
						</select>
					</div>
				</div>
				<form action="{{ route('product_search')}}" method="post" class="searchform">
					{{csrf_field()}}
				<div class="row justify-content-center">
					<div class="col-sm-12 col-md-6 col-lg-4">						
						<input type="text" name="keyword" class="form-control" placeholder="Enter your search keyword...">
						<button type="search" class="button search" value=""><i class="fa fa-search" style="color: #fff"></i></button>
					</div>
				</div>
				</form>
				<hr>
			</div>
			<div class="container">
				<div class="manage-products">		
					<!-- <figure class="map"><img src="/img/map.jpg" alt="map" width="886" height="966" border="0" usemap="#Map" /></figure> -->
					<div class="india-map inactive">
						<svg height="1000" width="1000"> 
						
						@foreach($states as $state)
						<a xlink:href="#" class="{{$state->url_alias}}"> 					
							<polygon id="{{$state->url_alias}}" points="{{$state->points}}">	
							</polygon>	
										 
							<text font-size="14" font-weight="700">{{$state->name}}</text>
							<text x="{{$state->x_cord_title}}" y="{{$state->y_cord_title}}" font-size="14" font-weight="700">{{$state->name}}</text>
						</a>	
						@endforeach						
						</svg>												
					</div>
					<div class="india-map active">
					@if(isset($states) && !empty($states))
						<svg height="1000" width="1000"> 
						@foreach($states as $state)
						<a xlink:href="{{ route('product_filter', ['state' ,str_slug($state->name)])}}" class="{{$state->url_alias}}" style="position: relative;"> 
							<polygon id="{{$state->url_alias}}" points="{{$state->points}}">	
							</polygon>	
										 
							
							<text x="{{$state->x_cord_title}}" y="{{$state->y_cord_title}}" font-size="14" font-weight="700">{{$state->name}}</text>							
						</a>

						@endforeach
						</svg>	
						
					@endif
									
					</div>	
					<div class="india-map active">
						@if(isset($states) && !empty($states))
						
						@foreach($states as $state)
						<span class="{{$state->url_alias}}"></span>
						@endforeach	
						@endif										
					</div>				
				</div>
			</div>
		</div>
	</section>
	</div><!--END: Container-->
@endsection