@extends('website.layouts.master')

@section('site_title')التسجيل - @endsection
@section('content')
		<section class="page-title">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="title-icon">
							<i class="fas fa-user-plus"></i>
						</div>
						<div class="page-text">
							<h5>أنشئ حساب جديد</h5>
							<p class="mb-0">
								<a href="{{ route('login') }}">لديك حساب بالفعل؟ اضغط لتسجيل الدخول</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="sign-form">
			<div class="container">
				<form action="{{ route('register') }}" method="POST">
					@csrf
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<label for="name" class="d-block">الاسم بالكامل</label>
								<input type="text" name="name" id="name" value="{{ old('name') }}" autocomplete="off" placeholder="ادخل اسمك كاملاً" class="form-control">
								@if ($errors->has('name'))
								<span class="invalid-feedback" role="alert">
									<strong>
										{{ $errors->first('name') }}
									</strong>
								</span>
								@endif
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group ">
								<label for="phone" class="d-block">رقم الجوال</label>
								<input class="form-control" type="number" name="phone" id="phone" value="{{ old('phone') }}" autocomplete="off" placeholder="مثال: 050123456">
								@if ($errors->has('phone'))
								<span class="invalid-feedback" role="alert">
									<strong>
										{{ $errors->first('phone') }}
									</strong>
								</span>
								@endif
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label for="password" class="d-block">كلمة المرور</label>
								<input class="form-control" type="password" name="password" placeholder="******">
								@if ($errors->has('password'))
								<span class="invalid-feedback" role="alert">
									<strong>
										{{ $errors->first('password') }}
									</strong>
								</span>
								@endif
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label for="password_confirmation" class="d-block">تأكيد كلمة المرور</label>
								<input class="form-control" type="password" name="password_confirmation" placeholder="******">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label for="email" class="d-block">البريد الالكتروني  <span style="font-size: 12px">(اختياري)</span></label>
								<input class="form-control" type="email" name="email" id="email" value="{{ old('email') }}" autocomplete="off" placeholder="example@suqiakum.com">
								@if ($errors->has('email'))
								<span class="invalid-feedback" role="alert">
									<strong>
										{{ $errors->first('email') }}
									</strong>
								</span>
								@endif
							</div>
						</div>
						<div class="col-md-12">
							<div class="form-group">
								<label for="map-canvas" class="d-block">العنوان الافتراضي (يمكنك ادارة عناوينك لاحقا)</label>
								<input id="pac-input" name="google_location" class="controls" type="text" placeholder="ابحث هنا" autocomplete="off">
								<div id="map-canvas"></div>
								@if ($errors->has('lat') || $errors->has('lng'))
								<span class="invalid-feedback" role="alert">
									<strong>
										يرجى تحديد العنوان على الخريطة
									</strong>
								</span>
								@endif
								<input type="hidden" id="lng" name="lng" value="{{ old('lng') }}">
								<input type="hidden" id="lat" name="lat" value="{{ old('lat') }}">
							</div>
						</div>
					</div>
					<section class="set-location">
						<button type="submit" class="btn">تسجيل حساب جديد</button>
					</section>
				</form>
			</div>
		</section>
@endsection

