<?php
/**
 * Template Name: Projects
 * @package clientcanvas
 */

get_header(); ?>

<main id="main" class="site-main" role="main">
	<?php get_template_part( 'template-parts/follow-us');?>
	<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
	<section class="banner" style="background-image: url('<?php echo $image[0]; ?>');">
		<div class="message-wrap">
			<div class="message-wrap-headline">
				<h1><?php the_title(); ?></h1>
				<a href="#projects" class="scroll-cta"><i class="fa fa-long-arrow-down" aria-hidden="true"></i></a>
			</div>
		</div>
	</section>
	<section id="projects" class="dark-section welcome">
		<?php get_template_part( 'template-parts/grid');?>
		<div class="container-fluid">
			<h2 class="section-title dark block-reveal"><span><?php the_field('contact_intro_headline'); ?></span></h2>
			<div class="row">
				<div class="col-xs-12 map-sidebar animate">
				<h3>Projects by State</h3>
				<div class="map-tab">
					<input id="tab-one" type="checkbox" name="tabs">
					<label for="tab-one">Mississippi</label>
					<div class="tab-content">
						<?php
							$args = array(
								'numberposts'	=> 100,
								'post_type'		=> 'sfi_projects',
								'meta_key'		=> 'project_state',
								'meta_value'	=> 'Mississippi'
							);
							$the_query = new WP_Query( $args );
						?>
						<?php if( $the_query->have_posts() ): ?>
							<?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
								<a href="<?php the_permalink(); ?>">
									<?php the_title(); ?>
								</a>
							<?php endwhile; ?>
						<?php endif; ?>
						<?php wp_reset_query();	 // Restore global post data stomped by the_post(). ?>
					</div>
				</div>
				<div class="map-tab">
					<input id="tab-two" type="checkbox" name="tabs">
					<label for="tab-two">Louisiana</label>
					<div class="tab-content">
						<?php
							$args = array(
								'numberposts'	=> 100,
								'post_type'		=> 'sfi_projects',
								'meta_key'		=> 'project_state',
								'meta_value'	=> 'Louisiana'
							);
							$the_query = new WP_Query( $args );
						?>
						<?php if( $the_query->have_posts() ): ?>
							<?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
								<a href="<?php the_permalink(); ?>">
									<?php the_title(); ?>
								</a>
							<?php endwhile; ?>
						<?php endif; ?>
						<?php wp_reset_query();	 // Restore global post data stomped by the_post(). ?>
					</div>
				</div>
				</div>
				<div class="col-xs-12 animate">
					<div class="map-wrapper">
						<img src="/wp-content/themes/canvas/img/us-map.png" alt="United States Map">


						<?php
						// get taxonomy

						$categories = get_categories('taxonomy=city&post_type=sfi_projects');

						// get the current taxonomy term
						$term = get_queried_object();

						// vars
						$image = get_field('project_city_image', $term);
						$top = get_field('map_point_top', $term);
						$left = get_field('map_point_left', $term);
						?>
						<ul>
							<?php foreach ($categories as $category) : ?>
								<li class="map-marker" style="left:<?php echo $left; ?>%; top:<?php echo $top; ?>%">
									<a href="<?php echo get_category_link($category->cat_ID); ?>"><?php echo $category->name; ?></a>
									<img src="<?php echo $image['url']; ?>">
								</li>
							<?php endforeach; ?>
						<ul>

					</div>
				</div>
			</div>
		</div>
	</section>
</main>

<?php get_footer(); ?>