	 <style type="text/css">#locate-add {
    padding-right: 50px;
    padding-left: 33px;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position-y: 8px;
    background-position-x: 5px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDQyNi42NjcgNDI2LjY2NyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8Zz4KCQk8cGF0aCBkPSJNMjEzLjMzMywwQzEzMC44OCwwLDY0LDY2Ljg4LDY0LDE0OS4zMzNjMCwxMTIsMTQ5LjMzMywyNzcuMzMzLDE0OS4zMzMsMjc3LjMzM3MxNDkuMzMzLTE2NS4zMzMsMTQ5LjMzMy0yNzcuMzMzICAgIEMzNjIuNjY3LDY2Ljg4LDI5NS43ODcsMCwyMTMuMzMzLDB6IE0yMTMuMzMzLDIwMi42NjdjLTI5LjQ0LDAtNTMuMzMzLTIzLjg5My01My4zMzMtNTMuMzMzUzE4My44OTMsOTYsMjEzLjMzMyw5NiAgICBzNTMuMzMzLDIzLjg5Myw1My4zMzMsNTMuMzMzUzI0Mi43NzMsMjAyLjY2NywyMTMuMzMzLDIwMi42Njd6IiBmaWxsPSIjMzRhODUzIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIiBjbGFzcz0iIj48L3BhdGg+Cgk8L2c+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPC9nPjwvc3ZnPg==);
    background-size: 21px;
    margin: 0 !important;
}</style>
	<style>p
	.container.bg-bk.card-1{ padding:0px !important; margin:0px !important; }._2gVco {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: auto;
    padding: 0px 8px 0px 8px;
    box-sizing: border-box;
}._2gVco {
    cursor: pointer;
}._1ssIk {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 18px;
}
.gs1FE {
    display: flex;
    flex-direction: column;
     
   
    margin: auto;
        margin-top: auto;
    margin-top: auto;
    background: ##fff;
}.gs1FE #_1n0ls svg {
    width: 26px;
    height: 26px;
    margin-top: 2px;
    margin-right: 8px;
    fill:var(--link-color) !important;  
} input.form-control  {
    border: 1px solid #dfe0e3;
    border-radius: 3px;
    color: #72727d;
    font-size: 13px  ;
    height: 33px;
    padding: 1px 0;
    width: 192px;
    margin-right: 10px;text-indent: 10px;
}@media only screen and (max-width: 600px) {
  .modal-footer .col-sm-6 {
     width: 100%;
  }.modal-footer .col-sm-6 input {  width: 100%;
  }.modal-footer .col-sm-6.right-div { margin-top:5px; }
}.isOnFram .container.card-1 { padding:0px !important; }
 .imge-serch {
    width: 33px;
    height: 33px;
     display: inline-block;
    position: absolute;
    right: 19px;
    top: 5px;
    background-size: contain;
    background-repeat: no-repeat;cursor:pointer;
}
.modal-header h4 {
 
	font-size: 20px;color:#fff;text-align:center;
	margin: -1px 0px 10px;
}.modal-header .close {
	position: absolute;
	right: 15px;
	background: #fff;
	border: 0px;
	background:transparent ;
	color: #fff;
	border-radius: 10px;
	line-height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
	height: 17px;
	width: 16px;
	font-size: 30px;
}.modal-header { background-color:#085598;}.modal-header p { color:#fff; } 
.modal-header {
    background-color: #085598;
    padding: 10px;
    text-align: center;
}
.modal-footer{ display:flex;border-top:1px solid rgba(0,47,52,.2)}
.modal-body{ position:relative;}
 	</style>
 	<style type="text/css">.isOnFram .closepopu img {display:none; } .isOnFram .closepopu { background-size: contain;width: 50px; height: 56px;background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDQ3Ljk3MSA0Ny45NzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSIiPjxnPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgoJPHBhdGggZD0iTTI4LjIyOCwyMy45ODZMNDcuMDkyLDUuMTIyYzEuMTcyLTEuMTcxLDEuMTcyLTMuMDcxLDAtNC4yNDJjLTEuMTcyLTEuMTcyLTMuMDctMS4xNzItNC4yNDIsMEwyMy45ODYsMTkuNzQ0TDUuMTIxLDAuODggICBjLTEuMTcyLTEuMTcyLTMuMDctMS4xNzItNC4yNDIsMGMtMS4xNzIsMS4xNzEtMS4xNzIsMy4wNzEsMCw0LjI0MmwxOC44NjUsMTguODY0TDAuODc5LDQyLjg1Yy0xLjE3MiwxLjE3MS0xLjE3MiwzLjA3MSwwLDQuMjQyICAgQzEuNDY1LDQ3LjY3NywyLjIzMyw0Ny45NywzLDQ3Ljk3czEuNTM1LTAuMjkzLDIuMTIxLTAuODc5bDE4Ljg2NS0xOC44NjRMNDIuODUsNDcuMDkxYzAuNTg2LDAuNTg2LDEuMzU0LDAuODc5LDIuMTIxLDAuODc5ICAgczEuNTM1LTAuMjkzLDIuMTIxLTAuODc5YzEuMTcyLTEuMTcxLDEuMTcyLTMuMDcxLDAtNC4yNDJMMjguMjI4LDIzLjk4NnoiIGZpbGw9IiNkODA4MDgiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiPjwvcGF0aD4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8L2c+PC9zdmc+);background-color:#fff;background-size: 50%;background-repeat: no-repeat;background-position: center; }</style>

  <div class="modal-content" style="margin: 0px;box-shadow: unset;width: 100% !important;border: 0;">
 <div class="modal-header" style="border-radius:0px;">
        <button type="button" class="close" data-dismiss="modal" onclick="parent.closePopup2(); ">&times;</button>
        <h4 class="modal-title">Fine-tune Your Location</h4>
            <p class="flame-text flame-text--medium" style="padding: 0px;margin: 0px; ">
               Please move the pin to the exact location of delivery. 
              </p>
      </div>
      <div class="modal-body" style="padding:0px;">
		   <div class="col-sm-6 locate-add-div" style="position: unset;top: -2px;z-index: 1;left: 0;right: 0;max-width: 100%;border: 1px solid #eee;background: #fff;z-index: 11111;">
          <input class="form-control" placeholder="Search by address" onchange="codeAddress2(this)" autofocus style="outline:none !important;border:0px;width:100%;height: 42px;font-size: 16px;/*! color: red !important; */" id="locate-add"  >
          <span class="imge-serch">
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="30" height="30" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><g id="_02-search" data-name="02-search"><g id="glyph"><path d="m502.52 447.813a24.1 24.1 0 0 0 -8.019-17.227l-138.078-123.108a202.683 202.683 0 0 1 -48.945 48.945l123.108 138.077c8.716 10.185 25.595 10.673 34.885 1l30.029-30.029a24.1 24.1 0 0 0 7.02-17.658z" fill="currentColor" data-original="currentColor" class=""></path><path d="m381 192c0-104.215-84.785-189-189-189s-189 84.785-189 189 84.785 189 189 189 189-84.785 189-189zm-189 144c-79.4 0-144-64.6-144-144s64.6-144 144-144 144 64.6 144 144-64.6 144-144 144z" fill="currentColor" data-original="currentColor" class=""></path><path d="m192 92a84.1 84.1 0 0 0 -84 84c0 22.962 13.148 49.214 39.081 78.027a323.174 323.174 0 0 0 37.552 35.445 12 12 0 0 0 14.734 0 323.174 323.174 0 0 0 37.552-35.445c25.933-28.813 39.081-55.065 39.081-78.027a84.1 84.1 0 0 0 -84-84zm0 124a40 40 0 1 1 40-40 40.045 40.045 0 0 1 -40 40z" fill="currentColor" data-original="currentColor" class=""></path></g></g></g></svg>
          </span>
          </div>
       <div style="height:252px;width:100%;"   id="map_canvas"></div>
       <input type="hidden" id="m_lat">
       <input type="hidden" id="m_lng">
      </div>
  
 <div id="errorMsg" style="color:red;padding-left:15px;"></div>
      <div class="modal-footer" style="margin-top:0px; padding-left:0px;padding-right:0px;">
             <div class="gs1FE _1ssIk" style="flex:1" onclick="getLocation()" style="color:var(--logo-color)"><div data-aut-id="locationItem" class="_2gVco"><span class="_164_b _2HJ9o" role="listbox" tabindex="0" id="_1n0ls" data-aut-id=""><svg width="48px" height="48px" fill="#F57082" viewBox="0 0 1024 1024" data-aut-id="icon" class="" fill-rule="evenodd"><path class="rui-77aaa" d="M640 512c0 70.692-57.308 128-128 128s-128-57.308-128-128c0-70.692 57.308-128 128-128s128 57.308 128 128zM942.933 469.333h-89.6c-17.602-157.359-141.307-281.064-297.136-298.527l-1.531-0.139v-89.6h-85.333v89.6c-157.359 17.602-281.064 141.307-298.527 297.136l-0.139 1.531h-89.6v85.333h89.6c17.602 157.359 141.307 281.064 297.136 298.527l1.531 0.139v89.6h85.333v-89.6c157.359-17.602 281.064-141.307 298.527-297.136l0.139-1.531h89.6zM512 772.267c-143.741 0-260.267-116.525-260.267-260.267s116.525-260.267 260.267-260.267c143.741 0 260.267 116.525 260.267 260.267v0c0 143.741-116.525 260.267-260.267 260.267v0z"></path></svg></span><div class="i20PQ"><div class="_22cC9"><span style="color:var(--link-color)">Detect current location</span></div></div></div></div>
      
         <div class="col-sm-6 right-div" style="float:right;flex: 1;text-align: right;">
        <button type="button" class="btn btn-primary hide" style="color:#fff;#085598;background-color:#085598;line-height: 33px;border-radius: 3px;padding-left: 15px;padding-right: 15px;" id="mhidden" onclick="assignCordinates()" >Use this location</button>
      
        </div>
        <div class="clearfix"></div>
      </div>
   
   
    </div>
 <div><script src='https://maps.google.com/maps/api/js?libraries=places&amp;language=en&amp;key=<?php echo Yii::app()->options->get('system.common.google_map_api_key');?>' type='text/javascript'></script>
	
<script>
	 var geocoder;
	<?php
	if(empty($this->location)){ ?>
	var lat;var lng;
	<?php }else{
	?>
	var lat ='<?php echo LATITUDE;?>';
	var lng ='<?php echo LONGITUDE;?>';
	<?php
	}
	?>
 function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, positionError);
    
  } else { 
     
  }
} 
$(function(){ $('#locate-add').focus(); getLocation(); })
 

