<?php
/*
 * Template name: Страница Настройка
 */
?>

<?php get_header(); ?>

<section class="first-block-v2ray">
<div class="container">
	<h1 class="h1-v2ray-vpn"><?php the_field( 'zagolovok_set' ); ?></h1>
	<p class="first-block-txt"><?php the_field( 'tekst_pod_zagolovkom_set' ); ?></p>
	<a href="#" class="nav-trigger get-telegram-btn scroll-fade-in">Подключить</a>
	</div>
</section>

<section class="set-platform">
<div class="container">
<div class="tab" id="tab-1">
  <div class="select-platform">
    <button type="button" class="tab-btn tab-btn-active" data-target-id="0"><svg class="platform-icon" viewBox="0 0 24 24">
                            <path d="M3,12V6.75L9,5.43V11.91L3,12M20,3V11.75L10,11.9V5.21L20,3M3,13L9,13.09V19.9L3,18.75V13M20,13.25V22L10,20.09V13.1L20,13.25Z"></path>
                        </svg>
                        Windows</button>
    <button type="button" class="tab-btn" data-target-id="1"> <svg class="platform-icon" viewBox="0 0 24 24">
                            <path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z"></path>
                        </svg>
                        macOS</button>
    <button type="button" class="tab-btn" data-target-id="2"><svg class="platform-icon" viewBox="0 0 24 24">
                            <path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z"></path>
                        </svg>
                        iOS</button>
	<button type="button" class="tab-btn" data-target-id="3"> <svg class="platform-icon" viewBox="0 0 24 24">
                            <path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z"></path>
                        </svg>
                        Android</button> 
  </div>
  <div class="platform-use">
    <div class="tab-pane tab-pane-show" data-id="0">
	  <div class="tab-info-use">
		 <h2>Настройка для Windows</h2>
		  <div class="time-d"><?php the_field( 'vremya_nastrojki_set_win' ); ?></div>
		</div>
		<div class="step-tab">
			<?php if ( have_rows( 'shagi_set_win' ) ) : ?>
	<?php while ( have_rows( 'shagi_set_win' ) ) : the_row(); ?>
			<div class="step-item">
				<div class="numb-step"><?php the_sub_field( 'nomer_shaga_set_win' ); ?></div>
				<div class="cont-step">
					<h3><?php the_sub_field( 'zagolovok_shaga_set_win' ); ?></h3>
					<p><?php the_sub_field( 'tekst_shaga_set_win' ); ?></p>
				</div>
			</div>
			<?php endwhile; ?>
<?php else : ?>
	<?php // No rows found ?>
<?php endif; ?>			
		</div>
		
		<div class="recommended-settings-vpn">
			<h3>Рекомендуемые настройки для Windows:</h3>
			<ul>
				<?php if ( have_rows( 'rekomenduemye_nastrojki_set_win' ) ) : ?>
	<?php while ( have_rows( 'rekomenduemye_nastrojki_set_win' ) ) : the_row(); ?>
				<li><?php the_sub_field( 'nastrojka_set_win' ); ?></li>
				<?php endwhile; ?>
<?php else : ?>
	<?php // No rows found ?>
<?php endif; ?>
			</ul>
		</div>
		
	</div>
	  
    <div class="tab-pane" data-id="1">
	  <div class="tab-info-use">
		 <h2>Настройка для macOS</h2>
		  <div class="time-d"><?php the_field( 'vremya_nastrojki_set_mac' ); ?></div>
		</div>
		<div class="step-tab">
			<?php if ( have_rows( 'shagi_set_mac' ) ) : ?>
	<?php while ( have_rows( 'shagi_set_mac' ) ) : the_row(); ?>
			<div class="step-item">
				<div class="numb-step"><?php the_sub_field( 'nomer_shaga_set_mac' ); ?></div>
				<div class="cont-step">
					<h3><?php the_sub_field( 'zagolovok_shaga_set_mac' ); ?></h3>
					<p><?php the_sub_field( 'tekst_shaga_set_mac' ); ?></p>
				</div>
			</div>
			<?php endwhile; ?>
<?php else : ?>
	<?php // No rows found ?>
<?php endif; ?>			
		</div>
		
		<div class="recommended-settings-vpn">
			<h3>Рекомендуемые настройки для macOS:</h3>
			<ul>
				<?php if ( have_rows( 'rekomenduemye_nastrojki_set_mac' ) ) : ?>
	<?php while ( have_rows( 'rekomenduemye_nastrojki_set_mac' ) ) : the_row(); ?>
				<li><?php the_sub_field( 'nastrojka_set_mac' ); ?></li>
				<?php endwhile; ?>
