<?php
get_header();
$post_id = get_the_ID();

$terms = get_terms( array(
	'taxonomy' => 'courses',
	'hide_empty' => false,
) ); 
$current_term_id = get_queried_object_id();

$current_term = get_queried_object();
$foto = carbon_get_term_meta( $current_term_id, 'banner_img_desktop' );
$foto_mobile = carbon_get_term_meta( $current_term_id, 'banner_img_mobile' ); 

if ($foto != '') {?>
<main class="courses">
	<section class="banner">
		<nav class="container-max" aria-label="Хлебные крошки">
			<ul class="breadcrumbs desktop">
				<li>
					<a href="<?php echo home_url(); ?>/" class="home fa-home" title="Главная страница">
						<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>
				</li>
				<li>
					<a href="<?php echo home_url(); ?>/cources/" title="все курсы">
						Все курсы
					</a>
				</li>
				<li>
					<span class='last_item'><?php echo esc_html($current_term->name); ?></span>
				</li>
			</ul>
		</nav>
		<div class="banner-wrapper">
			<picture class="banner-fon">
				<source srcset="<?php echo esc_url(wp_get_attachment_url($foto)); ?>" media="(min-width: 780px)">
				<img src="<?php echo esc_url(wp_get_attachment_url($foto_mobile)); ?>" alt="<?php echo esc_attr(get_post_meta($foto, '_wp_attachment_image_alt', true)); ?>">
			</picture>
			<div class="banner__content">
				<?php echo carbon_get_term_meta( $current_term_id, 'banner_content' ); ?>
			</div>
		</div>
	</section>
<?php } else { ?>
	<div class="banner_expander"></div>
<?php } ?>

<?php get_template_part( 'template-parts/block-banner-info' ); ?>

<?php $title = carbon_get_term_meta( $current_term_id , 'title_product' ); ?>
<section class="preparation">
	<div class="container">
	<?php if ($title != '') { ?>
		<h2 class="section-Mntitle-circle"><?php echo esc_html($title); ?></h2>
	<?php } ?>

		<div class="product-warpper">
			<?php 
			$args = array(
				'post_type' => 'course',
				'posts_per_page' => -1,
				'tax_query' => array(
					array(
						'taxonomy' => 'courses',
						'field' => 'term_id',
						'terms' => $current_term_id
					 )
				  )
			);
			query_posts($args); ?>
			<?php if (have_posts()) : while (have_posts()) : the_post(); 
			$gallery = get_field('gallery'); ?>
			
			<a href="<?php the_permalink(); ?>" class="popular__subject">
				<div class="popular__subject_img">
					<?php $label = carbon_get_post_meta( $post->ID, 'box_label' ); 
						if ($label != "") :?>
							<span class="popular__subject_label"><?php echo esc_html($label); ?></span>
						<?php endif; ?>
					<?php if (!empty($gallery)) {?>
						<img src="<?php echo esc_url($gallery[0]['url']); ?>" alt="<?php echo esc_attr(get_the_title()); ?>" title="<?php echo esc_attr(get_the_title()); ?>">  
					<?php } else {?>
						<img src="/wp-content/uploads/2021/02/podgotovka-k-oge-po-geografii.jpg" alt="<?php echo esc_attr(get_the_title()); ?>" title="<?php echo esc_attr(get_the_title()); ?>">
					<?php } ?>	
				</div>						
				<div class="product-info">
					<h3 class="popular__subject_title"><?php the_title(); ?></h3>
					<p class="popular__subject_text"><?php $informaciya_o_kurse = get_field('informaciya_o_kurse'); echo wp_trim_words( $informaciya_o_kurse, 300, ' ...' ); ?></p>
				</div>
			</a>
			
		<?php endwhile; ?>
			
		<?php else : ?>
			
		<?php endif; wp_reset_query(); ?>
			
		</div>
		<div class="course_description">
			<?php echo category_description( $current_term_id ); ?>
		</div>
	</div>
</section>

<?php get_template_part( 'template-parts/promo-form' ); ?>
<?php get_template_part( 'template-parts/block-price' ); ?>
<?php get_template_part( 
	'template-parts/teachers', 
	null,
	array(
		'key' => '_select_courses|||0|id',
		'value' => $current_term_id,
	)
); ?>
<?php get_template_part( 'template-parts/block-why-us' ); ?>
<?php get_template_part( 'template-parts/reviews' ); ?>
<?php get_template_part( 'template-parts/news' ); ?>
<?php get_template_part( 'template-parts/promo-form' ); ?>
<?php get_template_part( 'template-parts/map' ); ?>
	
</main>

<script>
  document.addEventListener('click', (event) => {
	 if (event.target.classList.contains("tab-clicked")) {
		const tabsBlock = event.target.parentNode.parentNode.parentNode;
		const tabNum = event.target.parentNode.getAttribute('data-tab-btn');

		tabsBlock.querySelector('.tabs-content').style = 'opacity:0; filter: blur(5px); left: -50%';

		tabsBlock.querySelectorAll('.tab').forEach((item) => {
		   item.classList.remove('active');
		});

		tabsBlock.querySelector(`[data-tab-btn='${tabNum}']`).classList.add('active');

		setTimeout(() => {
		   tabsBlock.querySelector('.tabs-content').style = '';

		   tabsBlock.querySelectorAll('.page-tab').forEach((item, index) => {
			  if (index != Number(tabNum - 1)) item.classList.remove('active'); else item.classList.add('active');
		   });
		}, 300)

		return;
	 }
  });
</script>

<?php
get_footer();