<?php
/**
 * Template Name: Home Page
 *
 * The template for displaying the home page
 *
 * @package asc2015 Theme
 * @since 0.1.0
 */

get_header(); ?>

<div id="main" class="main">
	<div id="banner-section" class="section">
		<header>
			<div class="container">
				<div id="logo">
					<svg width="214px">
	    				<use xlink:href="#asc-logo" />
	    			</svg>
				</div>
				<a aria-label="mobile menu" class="nav-toggle">
					<span></span>
					<span></span>
					<span></span>
				</a>
				<div id="main-menu"><?php wp_nav_menu(); ?></div>
			</div>
		</header>
		<div class="mobile-main-menu collapse"><?php wp_nav_menu(); ?></div>
		<?php 
		/**
		 * Query DB for next event
		 */
		$args = array(
					'post_type' 	 => 'tribe_events',
					'posts_per_page' => 1,
					'orderby' 		 => 'meta_value_num',
					'meta_key' 		 => '_EventStartDate',
					'order' 		 => 'ASC'
					);
		$event_query = new WP_Query($args);
		if($event_query):
			while ($event_query->have_posts()) {
				$event_query->the_post();
				$title = get_the_title();
				$location = tribe_get_venue();
				$start = tribe_get_start_date($post->ID,false,'M jS, Y');
				$time = tribe_get_start_time($post->ID, 'g:i a');
				$mktime = tribe_get_start_time($post->ID, 'U');
				//Adjusts for a 5 hr offset
				$mktime = $mktime+18000;
			}
		endif;
		wp_reset_postdata();
		?>
		<div class="container">
			<div id="upcoming-event-container" class="col-md-10 col-md-offset-1 col-xs-12">
				<div id="upcoming-event-wrapper">
					<div id="upcoming-event-info" data-mktime="<?php echo $mktime; ?>">
						<div id="upcoming-event-label">Upcoming Event</div>
						<div id="event-title"><?php echo $title ?> @ <?php echo $location ?></div>
						<div id="event-time" class="pull-left"><?php echo $time ?></div>
						<div id="event-date" class="pull-right"><?php echo $start ?></div>
					</div>
					<div id="countdown-timer">
						<div id="days-container" class="countdown-container"><span id="days" class="number">00</span>days</div>
						<div id="hours-container" class="countdown-container"><span id="hours" class="number">00</span>hours</div>
						<div id="minutes-container" class="countdown-container"><span id="minutes" class="number">00</span>minutes</div>
						<div id="seconds-container" class="countdown-container"><span id="seconds" class="number">00</span>seconds</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="about-section" class="section">
		<div id="fsu-crest"></div>
		<h2 class="section-header">About Austin Seminoles</h2>
		<h4 class="section-tagline">The Officially Sanctioned Club of Austin, TX</h4>
		<p>Whether you’re looking for a group to watch the football games with or wanting to network with Florida State alumni the Austin Seminoles is your source for all things FSU in Austin.</p>
		<?php $page = get_page_by_title('Membership'); ?>
		<a href="<?php echo get_permalink($page->ID); ?>" class="btn btn-primary">Learn More</a>
	</div>
	<div id="bio-section" class="section">
		<div id="visible-bio">
			<div id="bio-wrapper">
				<?php 
					/**
					 * Query DB for next event
					 */
					$args = array(
								'post_type' 	 => 'officer_type',
								'posts_per_page' => 10,
								'order' 		 => 'ASC'
								);
					$bios_query = new WP_Query($args);
					if($bios_query):
						$count = 0;
						while ($bios_query->have_posts()):
							$bios_query->the_post();
							$count++; ?>
							<div class="bio-container">
								<div class="bio-img">
									<img src="<?php echo get_template_directory_uri(); ?>/images/src/placeholder-headshot.jpg" width="140" height="140" class="img-circle" />
								</div>
								<h4 class="bio-name"><?php echo get_the_title(); ?></h4>
								<div class="bio-position"><?php the_field('position'); ?> - Class of <?php the_field('year_graduated'); ?></div>
								<div class="bio-quote">&quot;<?php the_field('favorite_or_funny_quote'); ?>&quot;</div>
							</div>
						<?php endwhile;
					endif;
					wp_reset_postdata();
				?>
			</div>
		</div>
		<div id="bio-nav-buttons">
			<?php for ($i=0; $i < $count; $i++) {
				if($i == 0){
					echo '<li class="dot active"></li>';					
				}else{
					echo '<li class="dot"></li>';					
				}
			} ?>
		</div>
	</div>
	<div id="news-section" class="section">
		<h2 class="section-header">Recent News</h2>
		<h4 class="section-tagline">Stay Up To Date With Us</h4>
		<div id="news-container">
			<?php 
			/**
			 * Query DB for next event
			 */
			$args = array(
						'posts_per_page' => 3,
						'category' 		 => 'front_page_news'
						);
			$news_query = new WP_Query($args);
			if($news_query):
				while ($news_query->have_posts()):
					$news_query->the_post(); ?>
					<div class="news-item col-sm-4">
						<div class="date">
							<span class="month"><?php echo get_the_date('M'); ?></span>
							<span class="day"><?php echo get_the_date('d'); ?></span>
						</div>
						<div class="news-wrapper">					
							<div class="news-image">
								<a href="<?php echo get_permalink($post->ID); ?>" title="<?php the_title_attribute(); ?>"><?php echo get_the_post_thumbnail( $page->ID ); ?></a>
							</div>
							<h3><a href="<?php echo get_permalink($post->ID); ?>" title="<?php the_title_attribute(); ?>"><?php echo get_the_title(); ?></a></h3>
							<p class="excerpt"><?php the_excerpt(); ?> </p>
						</div>
					</div>
				<?php endwhile;
			endif;
			wp_reset_postdata();
			?>
		</div>
	</div>
</div>
<?php
get_footer();
?>