<?php
/*
 * 
 * Template Name: Ambiental
 * 
*/
enqueue_aos();
enqueue_swiper();
get_header(); ?>

<!-- ======= CONTEÚDO ======= -->
<main role="main" class="page-ambiental">

  <?php
  # SEÇÃO - BANNER
  get_template_part('template-parts/section', 'banner'); ?>

  <!-- ABA - AÇÕES EKO  -->
  <section class="section-ambiental section-acoes-eko overflow-hidden" data-tab="acoes-eko">
    <div class="mw-1920 mx-auto">
      <div class="container-xl">
        <div class="row">

          <div class="col-12 col-md-4">
            <div class="triangle-wrapper mt-4 mt-sm-0">
              <img src="<?= wp_get_attachment_url(o2_get_field('imagem-triangulo')); ?>" alt="Ações EKO">
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="text-wrapper">
              <h2 class="font60" data-aos="fade-right" data-aos-duration="600"><?php o2_the_field('titulo'); ?></h2>
              <p class="texto-redacao font24 fw400" data-aos="fade-right" data-aos-duration="600" data-aos-delay="200"><?php o2_the_field('texto-inicial'); ?></p>
            </div>
          </div>

          <div class="col-12 col-md-4 position-relative d-flex flex-column flex-sm-row">

            <div class="swiper-container mw-100">
              <div class="swiper swiper-icones">
                <div class="swiper-wrapper">
                  <?php
                  $slider = o2_get_field('slider-icones');
                  foreach ($slider as $index => $item) : ?>
                    <div class="swiper-slide">
                      <div class="item">
                        <div class="icon-wrapper">
                          <?= $item['icone']; ?>
                        </div>
                        <p>
                          <?= $item['titulo']; ?>
                        </p>
                      </div>
                    </div>
                  <?php
                  endforeach; ?>
                </div>
              </div>
            </div>
            <div class="w-fit-content flex-sm-column d-flex justify-content-center align-items-center gap-3 gap-sm-4 mx-auto mt-4 mt-sm-0">
              <svg class="swiper-button-prev icones-prev" width="13" height="20" viewBox="0 0 13 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 2L3 10L11 18" stroke="#65D98B" stroke-width="3" stroke-linecap="round" />
              </svg>
              <div class="swiper-pagination icones-pagination flex-sm-column"></div>
              <svg class="swiper-button-next icones-next" width="13" height="20" viewBox="0 0 13 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 2L10 10L2 18" stroke="#65D98B" stroke-width="3" stroke-linecap="round" />
              </svg>
            </div>
            <script defer>
              jQuery(function() {
                var swiperIcones = new Swiper(".swiper-icones", {
                  speed: 800,
                  centerInsufficientSlides: true,
                  slidesPerView: "auto",
                  spaceBetween: 20,
                  pagination: {
                    el: ".icones-pagination",
                    clickable: true,
                  },
                  navigation: {
                    nextEl: ".icones-next",
                    prevEl: ".icones-prev"
                  },
                  breakpoints: {
                    575: {
                      direction: 'vertical',
                      loop: true,
                      slidesPerGroup: 5,
                    }
                  }
                });
              });
            </script>

          </div>
        </div>

        <div class="row align-items-center pt-sm-5">
          <div class="col-12 col-md-4">
            <p class="font24 fw400 text-gray font-alternates">
              <?php o2_the_field('texto-final'); ?>
            </p>
          </div>
          <div class="col-12 col-md-8">
            <div class="img-wrapper mt-4 mt-md-0">
              <img src="<?= wp_get_attachment_url(o2_get_field('imagem-final')); ?>" alt="Ações EKO" class="img-fluid">
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- ABA - METAS -->
  <section class="section-ambiental section-metas active overflow-hidden" data-tab="metas">
    <div class="mw-1920 mx-auto">
      <div class="container-fluid container-xxl">
        <div class="row">

          <aside class="col-12 col-lg-3">
            <div style="position: sticky; top: 30px;">

              <nav class="column-tab-wrapper swiper swiper-column-tab mx-auto mb-5 mb-lg-0">
                <div class="swiper-wrapper flex-lg-column">
                  <?php $filtro_descarbonizacao = o2_get_field('filtro_descarbonizacao') != null ? o2_get_field('filtro_descarbonizacao') : 'Metas de Descarbonização'?>
                  <button class="tab swiper-slide" role="tab" data-secondary-tab="netzero">Netzero</button>
                  <button class="tab swiper-slide" role="tab" data-secondary-tab="descarbonizacao">Metas de Descarbonização</button>
                </div>
              </nav>
            </div>
            <script defer>
              jQuery(function() {
                var swiperColumnTab = new Swiper(".swiper-column-tab", {
                  speed: 800,
                  centerInsufficientSlides: true,
                  slidesPerView: "auto",
                  spaceBetween: 5,
                });
                if (window.innerWidth >= 992) {
                  swiperColumnTab.destroy();
                }
              });
            </script>
          </aside>

          <div class="col-12 col-lg-9">

            <!-- ABA - NETZERO -->
            <div class="tab-content" data-secondary-tab="netzero">
              <div class="container-xl">
                <img src="<?= wp_get_attachment_url(o2_get_field('logo-netzero')); ?>" class="logo d-block img-fluid mb-4 mx-auto mx-lg-0 mb-xl-0" alt="Logo Netzero">
                <p class="font18 fw400 text-gray font-alternates mb-4 mb-lg-5"><?php o2_the_field('paragrafo'); ?></p>
                <p class="font18 fw400 text-gray font-alternates mb-4 mb-lg-5"><?php o2_the_field('paragrafo2'); ?></p>
                <p class="font18 fw400 text-gray font-alternates mb-0"><?php o2_the_field('paragrafo3'); ?></p>
                <img src="<?= wp_get_attachment_url(o2_get_field('imagem-triangulo-netzero')); ?>" class="triangulo img-fluid mt-4 mt-xl-0" alt="Triângulo Netzero">
              </div>
            </div>

            <!-- ABA - METAS DE DESCARBONIZAÇÃO -->
            <div class="tab-content" data-secondary-tab="descarbonizacao">
              <nav class="column-tab-wrapper swiper swiper-tab">
                <div class="swiper-wrapper">
                  <?php
                  $abas = o2_get_field('abas');
                  
                  foreach ($abas as $item) : ?>
                    <button class="aba swiper-slide text-uppercase mx-0" role="tab" data-aba="<?= stringToSlug($item['nome']); ?>"><?= $item['nome']; ?></button>
                  <?php
                  endforeach; ?>
                </div>
              </nav>
              
              <script defer>
                jQuery(function() {
                  var swiperColumnTab = new Swiper(".swiper-tab", {
                    speed: 800,
                    centerInsufficientSlides: false,
                    slidesPerView: "auto",
                    spaceBetween: 5,
                  });
                });
                </script>