function positionError() {    
	
	$('#errorMsg').html('Please enable Geolocation to use this feature. please clear browser cache if problem exist.');
  // alert('Geolocation is not enabled. Please enable to use this feature')
setTimeout(function(){ $('#errorMsg').html('');  }, 5000);
   
}
function showPosition(position) {
    lat = position.coords.latitude;
    lng = position.coords.longitude;
 
	initMap12(lat,lng);
      var latlng = new google.maps.LatLng(lat, lng);
          placeMarker2(latlng);
           
            geocoder.geocode({ location: latlng }, (results, status) => {
    if (status === "OK") {
      if (results[1]) { 
		   $('#locate-add').val(results[0].formatted_address);
		   setaddress(results); 
		   
      } else {
        window.alert("No results found");
      }
    } else {
      window.alert("Geocoder failed due to: " + status);
    }
  });
          
          
          
     $('#mhidden').removeClass('hide');
     $('#m_lat').val(lat);
     $('#m_lng').val(lng);
    
}

function setaddress(results){
	
	     
		   
		     var country = null, countryCode = null, city = null, cityAlt = null;
            var c, lc, component;
            for (var r = 0, rl = results.length; r < rl; r += 1) {
                var result = results[r];

                if (!city && result.types[0] === 'locality') {
                    for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
                        component = result.address_components[c];

                        if (component.types[0] === 'locality') {
                            city = component.long_name;
                            break;
                        }
                    }
                }
                else if (!city && !cityAlt && result.types[0] === 'administrative_area_level_1') {
                    for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
                        component = result.address_components[c];

                        if (component.types[0] === 'administrative_area_level_1') {
                            cityAlt = component.long_name;
                            break;
                        }
                    }
                } else if (!country && result.types[0] === 'country') {
                    country = result.address_components[0].long_name;
                    countryCode = result.address_components[0].short_name;
                }

                if (city && country) {
                    break;
                }
            }
            if(countryCode!= 'AE'){
				errorAlert('Error','Detected country <b>'+country+'</b>, Only location from   <b>UAE</b> allowed');
				$('#mhidden').addClass('hide');
				$('#m_lat').val('');
				$('#m_lng').val('');
				 deleteOverlays();
			}

             
}
  
