<?php
/*
Template Name: Portfolio
*/
get_header();
?>
<div class="container">
	<div class="row">
		<div class="col-lg-12 accroche">
			<h1><?php echo get_field('nom_de_la_page'); ?></h1>
		</div>
		<div class="offset-lg-8 col-lg-1">
			<div class="circleTop"></div>
		</div>
		<div class="col-12">
			<div class="button-group">
				<button class="tout is-checked" data-target="*">tout</button>
				<button class="web" data-target=".web">web</button>
				<button class="print" data-target=".print">print</button>
				<button class="video" data-target=".video">vidéo</button>
				<button class="motiondesign" data-target=".motiondesign">motion design</button>
			</div>
		</div>
	</div>
</div>
<div class="container">
	<div class="row grid">


		<?php
		$args = array(
			'post_type' => 'portfolio',
			'posts_per_page' => -1,
		);
		$portfolio_post = new WP_Query($args);

		?>

		<?php if ($portfolio_post->have_posts()) : while ($portfolio_post->have_posts()) : the_post(); ?>
				<?php echo get_the_title(); ?>
			<?php endwhile; ?>
		<?php endif; ?>



		<!-- MA CUSTOM -->
		<?php
		$cat_colors = array(
			'web' => '#1CC7C7',
			'print' => '#C14FE3',
			'motiondesign' => '#21D5F5',
			'video' => '#21D5F5',
		);
		$portfolio_post = get_post(18150);
		$projectUrl = get_permalink($portfolio_post);
		$thumbnailUrl = get_the_post_thumbnail_url($portfolio_post, 'full');
		$mobileThumbnailUrl = get_the_post_thumbnail_url($portfolio_post, 'full');
		$projectDescription = get_field('project_description', $portfolio_post);

		$pousseBoule = 'offset-lg-8';
		$projectType = 'web';
		$projectTitle = get_the_title($portfolio_post);
		$clientName = get_field('client_name', $portfolio_post);

		$currentProjectColor = $cat_colors[$projectType];

		$mouse = $categorie === 'video' ? 'Mouseactive' : null;
		$i = 3;
		$ballOffset = $i === 1 ? 'offset-lg-4' : ($i === 2 ? 'offset-lg-4' : 'offset-lg-8');
		?>
		<div class="col-12 element-item grid-sizer project-type--<?php echo $projectType; ?> <?php echo $projectType; ?>" data-category="transition">
			<div class="row">

				<div class="<?php echo $ballOffset; ?> col-lg-1">
					<div style="background-color: <?php echo $couleur; ?>" class="circleTop"></div>
				</div>
				<div class="col-12 <?php
														if ($categorie === 'video'):
															echo ("openSlickModal-" . $compteurVideo);
														endif;
														if (empty($lienvideo)) {
															echo ' clickno';
														}
														?>">
					<img class="large <?php echo $mouse; ?>" src="<?php echo $thumbnailUrl ?>" alt="alt">
					<img class="mobile" src="<?php echo $mobileThumbnailUrl ?>" alt="alt">
				</div>

				<div style="color: <?php echo $currentProjectColor; ?>" class="col-lg-4 <?php echo $i % 2 == 0 ? '' : 'offset-lg-4' ?> ">
					<div style="background-color: <?php echo $currentProjectColor ?>" class="barre"></div>
					<h3><?php echo $projectTitle ?></h3>
					<p class="client"><?php echo $clientName ?></p>
				</div>
				<div class="col-lg-4 contenu">
					<?php echo $projectDescription ?>
					<a class="case-button" href="<?php echo $projectUrl ?>">Lire le Case</a>
				</div>


			</div>
		</div>
		<?php
		// check if the repeater field has rows of data
		$couleur = array(
			'web' => '#1CC7C7',
			'print' => '#C14FE3',
			'motiondesign' => '#21D5F5',
			'video' => '#21D5F5',
		);
		$i = 1;
		$compteurBoule = 1;
		$compteurVideo = 1;

		if (have_rows('portfolio_beta')):
			// loop through the rows of data

			while (have_rows('portfolio_beta')) : the_row();
				$image = get_sub_field('image_du_projet');
				$imageMobile = get_sub_field('image_du_projet_mobile');
				$categorie = get_sub_field('categorie_du_projet');
				$mouse = 'Mousenonactif';
				//print_r($categorie);
				$valeur = $categorie['value'];

				// COMPTEUR BOULE
				if ($compteurBoule == 1):
				elseif ($compteurBoule == 2):
					$pousseBoule = 'offset-lg-4';
				elseif ($compteurBoule == 3):
					$pousseBoule = 'offset-lg-8';
					$compteurBoule = 1;
				endif;
				// FIN COMPTEUR BOULE

				// COMPTEUR VIDEO ET MOUSE VIDEO
				if ($categorie['value'] === 'video'):
					$mouse = 'Mouseactive';
				endif;
				// FIN COMPTEUR VIDEO ET FIN MOUSE VIDEO
				// LIEN VIDEO VIDE
				$lienvideo = get_sub_field('url_de_la_video');
				// FIN LIEN VIDEO VIDE
		?>
				<div class="col-12 element-item grid-sizer <?php echo $categorie['value']; ?>" data-category="transition">
					<div class="row">

						<div class="<?php echo $pousseBoule; ?> col-lg-1">
							<div style="background-color: <?php echo $couleur[$valeur]; ?>" class="circleTop"></div>
						</div>
						<div class="col-12 <?php
																if ($categorie['value'] === 'video'):
																	echo ("openSlickModal-" . $compteurVideo);
																endif;
																if (empty($lienvideo)) {
																	echo ' clickno';
																}
																?>">
							<img class="large <?php echo $mouse; ?>" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>">
							<img class="mobile" src="<?php echo $imageMobile['url']; ?>" alt="<?php echo $imageMobile['alt'] ?>">
						</div>
						<?php
						if ($i % 2 == 0):
						?>
							<div style="color: <?php echo $couleur[$valeur]; ?>" class="col-lg-4">
								<div style="background-color: <?php echo $couleur[$valeur]; ?>" class="barre"></div>
								<h3><?php echo get_sub_field('nom_du_projet'); ?></h3>
								<p class="client"><?php echo get_sub_field('nom_du_client'); ?></p>
							</div>
							<div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet'); ?></div>
						<?php
						else:
						?>
							<div style="color: <?php echo $couleur[$valeur]; ?>" class="offset-lg-4 col-lg-4">
								<div style="background-color: <?php echo $couleur[$valeur]; ?>" class="barre"></div>
								<h3><?php echo get_sub_field('nom_du_projet'); ?></h3>
								<p class="client"><?php echo get_sub_field('nom_du_client'); ?></p>
							</div>
							<div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet'); ?></div>
						<?php
						endif;
						?>

					</div>
				</div>
				<?php

				if ($categorie['value'] === 'video'):
				?>
					<div id="video-portfolio-<?php echo $compteurVideo; ?>" class="slickModal">
						<div class="slickWindow">
							<!-- Your popup content -->
							<iframe id="myVideo" src="<?php echo get_sub_field('url_de_la_video'); ?>" frameborder="0" allowfullscreen>
							</iframe>
							<!-- / Your popup content -->
						</div>
					</div>
		<?php
					$compteurVideo++;
				endif;

				$i++;
				$compteurBoule++;
			endwhile;
		else :
		// no rows found
		endif;
		?>
	</div>
	<div class="row">
		<div class="col-12">
			<div class="circleEnd"></div>
		</div>
	</div>
</div>


<?php get_footer(); ?>