<!-- Start Store Map List View Popup  -->
        <div class="clsDialog" id="dvDialog-Custom-find" id="ll">
            <div class="clsDialog-Box map-popup" style="width: 75%;">
                <a href="javascript:void(0);" class="clsClose" style="z-index: 9999999;width: 32px!important;height: 32px!important;" onClick="closeDialog('dvDialog-Custom-find');" title="Close"></a>

                <div class="clsContent" style="">
                    <div class="row mr0 ml0">
                      <div class="col-md-4 col-sm-4 pd0">
                        <div class="row mr0 ml0"  style="background: #9d2f88;;padding:20px;">
                          <div class="col-md-12 pd0">
														<p style="text-align: left;
font: normal normal 600 16px/26px Poppins;letter-spacing: 0px;color: #FFFFFF;">Store Locater</p>
														<input type="text" name="search" id="search" style="width:100%;padding:10px;" placeholder="Enter Zip Code">
													</div>	
                        </div>
                        
                        <div class="row mr0 ml0" style="max-height: 300px;overflow: auto;">
                        <div class="col-md-12 pd0">
														<div class="row mr0 ml0" id="storelist">
														
														<?php /*foreach($storeArr as $stores) { ?>
															
															<div class="col-md-12 storeaddress">
																<input type="hidden" id="address_<?=$stores['id']?>" value="<?=$stores['store_location'];?>">
																<h4><a href="javascript:void(0);" onclick="return get_location('<?=$stores['id']?>')"><?=$stores['store_name']; ?></a></h4>
																<p><?=$stores['store_type']; ?></p>
																<p><?=$stores['store_location']; ?></p>
																<p><strong>Open: </strong><?=$stores['open_time']; ?> &nbsp;<strong>Close: </strong><?=$stores['close_time']; ?></p>
																<hr style="border-bottom:1px solid #E4E4E4">
															</div>	
															
														<?php }*/ ?>	
														</div>	
											  </div>	
											  </div>	
                        
                      </div>
                      <div class="col-md-8 col-sm-8 pd0  hidden-xs">
                         <div id="map" style="width:100%;height:400px"></div>                         
                      </div>
                    </div>
                </div>
             </div>
        </div>
        <!-- End Store Map List View Popup  -->

<script>

$("#search").on("input", function() {	
	var curVal = $(this).val();	
	console.log(curVal);
	store_results(curVal);
});

function store_results(curVal)
{
			//$("#storelist").html('');
						
			$.ajax({
					url: "/ajax-store-data.php",
					data: {searchtxt: curVal},
					type: "POST",
					success: function (response) {
						$("#storelist").html(response);	
						initMap();					
					},
					error: function (jqXHR, exception) {
							var msg = '';

							if (jqXHR.status === 0) {
									msg = 'Not connect.\n Verify Network.';
							} else if (jqXHR.status == 404) {
									msg = 'Requested page not found. [404]';
							} else if (jqXHR.status == 500) {
									msg = 'Internal Server Error [500].';
							} else if (exception === 'parsererror') {
									msg = 'Requested JSON parse failed.';
							} else if (exception === 'timeout') {
									msg = 'Time out error.';
							} else if (exception === 'abort') {
									msg = 'Ajax request aborted.';
							} else {
									msg = 'Uncaught Error.\n' + jqXHR.responseText;
							}
					}
			});	
}

function get_location(storeid)
{
	var storelocation = $("#address_"+storeid).val();
	$("#location_address").val(storelocation);
	
	initMap();
}

function initMap() {
	
  //var address = '1001 W Chicago Ave, Chicago, IL 60642, United States';
  var address = $("#location_address").val();

   var map = new google.maps.Map(document.getElementById('map'), { 
       mapTypeId: google.maps.MapTypeId.TERRAIN,
       zoom: 17
   });

   var geocoder = new google.maps.Geocoder();

   geocoder.geocode({
      'address': address
   }, 
   function(results, status) {
      if(status == google.maps.GeocoderStatus.OK) {
         new google.maps.Marker({
            position: results[0].geometry.location,
            map: map
         });
         map.setCenter(results[0].geometry.location);
      }
   });
}

window.initMap = initMap;


$('.btn-findastore').click(function(){
	store_results();
	$("#search").val('');
	$('#dvDialog-Custom-find').fadeIn('fast', function () {
			$(this).find('.clsDialog-Box').slideDown('normal');
			$(this).find('.clsDialog-Box').css({'pointer-events': 'auto'});
	});	
});	


$('.btn-findstore').click(function(){
	store_results();
	$("#search").val('');
	$('#dvDialog-Custom-find').fadeIn('fast', function () {
			$(this).find('.clsDialog-Box').slideDown('normal');
			$(this).find('.clsDialog-Box').css({'pointer-events': 'auto'});
	});	
});	

$('.btn-fstore').click(function(){
	store_results();
	$("#search").val('');
	$('#dvDialog-Custom-find').fadeIn('fast', function () {
			$(this).find('.clsDialog-Box').slideDown('normal');
			$(this).find('.clsDialog-Box').css({'pointer-events': 'auto'});
	});	
});	

function closeDialog(id) {
	$("#search").val('');
		$('#' + id).find('.clsDialog-Box').slideUp('fast', function () {
				$('#' + id).fadeOut('fast');
				$('#' + id).find('.clsDialog-Box').css({'pointer-events': 'none'});
		});
}

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7FCoN0eNTNGEsX6d-BUW-Uh1SiVzn2f0&callback=initMap"></script>