<?php
/*
Template Name: Страница Онкоцентров
*/
?>
<?php get_header(); ?>
<div class="side-bar-btn-wrap">
			<div class="side-bar-btn">
			 <span class="top-arrow"></span>
			 <span class="bot-arrow"></span>
			</div>
		</div>
<div class="container-fluid fail-bg footer-down">
	<div class="row">
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 move-bar">
					<?php get_sidebar(); ?>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 inner-pad">
					
						<?php if (function_exists('breadcrumb_trail')) { breadcrumb_trail(); } ?>
					
					<div class="select-wrap">
					<h1><?php the_field("h1"); ?></h1>
					<h3 class="select-title"><?php _e("<!--:ru-->Выберите местонахождение онкоцентра:<!--:--><!--:ua-->Виберіть місцезнаходження онкоцентру:<!--:-->"); ?></h3>
					<select name="event-dropdown" id="map-select">
						
						<?php
						$categories=  get_categories('child_of=20');
						foreach ($categories as $category) {
							$option = '<option value="/category/archives/'.$category->category_nicename.'">';
								$option .= $category->cat_name;
								
							$option .= '</option>';
							echo $option;
						}
						?>
					</select>
					</div>
					<div id="map"></div>
					<h4 class="address-title"><?php _e("<!--:ru-->Адреса окноцентров: <!--:--><!--:ua-->Адреси окноцентрів: <!--:-->"); ?></h4>
					<div class="row onco-wrap">
						<?php $posts = get_posts ("category=20&numberposts=900&order=ASC"); ?>
						<?php if ($posts) : ?>
						<?php foreach ($posts as $post) : setup_postdata ($post); ?>
						
						<div class="region col-lg-4 col-md-4 col-sm-6 col-xs-12" data-cent-name="<?php $cat = get_the_category(); echo $cat[0]->cat_name; ?>">
							
								<p class="cent-name"><?php the_title(); ?></p>
								<p class="cent-address" data-cent-address="<?php the_field("centAddress"); ?>" data-cent-lat="<?php the_field("lat"); ?>" data-cent-lng="<?php the_field("lng"); ?>"><?php the_field("centAddress"); ?></p>
								<p class="cent-phone"><?php the_field("centPhone"); ?></p>
								<p class="cent-mail"><?php the_field("centMail"); ?></p>
								<p class="cent-site"><?php the_field("centSite"); ?></p>
							
						</div>
						
						<?php
						endforeach;
						wp_reset_postdata();
						?>
						<?php endif; ?>
						
					</div>
				</div>
				
			</div>
		</div>
	</div>
</div>
</div>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyBDYoym_gTJfDRgXj8KdlKCreUL1I1qkuc"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="<?php bloginfo('template_url');?>/js/gmaps.js"></script>
<script>
$(document).ready(function(){
	$('option:nth-child(10)').attr('selected', 'selected');
	$('.cent-phone:empty').hide()
	$('.cent-mail:empty').hide()
	$('.cent-site:empty').hide()

	var map = new GMaps({
		div: '#map',
		lat: 50.4414339,
		lng: 30.5496378,
		zoom: 9,
	});
		
		GMaps.geocode({
  			address: $('#map-select :selected').text(),
  				callback: function(results, status) {
  	
    				if (status == 'OK') {
      				var latlng = results[0].geometry.location;
      				map.setCenter(latlng.lat(), latlng.lng());
     					map.setZoom(9);
     				}
  				}

			});

var currentRegion = $('.row').find('.region');
		  $(currentRegion).each(function(){
		  	if($(this).attr('data-cent-name') == $('#map-select :selected').text()){
		 	$(this).css({'display':'inline-block'});
		 } else {
		 	$(this).css({'display':'none'});
		 }
})


		var popupTemplate = '<div class="popupText"><h3>%1</h3><p>%2</p></div>';

$(".region").each(function() {
    var title = $(this).find(".cent-name").text();
    var address = $(this).find(".cent-address").text();
    var lat = $(this).find(".cent-address").attr('data-cent-lat');
    var lng = $(this).find(".cent-address").attr('data-cent-lng');

    map.addMarker({
                    lat: lat,
                    lng: lng,
                    
                    infoWindow: {
                        content: popupTemplate.replace('%1',title).replace('%2',address)
                    }
                });
            
        
    
});

		$('#map-select').change(function(){
GMaps.geocode({
  			address: $('#map-select :selected').text(),
  				callback: function(results, status) {
  	
    				if (status == 'OK') {
      				var latlng = results[0].geometry.location;
      				map.setCenter(latlng.lat(), latlng.lng());
     					map.setZoom(9);
     				}
  				}

			});
		})
$('#map-select').change(function(){
		  var currentRegion = $('.row').find('.region');
		  $(currentRegion).each(function(){
		  	if($(this).attr('data-cent-name') == $('#map-select :selected').text()){
		 	$(this).css({'display':'inline-block'});
		 } else {
		 	$(this).css({'display':'none'});
		 }
		  })
		 
				
			
	})
	}) // doc end
		 

$('.cent-address').attr('data-cent-address');	
</script>
<?php get_footer(); ?>