<?php
/*
Template Name: Шаблон страницы Фото нашего центра
*/
?>
<?php
get_header();
$post_id = get_the_ID();
?>
<?php $foto = carbon_get_post_meta( $post_id, 'banner_img_desktop' ); ?>
<?php $foto_mobile = carbon_get_post_meta( $post_id, 'banner_img_mobile' ); ?>
<main class="page page-foto">
<?php if ( $foto != '') { ?>
	<div class="banner container">
		<nav aria-label="Хлебные крошки">
			<ul itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumbs desktop">
				<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<a itemprop="item" href="<?php echo home_url(); ?>/" class="home fa-home" title="Главная страница">
						<span itemprop="name" style='display:none;'>Главная</span>
						<svg width="21" height="16" viewBox="0 0 21 16" fill="none">
							<path d="M11.6473 10.6896H12.1473V11.1896V15.4691H16.4353C16.5143 15.4691 16.5756 15.4462 16.6432 15.3788C16.7108 15.3113 16.7333 15.2505 16.7333 15.1725V9.36976L10.0513 3.8712L3.36922 9.36976V15.1725C3.36922 15.2505 3.39178 15.3113 3.45937 15.3788C3.52698 15.4462 3.5883 15.4691 3.66723 15.4691H7.95527V11.1896V10.6896H8.45527H11.6473ZM10.3711 1.74407L18.9226 8.86174L19.5643 8.09722L16.9141 5.8987L16.7333 5.74874V5.51388V0.537319H14.5413V2.86272V3.93127L13.7209 3.2466L10.6815 0.709949C10.5114 0.572829 10.3095 0.499981 10.0513 0.499981C9.79293 0.499981 9.59094 0.572914 9.42075 0.710194L0.538196 8.09712L1.17996 8.86174L9.73142 1.74407L10.0513 1.47783L10.3711 1.74407Z" fill="white" stroke="white"/>
						</svg>
					</a>
					<meta itemprop="position" content="1">
				</li>
				<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<span class='last_item' itemprop="name"><?php the_title()?></span>
					<meta itemprop="position" content="2">
				</li>
			</ul>
		</nav>
		<div class="banner-wrapper">
			<?php $foto = carbon_get_post_meta( $post_id, 'banner_img_desktop' ); ?>
			<?php $foto_mobile = carbon_get_post_meta( $post_id, 'banner_img_mobile' ); ?>
			<picture class="banner-fon">
				<source srcset="<?php echo wp_get_attachment_url($foto); ?>" media="(min-width: 780px)">
				<img src="<?php echo wp_get_attachment_url($foto_mobile); ?>" alt="<?php echo get_post_meta( $foto, '_wp_attachment_image_alt', true ); ?>">
			</picture>
		</div>
	</div>
<?php } ?>

	<section class="foto-section">
		<div class="container">
			<h1 class="teachers_title"><?php the_title()?></h1>
			<div class="foto-wrapper">
				<?php 
				$images = carbon_get_theme_option( 'slider_img' );
				$count = 1;
				$index = 0;
				foreach ($images as $img) { ?>
					<div class="foto_item foto_item-<?php echo $count; ?>">
						<img loading="lazy" class="click-img" data-num="<?php echo $index; ?>" src="<?php echo wp_get_attachment_url($img['img']); ?>" alt="<?php echo get_post_meta( $img['img'], '_wp_attachment_image_alt', true ); ?>">
					</div>
				<?php
				$count++;
				$index++;
				if($count > 4) $count = 1;
				} ?>
			</div>
			<?php 
			$video = carbon_get_post_meta( $post_id, 'page_video' );
			if ($video != '') { ?>
				<div class="video-wrapper">
					<?php $page_video_preview = carbon_get_post_meta( $post_id, 'page_video_preview' ); ?>
					<img loading="lazy" class="fon-0 video_preview" src="<?php echo wp_get_attachment_url($page_video_preview); ?>" alt="<?php echo get_post_meta( $page_video_preview, '_wp_attachment_image_alt', true ); ?>">
					<button class="video_play">
						<span class="fon-0 btn-play-video"></span>
						<svg width="140" height="140" viewBox="0 0 140 140" fill="none">
							<circle cx="70" cy="70" r="63.5" fill="#D9D9D9" stroke="white" stroke-width="13"/>
							<path d="M88 70L59.5 86.4545L59.5 53.5455L88 70Z" fill="white"/>
						</svg>
					</button>
				</div>
			<?php }?>
		</div>
	</section>
	
	<?php get_template_part( 'template-parts/promo-form' ); ?>
	
	<?php get_template_part( 'template-parts/block-why-us' ); ?>
	
	<?php get_template_part( 'template-parts/map' ); ?>
	
	<div class="slider-modal" style="display: none;">
		<button class="btn-close-slider">
			<img class="btn-close-slider-img" src="<?php echo get_template_directory_uri(); ?>/assets/images/btn-close-modal.svg" alt="кнопка закрыть окно">
		</button>
		<div class="slider-modal-wrapper">
			<div class="swiper swiper-foto">
				<div class="swiper-wrapper">
					<?php 
						foreach ($images as $img) { ?>
						<div class="swiper-slide img__item">
							<img src="<?php echo wp_get_attachment_url($img['img']); ?>" alt="<?php echo get_post_meta( $img['img'], '_wp_attachment_image_alt', true ); ?>">
						</div>
					<?php } ?>
				</div>
				<div class="custom-button-next foto-next desktop"></div>
				<div class="custom-button-prev foto-prev desktop"></div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>
</main>

<script>
	const sliderModal = document.querySelector('.slider-modal');
	
	document.addEventListener('click', (event) => {
		if (event.target.classList.contains("click-img")) {
			const indexSlide = Number(event.target.getAttribute('data-num'));
			setTimeout(() => {
               swiperFoto.slideTo(indexSlide, 100, false );
            }, 100);
			sliderModal.style="";
			return;
		}		
		if (event.target.classList.contains("btn-close-slider-img")) {
			sliderModal.style="display: none;";
			return;
		}
		if (event.target.classList.contains("btn-play-video")) {
			const video = event.target.getAttribute('data-video');
			event.target.parentNode.parentNode.innerHTML = `<?php echo $video ?>`;
			return;
      }
	});
	
</script>
<?php
get_footer();