</script> 
<script>
	var markersArray = [];
	var nearcity_lat ='25.2048';
	var nearcity_lng ='55.2708';
		<?php
	if(empty($this->location)){ ?>
	var nearcity_lat ='25.2048';
	var nearcity_lng ='55.2708';
	<?php }else{
	?>
	var nearcity_lat ='<?php echo LATITUDE;?>';
	var nearcity_lng ='<?php echo LONGITUDE;?>';
	<?php
	}
	?>

 
	$(function(){
		
		zoomIndex =  15 ;
		$('#mhidden').addClass('hide');
		initMap12(nearcity_lat,nearcity_lng);
		
		<?php
		if(!empty($this->location)){ ?>
			var myLatlng = new google.maps.LatLng(nearcity_lat,nearcity_lng);
		placeMarker2(myLatlng);
		<?php } ?> 
		
		})
 function codeAddress2(k) {
		 
			var address =$(k).val();
		 
			if(address != ''){
			geocoder = new google.maps.Geocoder();
			geocoder.geocode( { 'address': address}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				
			initMap12(results[0].geometry.location.lat().toFixed(6),results[0].geometry.location.lng().toFixed(6));
			
			
			        
			
			
			} else {

			}
			});
			}
 }
function initMap12(lati,longi)
{
	 

    var latlng = new google.maps.LatLng(lati, longi);
    var myOptions = {
        zoom: zoomIndex,
        center: latlng,disableDefaultUI: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		zoomControl: true,
		zoomControlOptions: {
		style: google.maps.ZoomControlStyle.LARGE,
		position: google.maps.ControlPosition.LEFT_TOP
		},

    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    // add a click event handler to the map object
    google.maps.event.addListener(map, "click", function(event)
    {
		  geocoder.geocode({ location: event.latLng }, (results, status) => {
    if (status === "OK") {
      if (results[1]) { 
		    $('#locate-add').val(results[0].formatted_address);
		   setaddress(results); 
		   
      } else {
        window.alert("No results found");
      }
    } else {
      window.alert("Geocoder failed due to: " + status);
    }
  });
        placeMarker2(event.latLng);
     $('#mhidden').removeClass('hide');
     $('#m_lat').val(event.latLng.lat());
     $('#m_lng').val(event.latLng.lng());
    
		window.changelocation=false;
    });
}
function placeMarker2(location) {
    // first remove all markers if there are any
    deleteOverlays();
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });

    // add marker in markers array
    markersArray.push(marker);

//map.setCenter(location);
}

function deleteOverlays() {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }
}
function assignCordinates(){
	if($('#m_lat').val()=='' && $('#m_lat').val() =='' ){
			alert('Please choose delivery location.');return false;
		}
		else{
			$.get('<?php echo Yii::app()->createUrl('ajax/update_location');?>',
			{'lat':$('#m_lat').val(),'lng':$('#m_lng').val(),'address':$('#locate-add').val()},function(data){
				
				data = JSON.parse(data);
				if(data.status=='0'){
					alert(data.message);
				}
				else{
					parent.adreesField = $('#locate-add').val();
					parent.successtest = data.message;
					parent.closePopup2();  ;
					
				}
				
				
				
				})
			  
		}
}
</script>