<?php else : ?>
	<?php // No rows found ?>
<?php endif; ?>
			</ul>
		</div>
	  </div>
	  
    <div class="tab-pane" data-id="2">
	  <div class="tab-info-use">
		 <h2>Настройка для iOS</h2>
		  <div class="time-d"><?php the_field( 'vremya_nastrojki_set_ios' ); ?></div>
		</div>
		<div class="step-tab">
			<?php if ( have_rows( 'shagi_set_ios' ) ) : ?>
	<?php while ( have_rows( 'shagi_set_ios' ) ) : the_row(); ?>
			<div class="step-item">
				<div class="numb-step"><?php the_sub_field( 'nomer_shaga_set_ios' ); ?></div>
				<div class="cont-step">
					<h3><?php the_sub_field( 'zagolovok_shaga_set_ios' ); ?></h3>
					<p><?php the_sub_field( 'tekst_shaga_set_ios' ); ?></p>
				</div>
			</div>
			<?php endwhile; ?>
<?php else : ?>
	<?php // No rows found ?>
<?php endif; ?>			
		</div>
		
		<div class="recommended-settings-vpn">
			<h3>Рекомендуемые настройки для iOS:</h3>
			<ul>
				<?php if ( have_rows( 'rekomenduemye_nastrojki_set_ios' ) ) : ?>
	<?php while ( have_rows( 'rekomenduemye_nastrojki_set_ios' ) ) : the_row(); ?>
				<li><?php the_sub_field( 'nastrojka_set_ios' ); ?></li>
				<?php endwhile; ?>
<?php else : ?>
	<?php // No rows found ?>
<?php endif; ?>
			</ul>
		</div>
	  </div>
	  
	<div class="tab-pane" data-id="3">
	  <div class="tab-info-use">
		 <h2>Настройка для Android</h2>
		  <div class="time-d"><?php the_field( 'vremya_nastrojki_set_and' ); ?></div>
		</div>
		<div class="step-tab">
			<?php if ( have_rows( 'shagi_set_and' ) ) : ?>
	<?php while ( have_rows( 'shagi_set_and' ) ) : the_row(); ?>
			<div class="step-item">
				<div class="numb-step"><?php the_sub_field( 'nomer_shaga_set_and' ); ?></div>
				<div class="cont-step">
					<h3><?php the_sub_field( 'zagolovok_shaga_set_and' ); ?></h3>
					<p><?php the_sub_field( 'tekst_shaga_set_and' ); ?></p>
				</div>
			</div>
			<?php endwhile; ?>
<?php else : ?>
	<?php // No rows found ?>
<?php endif; ?>			
		</div>
		
		<div class="recommended-settings-vpn">
			<h3>Рекомендуемые настройки для Android:</h3>
			<ul>
				<?php if ( have_rows( 'rekomenduemye_nastrojki_set_and' ) ) : ?>
	<?php while ( have_rows( 'rekomenduemye_nastrojki_set_and' ) ) : the_row(); ?>
				<li><?php the_sub_field( 'nastrojka_set_and' ); ?></li>
				<?php endwhile; ?>
<?php else : ?>
	<?php // No rows found ?>
<?php endif; ?>
			</ul>
		</div>
	  </div>  
	  
  </div>
</div>
	</div>
</section>

<script>
const showTab = (elTabBtn) => {
    const elTab = elTabBtn.closest('.tab');
    if (elTabBtn.classList.contains('tab-btn-active')) {
      return;
    }
    const targetId = elTabBtn.dataset.targetId;
    const elTabPane = elTab.querySelector(`.tab-pane[data-id="${targetId}"]`);
    if (elTabPane) {
      const elTabBtnActive = elTab.querySelector('.tab-btn-active');
      elTabBtnActive.classList.remove('tab-btn-active');
      const elTabPaneShow = elTab.querySelector('.tab-pane-show');
      elTabPaneShow.classList.remove('tab-pane-show');
      elTabBtn.classList.add('tab-btn-active');
      elTabPane.classList.add('tab-pane-show');
    }
  }

  document.addEventListener('click', (e) => {
    if (e.target && !e.target.closest('.tab-btn')) {
      return;
    }
    const elTabBtn = e.target.closest('.tab-btn');
    showTab(elTabBtn);
  });
</script>

<?php get_footer(); ?>