<?php
/**
 * Template for Streaming Page
 * 
 *
 * @package worktech
 */
	$SITE = site_url();
?>	
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

			<!-- HERO -->
 			<section class="hero hero-streaming" data-section="hero"
				style="background: url(<?php echo $SITE; ?>/static/images/hero-event-city.jpg) center center/cover;"> 
				<div>
					<a href="<?php echo $SITE; ?>"><img src="<?php echo $SITE; ?>/static/images/logo-hero-small.svg" alt="Worktech"></a>
					<a href="https://contractworkplaces.com" target="_blank"><img src="/worktech/shared/images/logo-powered-by.svg" alt="CW"></a>
				</div>
				<p class="hero-streaming__band">Bienvenidos al futuro del trabajo</p>
				<section>
					<iframe src="https://www.youtube-nocookie.com/embed/<?php echo get_field('streaming_id', $post_id); ?>" title="Worktech 22 - Live" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
				</section>
				<p style="color: #fff;">JUEVES 27 DE OCTUBRE | 8.30 AM</p> 
			</section>			
 
			<!-- VIRTUAL SPONSORS -->
			<section class="sponsors" data-section="companies"> 
				<?php
					$sponsorsVirtual = array(
							'post_type' => 'sponsors',
							'category_name' => 'virtual',
							'posts_per_page' => 20
					);
					$sponsorsVirtual_query = new WP_Query( $sponsorsVirtual ); 
				?>
				<?php if ( $sponsorsVirtual_query->have_posts() ) : ?>

				<!-- VIRTUAL -->
				<div class="sponsors__wrapper">				
					<h3 class="no-line">Acompañan en esta transmisión:</h3>
					<div class="sponsors__row close">
						<div class="sponsors__cat">
							<?php while ( $sponsorsVirtual_query->have_posts() ) : $sponsorsVirtual_query->the_post(); ?><div class="sponsors__link close">
								<img src="<?php echo get_the_post_thumbnail_url($post_id); ?>" alt="<?php the_title(); ?>" class="accordionItemHeading" data-name="<?php the_title(); ?>" data-url="<?php echo get_field('website', $post_id) ?>" data-description="<?php echo get_field('descripcion', $post_id); ?>" data-material_url="<?php echo get_field('material_url', $post_id) ?>">
							</div>
						<?php endwhile; ?>
						<?php wp_reset_postdata(); ?>
						</div>
						<div class="sponsors__detail">
							<p></p>							
							<div>
								<a href="#" target="blank" rel="noopener" id="linkAbout">CONOCE MÁS SOBRE <span></span></a>								
								<a href="#" target="blank" rel="noopener" id="linkMaterial"><span>DESCARGA SU MATERIAL</span></a>
							</div>
						</div>
					</div>
				</div><!-- /.sponsors-wrapper -->
				<?php endif; ?>
 				<style>.sponsors h3.no-line::before,.sponsors h3.no-line::after{display:none;}</style>
			</section>	
 
			<!-- MIRADAS -->
			<section id="speakers" class="section miradas">
				<h2>Conoce a las miradas inspiradoras que nos acompañarán en esta edición.</h2>
				<div class="speakers">
				<?php
					$speakers = array(
						'post_type' => 'speakers',
						'posts_per_page' => 10
					);
					$speakers_query = new WP_Query( $speakers ); 
				?>
				<?php if ( $speakers_query->have_posts() ) : ?>
				<?php while ( $speakers_query->have_posts() ) : $speakers_query->the_post(); ?>				
					<div class="speaker">
						<div class="speaker__pic">
							<div>&nbsp;</div>
							<?php the_post_thumbnail(); ?></div>
						<div class="speaker__info">
							<h3 class="speaker__name"><?php the_title(); ?></h3>
							<p class="speaker__title"><?php echo get_field('cargo', $post_id) ?></p>
							<a class="speaker__btn" 
							   data-image="<?php echo get_the_post_thumbnail_url($post_id); ?>"
							   data-name="<?php the_title(); ?>" 
							   data-title="<?php echo get_field('cargo', $post_id) ?>" 
							   data-bio="<?php echo get_field('bio', $post_id) ?>">VER BIO</a>
						</div>
						<?php $charla = get_field('charla', $post_id); $charlaDetalle = get_field('detalle', $post_id);
						if( $charla ) { echo '<!-- Charla -->
						<div class="charla">
							<h4>' . $charla . '</h4>
							<p>'. $charlaDetalle .'</p>
						</div>';} else {
						echo '<!-- Sin charla -->';} 
						?> 
					</div>
					<?php endwhile; ?>
				<?php wp_reset_postdata(); ?>
				<?php endif; ?>

				</div>
			</section>
  
			<!-- AGENDA -->
			<section> 
				<div class="agenda" style="background: -webkit-linear-gradient(360deg, #3a94b3, #392057);">
					<a href="<?php the_field('agenda'); ?>" target="_blank" class="agenda__download" style="color:#fff !important; background:none !important;-webkit-text-fill-color:unset"><?php the_field('agenda_text'); ?> 
						<svg width="22.264" height="30.31" viewBox="0 0 22.264 30.31">
						  <path d="M0,30.31H22.264V26.533H0ZM9.234,0V18.035L5.488,14.289,3.109,16.668l8.024,8.024,8.023-8.024L16.777,14.29,13.27,17.8V0Z" fill="#fff"/>
						</svg>
					</a>
				</div> 
			</section>  
  
			<!-- SPONSORS -->
			<section class="sponsors" data-section="companies">
				<div class="section__text">
					<h2>SPONSORS &amp; PARTNERS</h2>
				</div>
				<div class="sponsors__wrapper">
					<?php
						$sponsorsGold = array(
								'post_type' => 'sponsors',
								'category_name' => 'gold',
								'posts_per_page' => 20
						);
						$sponsorsGold_query = new WP_Query( $sponsorsGold ); 
					?>
					<?php if ( $sponsorsGold_query->have_posts() ) : ?>

					<!-- GOLD -->
					<h3>Gold</h3>
					<div class="sponsors__row close">
						<div class="sponsors__cat">
							<?php while ( $sponsorsGold_query->have_posts() ) : $sponsorsGold_query->the_post(); ?><div class="sponsors__link close">
								<img src="<?php echo get_the_post_thumbnail_url($post_id); ?>" alt="<?php the_title(); ?>" class="accordionItemHeading" data-name="<?php the_title(); ?>" data-url="<?php echo get_field('website', $post_id) ?>" data-description="<?php echo get_field('descripcion', $post_id); ?>" data-material="<?php echo get_field('material', $post_id) ?>">
							</div>
						<?php endwhile; ?><?php wp_reset_postdata(); ?></div>
						<div class="sponsors__detail">
							<p></p>							
							<div>
								<a href="#" target="blank" rel="noopener" id="linkAbout">CONOCE MÁS SOBRE <span></span></a>								
								<a href="#" target="blank" rel="noopener" id="linkMaterial"><span>DESCARGA SU MATERIAL</span></a>
							</div>
						</div>
					</div> 
					<?php endif; ?>

					<?php
						$sponsorsSilver = array(
								'post_type' => 'sponsors',
								'category_name' => 'Silver',
								'posts_per_page' => 20
						);
						$sponsorsSilver_query = new WP_Query( $sponsorsSilver ); 
					?>
					<?php if ( $sponsorsSilver_query->have_posts() ) : ?>

					<!-- SILVER -->
					<h3>Silver</h3>
					<div class="sponsors__row close">
						<div class="sponsors__cat">
							<?php while ( $sponsorsSilver_query->have_posts() ) : $sponsorsSilver_query->the_post(); ?><div class="sponsors__link close">
								<img src="<?php echo get_the_post_thumbnail_url($post_id); ?>" alt="<?php the_title(); ?>" class="accordionItemHeading" data-name="<?php the_title(); ?>" data-url="<?php echo get_field('website', $post_id) ?>" data-description="<?php echo get_field('descripcion', $post_id); ?>" data-material="<?php echo get_field('material', $post_id) ?>">
							</div>
						<?php endwhile; ?><?php wp_reset_postdata(); ?></div>
						<div class="sponsors__detail">
							<p></p>							
							<div>
								<a href="#" target="blank" rel="noopener" id="linkAbout">CONOCE MÁS SOBRE <span></span></a>								
								<a href="#" target="blank" rel="noopener" id="linkMaterial"><span>DESCARGA SU MATERIAL</span></a>
							</div>
						</div>
					</div>
					<?php endif; ?>

					<?php
						$sponsorsBronze = array(
								'post_type' => 'sponsors',
								'category_name' => 'Bronze',
								'posts_per_page' => 20
						);
						$sponsorsBronze_query = new WP_Query( $sponsorsBronze ); 
					?>
					<?php if ( $sponsorsBronze_query->have_posts() ) : ?>

					<!-- BRONZE -->
					<h3>Bronze</h3>
					<div class="sponsors__row close">
						<div class="sponsors__cat">
							<?php while ( $sponsorsBronze_query->have_posts() ) : $sponsorsBronze_query->the_post(); ?><div class="sponsors__link close">
								<img src="<?php echo get_the_post_thumbnail_url($post_id); ?>" alt="<?php the_title(); ?>" class="accordionItemHeading" data-name="<?php the_title(); ?>" data-url="<?php echo get_field('website', $post_id) ?>" data-description="<?php echo get_field('descripcion', $post_id); ?>" data-material="<?php echo get_field('material', $post_id) ?>">
							</div>
						<?php endwhile; ?><?php wp_reset_postdata(); ?></div>
						<div class="sponsors__detail">
							<p></p>							
							<div>
								<a href="#" target="blank" rel="noopener" id="linkAbout">CONOCE MÁS SOBRE <span></span></a>								
								<a href="#" target="blank" rel="noopener" id="linkMaterial"><span>DESCARGA SU MATERIAL</span></a>
							</div>
						</div>
					</div>
					<?php endif; ?>
					
					<?php
						$partners = array(
								'post_type' => 'sponsors',
								'category_name' => 'Partner',
								'posts_per_page' => 20
						);
						$partners_query = new WP_Query( $partners ); 
					?>
					<?php if ( $partners_query->have_posts() ) : ?>

					<!-- PARTNERS -->
					<h3>Partners</h3>
					<div class="sponsors__row close">
						<div class="sponsors__cat">
							<?php while ( $partners_query->have_posts() ) : $partners_query->the_post(); ?><div class="sponsors__link close">
								<img src="<?php echo get_the_post_thumbnail_url($post_id); ?>" alt="<?php the_title(); ?>" class="accordionItemHeading" data-name="<?php the_title(); ?>" data-url="<?php echo get_field('website', $post_id) ?>" data-description="<?php echo get_field('descripcion', $post_id); ?>" data-material="<?php echo get_field('material', $post_id) ?>">
							</div>
						<?php endwhile; ?><?php wp_reset_postdata(); ?></div>
						<div class="sponsors__detail">
							<p></p>							
							<div>
								<a href="#" target="blank" rel="noopener" id="linkAbout">CONOCE MÁS SOBRE <span></span></a>								
								<a href="#" target="blank" rel="noopener" id="linkMaterial"><span>DESCARGA SU MATERIAL</span></a>
							</div>
						</div>
					</div>
					<?php endif; ?>
					
					<?php
						$mediaPartners = array(
								'post_type' => 'sponsors',
								'category_name' => 'Media',
								'posts_per_page' => 20
						);
						$mediaPartners_query = new WP_Query( $mediaPartners ); 
					?>
					<?php if ( $mediaPartners_query->have_posts() ) : ?>

					<!-- MEDIA PARTNERS -->
					<h3>Media Partners</h3>
					<div class="sponsors__row close">
						<div class="sponsors__cat">
							<?php while ( $mediaPartners_query->have_posts() ) : $mediaPartners_query->the_post(); ?><div class="sponsors__link close">
								<img src="<?php echo get_the_post_thumbnail_url($post_id); ?>" alt="<?php the_title(); ?>" class="accordionItemHeading" data-name="<?php the_title(); ?>" data-url="<?php echo get_field('website', $post_id) ?>" data-description="<?php echo get_field('descripcion', $post_id); ?>" data-material="<?php echo get_field('material', $post_id) ?>">
							</div>
						<?php endwhile; ?><?php wp_reset_postdata(); ?></div>
						<div class="sponsors__detail">
							<p></p>							
							<div>
								<a href="#" target="blank" rel="noopener" id="linkAbout">CONOCE MÁS SOBRE <span></span></a>								
								<a href="#" target="blank" rel="noopener" id="linkMaterial"><span>DESCARGA SU MATERIAL</span></a>
							</div>
						</div>
					</div>
					<?php endif; ?>

				</div><!-- /.sponsors-wrapper -->
			</section>

			<!-- SPEAKERS #modal -->
			<div class="modal" id="modal">
			  <div class="card">
				<div class="modal__close">
				  <svg xmlns="http://www.w3.org/2000/svg" width="13.426" height="13.423" viewBox="0 0 13.426 13.423">
					<path id="Icon_ionic-ios-close" data-name="Icon ionic-ios-close"
					  d="M19.589,18l4.8-4.8A1.124,1.124,0,0,0,22.8,11.616l-4.8,4.8-4.8-4.8A1.124,1.124,0,1,0,11.616,13.2l4.8,4.8-4.8,4.8A1.124,1.124,0,0,0,13.2,24.384l4.8-4.8,4.8,4.8A1.124,1.124,0,1,0,24.384,22.8Z"
					  transform="translate(-11.285 -11.289)" fill="#333" />
				  </svg>
				</div>
				<div class="card__pic">
				  <img src="">
				</div>
				<div class="card__info">
				  <h3 class="card__name"></h3>
				  <p class="card__title"></p>
				  <p class="card__bio"></p>
				</div>
			  </div>
			</div> 
 
			<!-- JS SHARED -->
			<script>
				const pageBody = document.querySelector('body');

				function handleSponsors() {
				  const accordionItem = document.querySelectorAll('.sponsors__link');
				  const accordionHeading = document.querySelectorAll('.accordionItemHeading');

				  accordionHeading.forEach((item, index) => {
					item.addEventListener('click', toggleItem);
				  })

				  function toggleItem() {
					const itemClass = this.parentNode.className;

					accordionItem.forEach((item) => {
					  item.className = 'sponsors__link close';
					  item.parentNode.parentNode.className = 'sponsors__row close';
					})

					if (itemClass == 'sponsors__link close') {
					  this.parentNode.className = 'sponsors__link open';
					  this.parentNode.parentNode.parentNode.className = 'sponsors__row open';

					  // Select container to display info of this Sponsor
					  const detail = this.parentNode.parentNode.nextElementSibling;
					  // fill with data
					  detail.querySelector('p').textContent = this.dataset.description;
					  detail.querySelector('a > span').textContent = this.dataset.name;
					  detail.querySelector('#linkAbout').href = this.dataset.url;
					  detail.querySelector('#linkMaterial').href = this.dataset.material_url;
					}
				  }
				}

				function scrollToTarget(target) {
				  const targetLink = target;
				  const element = document.getElementById(targetLink);
				  const headerOffset = 45;
				  const elementPosition = element.getBoundingClientRect().top;
				  const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
				  window.scrollTo({
					top: offsetPosition,
					behavior: "smooth"
				  });
				}

				function handleSpeakers() {
				  const speakers = document.querySelectorAll('.speaker__btn');

				  speakers.forEach((item, index) => {
					item.addEventListener('click', openSpeaker);
					item.addEventListener('mouseover', function () {
					  item.parentElement.previousElementSibling.classList.add('is--hover')
					})
					item.addEventListener('mouseout', function () {
					  item.parentElement.previousElementSibling.classList.remove('is--hover')
					})
				  })

				  function openSpeaker(e) {
					e.preventDefault();
					pageBody.classList.add('is--speaker-open');
					const card = document.querySelector('.card')

					card.querySelector('.card__name').innerHTML = e.target.dataset.name;
					card.querySelector('.card__pic img').src = e.target.dataset.image;
					card.querySelector('.card__title').innerHTML = e.target.dataset.title;
					card.querySelector('.card__bio').innerHTML = e.target.dataset.bio;
				  }

				  document.querySelector('.modal__close').addEventListener('click', closeModal);

				  function closeModal() {
					pageBody.classList.remove('is--speaker-open');
				  }
				}

				handleSponsors();
				handleSpeakers();
			</script> 
			
		</article><!-- #post-<?php the_ID(); ?> -->
		<hr class="wp-block-separator has-alpha-channel-opacity">