@extends('website.layouts.master')

@section('site_title')عناويني - @endsection
@section('content')
		<section class="page-title">
			<div class="container">
				<div class="row">
					<div class="col-2 col-md-1">
						<div class="title-icon">
							<i class="fas fa-tools"></i>
						</div>
					</div>
					<div class="col-10 col-md-11">
						<div class="page-text">
							<h5 class="mt-0">عناويني</h5>
						</div>
					</div>
				</div>
			</div>
		</section>
		@include('website.includes.user_menu')
		<section class="user-locations">
			<div class="container-fluid">
				<div class="orders-cart order-location">
					<div class="cart-title">
						<h5>موقع التوصيل</h5>
					</div>
					<div class="row">
						<div class="col-lg-6">
							<div class="locations">
								<p>يمكنك اضافة أو حذف المواقع الخاصة بك لتسهيل عملية الشراء فيما بعد</p>
								<h5>اختر العنوان الاساسى</h5>
								<p>يمكنك الضغط على العنوان وتحديده لاستخدامه كعنوان افتراضي للتوصيل</p>
								<div class="single-location">
									<div class="row">
										@foreach (Auth::guard('web')->user()->user_addresses()->get() as $user_address)
										<div class="col-12">
											<div class="container-fluid">
												<div class="location-ratio">
													<label class="{{ $user_address['is_default']? 'active' : '' }}">
														<input type="radio" class="address" name="address_id" value="{{ $user_address->id }}" {{ $user_address['is_default']? 'checked' : '' }} > 
														<div class="satelite">
															<i class="fas fa-satellite"></i>
															<p>
																{{ $user_address['name'] }}
															</p>
														</div>
													</label>
													<div class="satelite-btn">
														<a href="javascript:;" data-toggle="modal" data-target="#view-address" class="view-address" data-id="{{ $user_address->id }}">معاينة</a>

														<a href="{{ route('website.user_addresses.delete', ['userAddress' => $user_address->id]) }}" class="bin" onclick="return confirm('تأكيد العملية؟')">
															<i class="fas fa-trash"></i>
														</a>
													</div>
												</div>
											</div>
										</div>
										@endforeach
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-6">
							<h5>اضف عنوان جديد</h5>
							<p>ادخل تفاصيل العنوان ثم اختر العنوان على الخريطة واضغط على زر اضافة العنوان</p>
							<!-- Start Add new site -->
							<div class="add-new-site d-block">
								<form action="{{ route('website.user_addresses.store') }}" method="POST">
									@csrf
									<div class="row">
										<div class="col-md-4 col-lg-4 col-xl-4">
											<label for="name" class="d-block">اسم العنوان </label>
											<input type="text" name="name" value="{{ old('name') }}" autocomplete="off" placeholder="مثلا: المنزل">
											@if ($errors->has('name'))
											<span class="invalid-feedback" role="alert">
												<strong>
													{{ $errors->first('name') }}
												</strong>
											</span>
											@endif
										</div>
										<div class="col-md-8 col-lg-8 col-xl-8">
											<label for="description" class="d-block">تفاصيل العنوان </label>
											<input type="text" name="description" value="{{ old('description') }}" autocomplete="off" placeholder="مثلا: شارع 1, الطابق الأول">
											@if ($errors->has('description'))
											<span class="invalid-feedback" role="alert">
												<strong>
													{{ $errors->first('description') }}
												</strong>
											</span>
											@endif
										</div>
									</div>
									
									<div class="row">
										<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>
									<button type="submit">اضافة العنوان</button>
								</form>
							</div>
							<!-- End Add new site -->
						</div>
					</div>

				</div>
			</div>
		</section>
		<div class="modal fade" id="view-address" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" style="text-align: center; color: #006a8a;" id="myModalLabel">عرض العنوان على الخريطة</h4>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						</button>
						<span aria-hidden="true">&times;</span>
					</div>
					<div class="modal-body">
						<div class="row">
							<div id="view-map-canvas"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
@endsection

@push('page_level_style')
		<style type="text/css">
			.delete-single-location {
				background: #d54850!important;
				width: 60px!important;
				text-align: center!important;
				height: 100%!important;
				display: flex!important;
				align-items: center!important;
				justify-content: center!important;
			}
			#map-canvas {
				width: 90%;
				height: 500px;
				border-radius: 10px;
				margin-right: 5%;
			}
			#view-map-canvas {
				width: 90%;
				height: 400px;
				border-radius: 10px;
				margin-right: 5%;
			}
			#view-map-canvas {
				right: 5%
			}
			@media only screen and (max-width: 479px) {
				#map-canvas, #view-map-canvas {
					width: 90%;
					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;
		}
		#pac-input {
			top: 1% !important;
			right: 10% !important;
			border: none;
			text-align: right;
			padding-right: 20px;
			left: auto !important;
		}
		@media (min-width: 768px) and (max-width: 991.98px){
			#pac-input {
				width: 300px;
			}
		}
		@media (max-width: 767px) {
			#pac-input {
				top: 1% !important;
				right: 2% !important;
				width: 96%;
			}
		}
	</style>
@endpush

@push('page_level_script')
	<script type="text/javascript">
		$('input:radio').on('click', function() {
			var address_id				=	$(this).val();

			var dataString				=	"user_address=" + address_id;

			$.ajax({
				type: "POST",
				url: "/user_addresses/make_default_address",
				data: dataString,
				success: function(data){
					// console.log(data)
				}
			});
		});
		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 = [];
				// marker.setPosition(map.getCenter());
				// console.log(places[0].geometry.location.lat());
				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) {
					// console.log(place.geometry.location.lat());
					// console.log(place.geometry.location.lng());
					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);
			});
		}

		$(".view-address").click(function() {
			var address_id				=	$(this).data('id');

			var dataString				=	"address_id=" + address_id;

			$.ajax({
				type: "POST",
				url: "/addresses/show",
				data: dataString,
				success: function(data){
					console.log(data)
					var mapProp = {
						center: new google.maps.LatLng(data.latitude, data.longitude),
						zoom: 12,
					};
					var map = new google.maps.Map(document.getElementById("view-map-canvas"), mapProp);

					var marker = new google.maps.Marker({
						map: map,
						position: new google.maps.LatLng(data.latitude, data.longitude),
					});
				}
			});
		});
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmgVVBWPoe_QmTLa_0UCnMUj0aZGlZnsg&libraries=places&callback=initMap"></script>
@endpush