@extends('web.layouts.main')

@section('content')

@include('web.components.page-header', ['heading' => $section->title])

<div class="map-wrapper">
	<div class="input-content px-3">
		<div class="row">
			<div class="col-sm-6 mb-3 mb-sm-0">
				<select class="form-control form-custom select-custom font-weight-bold region-js">
					<option selected disabled>{{ trans('text.please-select-region') }}</option>
					@foreach($regions as $region)
					<option value="{{ $region->id }}" @if($region->id == $region_id) selected @endif>{{ $region->title }}</option>
					@endforeach
				</select>
			</div>
			<div class="col-sm-6">
				<form method="POST" action="{{ route('web.point-of-sale', [$locale, $region_id]) }}">
					@csrf
					<input type="search" class="form-control form-custom" name="search" value="{{ $search ? $search : null }}" placeholder="{{ trans('text.search-for-palces') }}">
				</form>
			</div>
		</div>
	</div>

	<div class="bg-quaternary" id="map"></div>
</div>

@endsection

@push('scripts')
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_KEY') }}&callback=initMap&libraries=places" defer></script>
<script type="text/javascript">
	{{-- Bind change event on select --}}
	$(".region-js").on('change', function () {
		var region = $(this).val();
		if(region){
			window.location = "{{ route('web.point-of-sale', [$locale]) }}"+'/'+region;
		}
		return false;
	});

	var map;
	var locations = {!! json_encode($point_of_sales) !!};
	var markers = [];
	// var nearest = [];

	{{-- Allow location --}}
	// if(navigator.geolocation) {
	// 	navigator.geolocation.getCurrentPosition(showPosition);
	// } else {
	// 	alert("Geolocation is not supported by this browser.");
	// }

	{{-- Get nearest location --}}
	// function showPosition(position) {
	// 	for(var i = 0; i < locations.length; i++) {
	// 		if(distance(position.coords.latitude, position.coords.longitude, locations[i].lat, locations[i].lng, "K") <= 2) {
	// 			nearest.push(locations[i]);
	// 		}
	// 	}
	// 	locations = nearest;
	// }

	function initMap() {
		map = new google.maps.Map(document.getElementById('map'), {
			zoomControl: true,
			zoomControlOptions: {
				position: google.maps.ControlPosition.RIGHT_BOTTOM,
			},
			mapTypeControl: false,
			streetViewControl: false,
			fullscreenControl: false
		});

		{{-- Initialize only one InfoWindow --}}
		var infowindow = new google.maps.InfoWindow({
			minWidth: 400,
			maxWidth: 400
		});

		for(var i = 0; i < locations.length; i++){
			{{-- Push locationMarker to signs array --}}
			markers.push(new google.maps.LatLng(locations[i].lat, locations[i].lng));

			{{-- Location Marker --}}
			var locationMarker = new google.maps.Marker({
				position: { lat: parseFloat(locations[i].lat), lng: parseFloat(locations[i].lng) },
				map: map,
				icon: "{{ asset('assets_web/images/icons/marker.svg') }}"
			});

			{{-- Custom Info Window --}}
			google.maps.event.addListener(locationMarker, 'click', (function(locationMarker, i) {
				return function() {

					var popupContent = '';

					popupContent +=
					'<div>'+
					'<div class="text-center p-4">'+
					(locations[i].title ? '<p class="h4 font-weight-bold text-primary mb-1">'+locations[i].title+'</p>' : '')+
					(locations[i].location ? '<p class="h5 font-weight-regular mb-3">'+locations[i].location+'</p>' : '')+
					(locations[i].text ? '<p class="font-weight-light mb-3">'+locations[i].text+'</p>' : '')+
					(locations[i].phone_number ? '<a href="tel:0'+locations[i].phone_number+'" class="font-weight-light text-primary"><img class="width-30 me-2" src="{{ asset('assets_web/images/icons/info-window-phone.svg') }}" alt="Phone number 0'+locations[i].phone_number+'">0'+locations[i].phone_number+'</a>' : '')+
					'</div>'+
					'</div>';

					infowindow.close();
					infowindow.setContent(popupContent);
					infowindow.open(map, locationMarker);
				}
			})(locationMarker, i));
		}

		if(locations.length == 0){
			map.setCenter(new google.maps.LatLng(33.2232, 43.6793));
			map.setZoom(8);
		} else {
			{{-- Fit bound map --}}
			var latlngbounds = new google.maps.LatLngBounds();
			for(var i = 0; i < markers.slice(0, 40).length; i++){
				latlngbounds.extend(markers[i]);
			}
			map.fitBounds(latlngbounds);
		}
	}

	{{-- Get distance --}}
	// function distance(lat1, lon1, lat2, lon2, unit) {
	// 	var radlat1 = Math.PI * lat1/180
	// 	var radlat2 = Math.PI * lat2/180
	// 	var theta = lon1-lon2
	// 	var radtheta = Math.PI * theta/180
	// 	var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
	// 	if(dist > 1) {
	// 		dist = 1;
	// 	}
	// 	dist = Math.acos(dist)
	// 	dist = dist * 180/Math.PI
	// 	dist = dist * 60 * 1.1515
	// 	if(unit=="K") {
	// 		dist = dist * 1.609344
	// 	}
	// 	if(unit=="N") {
	// 		dist = dist * 0.8684
	// 	}
	// 	return dist
	// }
</script>
@endpush