@push('page_level_style')
	<style type="text/css">
		input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
			-webkit-appearance: none;
			direction: ltr;
		}
		#phone , #email {
			direction: ltr;
		}
		#map-canvas {
			width: 100%;
			height: 500px;
		}
		@media only screen and (max-width: 479px) {
			#map-canvas {
				width: 100%;
				height: 250px;
			}
		}
	</style>
	<style type="text/css">
		#description {
			font-family: Roboto;
			font-size: 15px;
			font-weight: 300;
		}

		#infowindow-content .title {
			font-weight: bold;
		}

		#infowindow-content {
			display: none;
		}

		#map #infowindow-content {
			display: inline;
		}

		.pac-card {
			margin: 10px 10px 0 0;
			border-radius: 2px 0 0 2px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			outline: none;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
			background-color: #fff;
			font-family: Roboto;
		}

		#pac-container {
			padding-bottom: 12px;
			margin-right: 12px;
		}

		.pac-controls {
			display: inline-block;
			padding: 5px 11px;
		}

		.pac-controls label {
			font-family: Roboto;
			font-size: 13px;
			font-weight: 300;
		}

		#pac-input {
			background-color: #fff;
			font-family: Roboto;
			font-size: 15px;
			font-weight: 300;
			margin-left: 12px;
			padding: 0 11px 0 13px;
			text-overflow: ellipsis;
			width: 400px;
		}

		#pac-input {
			z-index: 0;
			position: absolute;
			top: 60px!important;
			right: 0!important;
		}

		#pac-input:focus {
			border-color: #4d90fe;
		}

		#title {
			color: #fff;
			background-color: #4d90fe;
			font-size: 25px;
			font-weight: 500;
			padding: 6px 12px;
		}
		#target {
			width: 345px;
		}
	</style>
@endpush

@push('page_level_script')
	<script type="text/javascript">
		function initMap() {
			var marker_lat = !!document.getElementById("lat").value? document.getElementById("lat").value : 24.709085;
			var marker_lng = !!document.getElementById("lng").value? document.getElementById("lng").value : 46.673465;
			var mapProp = {
				navigationControl: true,
				scrollwheel: true,
				scaleControl: true,
				draggable: true,
				gestureHandling: "greedy",
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				disableDefaultUI: true,
				center: new google.maps.LatLng(marker_lat, marker_lng),
				zoom: 12,
			};
			var map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
			var marker = new google.maps.Marker({
				map: map,
				icon: 'https://shop.suqiakum.com/assets/map_marker.png',
				position: new google.maps.LatLng(marker_lat, marker_lng),
				zIndex: 10
			});
			window.google.maps.event.addListener(map , 'drag', function (event) {
					marker.setPosition( map .getCenter() );
			});
			
			if ((marker_lat == 24.709085) && (marker_lng == 46.673465)) {
				if (navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(function(position) {
						var pos = {
							lat: position.coords.latitude,
							lng: position.coords.longitude
						};
						map.setCenter(pos);
						marker.setPosition(pos);
					}, function() {
						handleLocationError(true, map.getCenter());
					});
				} else {
					handleLocationError(false, map.getCenter());
				}
			}
			function handleLocationError(browserHasGeolocation, pos) {
				map.setCenter(pos);
				marker.setPosition(pos);
			}
			
			window.google.maps.event.addListener(map , 'dragend', function (event) {
				document.getElementById("lat").value = map.getCenter().lat();
				document.getElementById("lng").value = map.getCenter().lng();
			});
			

			var input = document.getElementById('pac-input');
			var searchBox = new google.maps.places.SearchBox(input);
			map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
	
			map.addListener('bounds_changed', function() {
			  searchBox.setBounds(map.getBounds());
			});
			
			var markers = [];
			searchBox.addListener('places_changed', function() {
				var places = searchBox.getPlaces();
				
				if (places.length == 0) {
					return;
				}
				
				// Clear out the old markers.
				markers.forEach(function(old_marker) {
					old_marker.setMap(null);
				});
				markers = [];
				var new_pos = {
					lat: places[0].geometry.location.lat(),
					lng: places[0].geometry.location.lng()
				};
				marker.setPosition(new_pos);
				
				var bounds = new google.maps.LatLngBounds();
				places.forEach(function(place) {
					if (!place.geometry) {
						console.log("Returned place contains no geometry");
						return;
					}
					
					if (place.geometry.viewport) {
						// Only geocodes have viewport.
						bounds.union(place.geometry.viewport);
					} else {
						bounds.extend(place.geometry.location);
					}
				});
				map.fitBounds(bounds);
			});
		}
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmgVVBWPoe_QmTLa_0UCnMUj0aZGlZnsg&libraries=places&callback=initMap"></script>
@endpush