<?php
/**
 * Template part for displaying posts
 *
 */

?>

<?php 
	
$fields = ['start_date','end_date', 'location'];
foreach ($fields as $v) {
$$v = get_field( $v);
}

?>
<div class="event-details">

	<?php 
		$date_now = date('Y-m-d H:i:s');
		$time_now = strtotime($date_now);
		$start_time = strtotime($start_date);
	?>

	<?php if($time_now > $start_time):?>
		
		<p><span class="past-event capitalize label">Event Ended</span><br>
		<small class="dim capitalize small">This Event has already ended.</small></p>
		
	<?php else:?>
		<p><span class="future-event capitalize label radius">Upcoming Event</span><br>
	<?php endif;?>
	<div class="row">
		<div class="medium-6 column">

			<p><span class="small bold capitalize">DATE AND TIME</span><br>
			 <span><i class="material-icons">date_range</i> From : <?php echo $start_date;?></span> <?php if ($end_date):?><br>  <span> To : <?php echo $end_date;?></span><?php endif;?>
			</p>
			<!-- <div id="map_canvas" style="height: 350px;width: 1200px; margin: 0.6em;"></div> -->
			
		</div>
		<div class="medium-6 column">
			
			<p><span class="small bold capitalize">Location</span><br>
				<span><i class="material-icons">place</i> <?php echo $location['address'];?></span>	
			</p>
		</div>
	</div>
</div>

<!-- <script type="text/javascript"> 

  function initialize() {
        var myLatlng = new google.maps.LatLng(<?php echo $location['lat']; ?>, <?php echo $location['lng']; ?>);
        var myOptions = {
          zoom: 11,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }

      function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize&key=AIzaSyDKRtBeS-ys8Ef0oonWpsZCDmvAAPf82IE";
        document.body.appendChild(script);
      }

      window.onload = loadScript;
    </script> -->
	
			