<?php 
/*
 * Template Name: Contact pagina
 * Description: Contact pagina
 */


get_header(); ?>
<style type="text/css">

.acf-map {
	width: 100%;
	height: 400px;
	border: #ccc solid 1px;
	margin: 20px 0;
}

</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<div class="aftermenubar"></div>

<?php if ( function_exists('yoast_breadcrumb') ) {
	yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<div class="row-fluid">
			<div class="span6">
				<h1><?php echo get_the_title(); ?></h1>
				<div class="blueline"></div>
			</div>
			<div class="span6">
				<div class="pull-right">

				</div>
				<div class="clearfix"></div>
			</div>
		</div>

<div class="row-fluid">		
		<div class="span12">
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
the_content();
endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
			<div class="extrainfo">De ambassadeurs van Samenbouwen.in werken uitsluitend met betrouwbare zakelijke samenwerkingspartners. Middels onderstaande gegevens kun je contact met ze opnemen.</div>
		</div>
</div>

<div class="row-fluid">		
		<div class="span6">
        
            <?php $map = '';
    // TO SHOW THE PAGE CONTENTS
    while ( have_posts() ) : the_post(); ?> <!--Because the_content() works only inside a WP Loop -->
            <?php 
            $titel1 = get_field('titel1'); 
            	$adres1 = get_field('adres1'); 
            	$map1 = get_field('map1');
            	$titel2 = get_field('titel2');
            	$adres2 = get_field('adres2'); 
            	$map2 = get_field('map2');
            	
            	?> <!-- Page Content -->
        <?php if($map1) {?>
        <h3 class="orgtext"><?php echo $titel1; ?></h3>
		<div class="acf-map" id="map1">
			<div class="marker" data-lat="<?php echo $map1['lat']; ?>" data-lng="<?php echo $map1['lng']; ?>"></div>
		</div>
		<?php } echo '<br/>'.$adres1;?>   

    <?php
    endwhile; //resetting the page loop
    wp_reset_query(); //resetting the page query
    ?>
             <div class="clear"></div>
        </div>
        <div class="span6">
        	
     	<?php if($map2) {?>
     	<h3 class="orgtext"><?php echo $titel2; ?></h3>
		<div class="acf-map" id="map2">
			<div class="marker" data-lat="<?php echo $map2['lat']; ?>" data-lng="<?php echo $map2['lng']; ?>"></div>
		</div>
		<?php } echo '<br/>'.$adres2;?>   
        </div>
    </div>
     <div class="row-fluid">
      <br/><br/><br/>
      <h3 class="orgtext">Ambassadeurs</h3>
      <div class="blueline"></div>

<div class="row-fluid">
<?php 
   /* $aboutUsLink = esc_url( get_permalink( get_page_by_title('Over ons')));  */
  $args = array('post_type' => array( 'team'), 'post_status' => 'publish', 'posts_per_page' => -1);
  $query = new WP_Query($args);
  if($query->found_posts) {
    while ( $query->have_posts() ) : $query->the_post();
      $image = get_field('afbeelding');
      $detailfoto = get_field('detailfoto');
      ?>             

            <div class="span2" onclick="window.location='<?php echo get_permalink(); ?>'" style="cursor:pointer; padding-bottom:30px;">
                <img src="<?php echo $detailfoto; ?>" style="border: 1px solid #223a54;
    max-height: 210px;
    width: auto;">
              <div class="teaminfo">                
          <div class="greyboxt">
           <b><?php echo strtoupper(get_the_title());?></b>



           
          </div>                
                </div>
            </div>                 
<?php endwhile; 
  } ?>                    
</div>

    </div>
</div>

<?php if(isset($map1['lat']) && isset($map1['lng'])) {?>

<script type="text/javascript">
	var map;
	var geocoder;
      function initialize() {
    	geocoder = new google.maps.Geocoder();
    	var latlng = new google.maps.LatLng(<?php echo $map1['lat'].','.$map1['lng'];?>);
        var mapOptions = {
          center: latlng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map1"), mapOptions);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        latlng = new google.maps.LatLng(<?php echo $map2['lat'].','.$map2['lng'];?>);
        mapOptions = {
                center: latlng,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       map = new google.maps.Map(document.getElementById("map2"), mapOptions);
       marker = new google.maps.Marker({
           position: latlng,
           map: map
       }); 
      }
      google.maps.event.addDomListener(window, 'load', initialize);
      
	
</script>

<?php }?>
    <?php get_footer(); ?>