<!-- SEÇÃO - BANNER -->
<section class="section-banner d-flex align-items-center" style="background-image: url('<?= wp_get_attachment_url(o2_get_field('imagem-banner')); ?>');">

  <div class="mw-1920 mx-auto">
    <div class="container-xl">
      <h1 class="text-center m-0">
        <?= get_the_title(); ?>
      </h1>
    </div>
  </div>

  <?php
  if (get_page_template_slug() == 'page-ambiental.php') : ?>
    <?php $filtro_acao = o2_get_field('filtro_acao') != null ? o2_get_field('filtro_acao') : 'Ações Eko' ?>
    <?php $filtro_meta = o2_get_field('filtro_meta') != null ? o2_get_field('filtro_meta') : 'Metas' ?>
    <nav class="tab-wrapper d-flex align-items-center">
      <button class="tab active" role="tab" data-tab="acoes-eko"><?= $filtro_acao ?></button>
      <button class="tab" role="tab" data-tab="metas"><?= $filtro_meta ?></button>
    </nav>
    <script>
      jQuery(function() {
        jQuery(function() {
          jQuery('section[data-tab]').hide();

          var initialTab = jQuery('.tab[data-tab]').first();
          initialTab.addClass('active');

          var initialTabValue = initialTab.data('tab');
          jQuery('section[data-tab="' + initialTabValue + '"]').show();

          jQuery('.tab[data-tab]').on('click', function() {
            var selectedTab = jQuery(this).data('tab');

            jQuery('.tab[data-tab]').removeClass('active');
            jQuery('section[data-tab]').hide();

            jQuery(this).addClass('active');
            jQuery('section[data-tab="' + selectedTab + '"]').show();

            var firstSecondaryTab = jQuery('section[data-tab="' + selectedTab + '"] .tab[data-secondary-tab]').first();
            jQuery('.tab[data-secondary-tab]').removeClass('active');
            jQuery('.tab-content').hide();

            if (firstSecondaryTab.length) {
              firstSecondaryTab.addClass('active');
              var firstSecondaryTabValue = firstSecondaryTab.data('secondary-tab');
              jQuery('.tab-content[data-secondary-tab="' + firstSecondaryTabValue + '"]').fadeIn(400);
            }
          });

          jQuery('.tab[data-secondary-tab]').on('click', function() {
            var selectedSecondaryTab = jQuery(this).data('secondary-tab');

            jQuery('.tab[data-secondary-tab]').removeClass('active');
            jQuery('.tab-content').hide();

            jQuery(this).addClass('active');
            jQuery('.tab-content[data-secondary-tab="' + selectedSecondaryTab + '"]').fadeIn(400);
          });

          var initialSecondaryTab = jQuery('.tab[data-secondary-tab]').first();
          initialSecondaryTab.addClass('active');
          var initialSecondaryTabValue = initialSecondaryTab.data('secondary-tab');
          jQuery('.tab-content[data-secondary-tab="' + initialSecondaryTabValue + '"]').fadeIn(400);
        });
      });
    </script>
  <?php
  endif;

  if (is_page('social')) : ?>
    <nav class="tab-wrapper overflow-hidden">
      <div class="swiper-container position-relative mw-100">
        <div class="swiper swiper-tabs">
          <div class="swiper-wrapper">
            <?php
            $filtro_programas_sociais = o2_get_field('filtro-programas-sociais') != null ? o2_get_field('filtro-programas-sociais') : 'Programas Sociais';
            $filtro_cordeiro = o2_get_field('filtro-cordeiro') != null ? o2_get_field('filtro-cordeiro') : 'Instituto Melo Cordeiro';
            $filtro_eduka = o2_get_field('filtro-eduka') != null ? o2_get_field('filtro-eduka') : 'Projeto E-duka';
            $filtro_costura = o2_get_field('filtro-costura-criativa') != null ? o2_get_field('filtro-costura-criativa') : 'Projeto Costura Criativa';
            $filtro_jilo = o2_get_field('filtro-turma-jilo') != null ? o2_get_field('filtro-turma-jilo') : 'Turma do Jiló';
            $filtro_jovens = o2_get_field('filtro-jovens-de-ouro') != null ? o2_get_field('filtro-jovens-de-ouro') : 'Jovens de Ouro';
            $filtro_agasalho = o2_get_field('filtro-campanha-agasalho') != null ? o2_get_field('filtro-campanha-agasalho') : 'Campanha do Agasalho';
            ?>
            <!-- <button class="swiper-slide tab active" role="tab" data-tab="programas-sociais"><?= $filtro_programas_sociais ?></button> -->
            <button class="swiper-slide tab" role="tab" data-tab="melo-cordeiro"><?= $filtro_cordeiro ?></button>
            <button class="swiper-slide tab" role="tab" data-tab="projeto-eduka"><?= $filtro_eduka ?></button>
            <button class="swiper-slide tab" role="tab" data-tab="costura-criativa"><?= $filtro_costura ?></button>
            <!-- <button class="swiper-slide tab" role="tab" data-tab="turma-jilo"><?= $filtro_jilo ?></button> -->
            <button class="swiper-slide tab" role="tab" data-tab="jovens-ouro"><?= $filtro_jovens ?></button>
            <button class="swiper-slide tab" role="tab" data-tab="campanha-agasalho"><?= $filtro_agasalho ?></button>
          </div>
        </div>
        <div class="swiper-button-prev tabs-prev"></div>
        <div class="swiper-button-next tabs-next"></div>
      </div>
    </nav>
    <script defer>
      jQuery(function() {
        var swiperTabs = new Swiper(".swiper-tabs", {
          speed: 800,
          centerInsufficientSlides: true,
          slidesPerView: 1,
          spaceBetween: 5,
          slideToClickedSlide: false,
          preventClicks: true,
          a11y: false,
          loop: true,
          allowTouchMove: false,
          navigation: {
            nextEl: ".tabs-next",
            prevEl: ".tabs-prev"
          },
          breakpoints: {
            576: {
              centeredSlides: false,
              slidesPerView: "auto",
              slideToClickedSlide: false,
              allowTouchMove: false,
            }
          },
        });

        swiperTabs.on('slideChange', function() {
          const previousIndex = swiperTabs.activeIndex;
          swiperTabs.slideTo(previousIndex, 0, false); // Retorna ao slide anterior
        });

        jQuery(".tab").on("click", function() {
          var tabId = jQuery(this).data("tab");

          jQuery(".tab").removeClass("active");
          jQuery(this).addClass("active");

          jQuery(".section-social").stop().hide().removeClass("active");
          jQuery(".section-social[data-tab='" + tabId + "']").stop().fadeIn(300).addClass("active");

        });
      });
    </script>
  <?php
  endif;

  if (get_page_template_slug() == 'page-governanca.php') : ?>
    <?php
    $filtro_compliance = o2_get_field('filtro-compliance') != null ? o2_get_field('filtro-compliance') : 'Compliance';
    $filtro_politicas = o2_get_field('filtro-politicas') != null ? o2_get_field('filtro-politicas') : 'Políticas';
    ?>
    <nav class="tab-wrapper overflow-hidden d-flex align-items-center" style="padding-top: 8px; padding-bottom: 8px">
      <button class="tab" role="tab" data-tab="compliance"><?= $filtro_compliance ?></button>
      <button class="tab" role="tab" data-tab="politicas"><?= $filtro_politicas ?></button>
    </nav>
    <script defer>
      jQuery(function() {
        jQuery(function() {
          jQuery('section[data-tab]').hide();

          var initialTab = jQuery('.tab[data-tab]').first();
          initialTab.addClass('active');

          var initialTabValue = initialTab.data('tab');
          jQuery('section[data-tab="' + initialTabValue + '"]').show();

          jQuery('.tab[data-tab]').on('click', function() {
            var selectedTab = jQuery(this).data('tab');

            jQuery('.tab[data-tab]').removeClass('active');
            jQuery('section[data-tab]').hide();

            jQuery(this).addClass('active');
            jQuery('section[data-tab="' + selectedTab + '"]').show();

            var firstSecondaryTab = jQuery('section[data-tab="' + selectedTab + '"] .tab[data-secondary-tab]').first();
            jQuery('.tab[data-secondary-tab]').removeClass('active');
            jQuery('.tab-content').hide();

            if (firstSecondaryTab.length) {
              firstSecondaryTab.addClass('active');
              var firstSecondaryTabValue = firstSecondaryTab.data('secondary-tab');
              jQuery('.tab-content[data-secondary-tab="' + firstSecondaryTabValue + '"]').fadeIn(400);
            }
          });

          jQuery('.tab[data-secondary-tab]').on('click', function() {
            var selectedSecondaryTab = jQuery(this).data('secondary-tab');

            jQuery('.tab[data-secondary-tab]').removeClass('active');
            jQuery('.tab-content').hide();

            jQuery(this).addClass('active');
            jQuery('.tab-content[data-secondary-tab="' + selectedSecondaryTab + '"]').fadeIn(400);
          });

          var initialSecondaryTab = jQuery('.tab[data-secondary-tab]').first();
          initialSecondaryTab.addClass('active');
          var initialSecondaryTabValue = initialSecondaryTab.data('secondary-tab');
          jQuery('.tab-content[data-secondary-tab="' + initialSecondaryTabValue + '"]').fadeIn(400);
        });
      });
    </script>
  <?php
  endif;

  if (get_page_template_slug() == 'page-certificacoes.php') : ?>
    <nav class="tab-wrapper overflow-hidden">
      <div class="swiper-container position-relative mw-100">
        <div class="swiper swiper-tabs">
          <div class="swiper-wrapper">
            <?php
            $certificacoes = o2_get_field('certificacoes');
            foreach ($certificacoes as $index => $item) : ?>
              <button class="swiper-slide tab <?= $index == 0 ? 'active' : ''; ?>" role="tab" data-tab="<?= stringToSlug(strip_tags(($item['nome']))); ?>">
                <?= strip_tags($item['nome']); ?>
              </button>
            <?php
            endforeach; ?>
          </div>
        </div>
        <div class="swiper-button-prev tabs-prev"></div>
        <div class="swiper-button-next tabs-next"></div>
      </div>
    </nav>
    <script defer>
      jQuery(function() {
        var swiperTabs = new Swiper(".swiper-tabs", {
          speed: 800,
          centerInsufficientSlides: true,
          slidesPerView: 1,
          spaceBetween: 5,
          slideToClickedSlide: false,
          preventClicks: true,
          a11y: false,
          navigation: {
            nextEl: ".tabs-next",
            prevEl: ".tabs-prev"
          },
          breakpoints: {
            576: {
              centeredSlides: false,
              slidesPerView: "auto",
            }
          },
        });

        jQuery(".tab").on("click", function() {
          var tabId = jQuery(this).data("tab");

          jQuery(".tab").removeClass("active");
          jQuery(this).addClass("active");

          jQuery(".section-certificacao").stop().hide().removeClass("active");
          jQuery(".section-certificacao[data-tab='" + tabId + "']").stop().fadeIn(300).addClass("active");

        });
      });
    </script>
  <?php
  endif;

  if (get_page_template_slug() == 'page-relatorios-anuais.php') : ?>
    <nav class="tab-wrapper overflow-hidden">
      <div class="swiper-container position-relative mw-100">
        <div class="swiper swiper-tabs">
          <div class="swiper-wrapper">
            <?php
              $filtro_igualdade = o2_get_field('filtro-igualdade') != null ? o2_get_field('filtro-igualdade') : 'Relatório de Igualdade Salarial';
              $filtro_sustentabilidade = o2_get_field('filtro-sustentabilidade') != null ? o2_get_field('filtro-sustentabilidade') : 'Relatórios de Sustentabilidade';
              $filtro_reducao = o2_get_field('filtro-reducao') != null ? o2_get_field('filtro-reducao') : 'Inventários de Gases <br class="d-none d-lg-block"> de Efeito Estufa';
            ?>
            <button class="swiper-slide tab active" role="tab" data-tab="igualdade-salarial"><?= $filtro_igualdade?></button>
            <button class="swiper-slide tab" role="tab" data-tab="relatorio-sustentabilidade"><?= $filtro_sustentabilidade?></button>
            <button class="swiper-slide tab" role="tab" data-tab="reducao-emissao-estufa"><?= $filtro_reducao ?></button>
          </div>
        </div>
        <div class="swiper-button-prev tabs-prev"></div>
        <div class="swiper-button-next tabs-next"></div>
      </div>
    </nav>
    <script defer>
      jQuery(function() {
        var swiperTabs = new Swiper(".swiper-tabs", {
          speed: 800,
          centerInsufficientSlides: true,
          slidesPerView: 1,
          spaceBetween: 5,
          slideToClickedSlide: false,
          preventClicks: true,
          a11y: false,
          navigation: {
            nextEl: ".tabs-next",
            prevEl: ".tabs-prev"
          },
          breakpoints: {
            576: {
              centeredSlides: false,
              slidesPerView: "auto",
            }
          },
        });

        jQuery(".tab").on("click", function() {
          var tabId = jQuery(this).data("tab");

          jQuery(".tab").removeClass("active");
          jQuery(this).addClass("active");

          jQuery(".section-relatorios").stop().hide().removeClass("active");
          jQuery(".section-relatorios[data-tab='" + tabId + "']").stop().fadeIn(300).addClass("active");

        });
      });
    </script>
  <?php
  endif; ?>

</section>