<?php
              $abas = o2_get_field('abas');
              foreach ($abas as $item) : ?>
                <div class="aba-content" data-aba="<?= stringToSlug($item['nome']); ?>">
                  <h2 class="font60 fw700 text-navy-green"><?= $item['nome']; ?></h2>
                  <div class="editor">
                    <?php echo apply_filters('the_content', $item['conteudo']); ?>
                  </div>
                </div>
                <?php
              endforeach; ?>
              <script>
                jQuery(function() {
                  // Função para gerenciar a troca de abas
                  jQuery(".aba").on("click", function() {
                    // Remover a classe ativa de todas as abas e conteúdos
                    jQuery(".aba").removeClass("active");
                    jQuery(".aba-content").removeClass("active");
                    
                    // Adicionar a classe ativa à aba clicada
                    jQuery(this).addClass("active");
                    
                    // Identificar o conteúdo correspondente
                    var target = jQuery(this).data("aba");
                    
                    // Exibir o conteúdo correspondente
                    jQuery(`.aba-content[data-aba="${target}"]`).addClass("active");
                  });

                  // Ativar a primeira aba e conteúdo por padrão
                  jQuery(".aba").first().addClass("active");
                  jQuery(".aba-content").first().addClass("active");
                });
              </script>

            </div>

          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<?php
get_footer(); ?>