<?php
/*
 * 
 * Template Name: Governança
 * 
*/
enqueue_aos();
enqueue_swiper();
// enqueue_glightbox();
get_header(); ?>

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

  <?php
  # SEÇÃO - BANNER
  get_template_part('template-parts/section', 'banner'); ?>
  <?php
  $filtro_denuncia= o2_get_field('filtro-compliance') != null ? o2_get_field('filtro-denuncia') : 'Canal de Denúncia';
  $filtro_missao = o2_get_field('filtro-missao-compliance') != null ? o2_get_field('filtro-missao-compliance') : 'Missão Compliance';
  $filtro_politicas = o2_get_field('filtro-politicas') != null ? o2_get_field('filtro-politicas') : 'Políticas';
  $filtro_ornograma = o2_get_field('filtro-orgonograma') != null ? o2_get_field('filtro-orgonograma') : 'Ornograma';
  $filtro_codigo_conduta = o2_get_field('filtro-codigo-conduta') != null ? o2_get_field('filtro-codigo-conduta') : 'Código de Conduta';
  $filtro_comites = o2_get_field('filtro-comites') != null ? o2_get_field('filtro-comites') : 'Comitês';
  ?>

  <section class="section-compliance overflow-hidden" data-tab="compliance">
    <div class="mw-1920 mx-auto">
      <div class="container-fluid container-xxl">
        <div class="row">
          <aside>
            <nav class="column-tab-wrapper swiper swiper-column-tab">
              <div class="swiper-wrapper flex-lg-column">
                <button class="tab swiper-slide" role="tab" data-secondary-tab="compliance">Compliance</button>
                <button class="tab swiper-slide" role="tab" data-secondary-tab="canal-de-denuncia"><?= $filtro_denuncia ?></button>
                <button class="tab swiper-slide" role="tab" data-secondary-tab="missao-compliance"><?= $filtro_missao?></button>
                <button class="tab swiper-slide" role="tab" data-secondary-tab="organograma-karina"><?=  $filtro_ornograma?></button>
              </div>
            </nav>
            <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>

            <!-- ABA - COMPLIANCE -->
            <div class="tab-content" data-secondary-tab="compliance">
              <div class="row align-items-center">
                <div class="col-12 col-md-5">
                  <div class="text-wrapper">
                    <h2 class="font60 fw900 text-green">
                      <?php o2_the_field('titulo-compliance'); ?>
                    </h2>
                    <div class="editor">
                      <?= o2_the_filtered_field('the_content', 'texto-compliance'); ?>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-7">
                  <div class="img-wrapper mt-4 mt-md-0">
                    <img src="<?= wp_get_attachment_url(o2_get_field('imagem-compliance')); ?>" alt="Compliance" class="img-fluid d-block mx-auto mx-lg-0">
                  </div>
                </div>
              </div>
            </div>

            <!-- ABA - CANAL DE DENÚNCIA -->
            <div class="tab-content" data-secondary-tab="canal-de-denuncia">
              <div class="row flex-column-reverse flex-md-row">
                <div class="col-12 col-md-6">
                  <div class="img-wrapper mt-4 mt-md-0">
                    <img src="<?= wp_get_attachment_url(o2_get_field('imagem-canal-denuncia')); ?>" alt="Canal de Denúncia" class="img-fluid d-block mx-auto mx-lg-0">
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="text-wrapper pe-md-5">
                    <h2 class="font60 fw900 text-green">
                      <?php o2_the_field('titulo-canal-denuncia'); ?>
                    </h2>
                    <p class="font18 text-gray font-alternates">
                      <?= o2_the_field('texto-canal-denuncia'); ?>
                    </p>
                    <?php
                    $btn = o2_get_field('botao-canal-denuncia');
                    if (!empty($btn['url'])) : ?>
                      <a href="<?= $btn['url']; ?>" target="<?= $btn['target']; ?>" aria-label="<?= $btn['text']; ?>" class="btn-principal mt-4">
                        <?= $btn['text']; ?>
                      </a>
                    <?php
                    endif; ?>
                  </div>
                </div>
              </div>
            </div>

            <!-- ABA - MISSÃO DO COMPLIANCE -->
            <div class="tab-content" data-secondary-tab="missao-compliance">
              <div class="text-wrapper mb-4 mb-md-5 pe-md-5">
                <h2 class="font60 fw900 text-green">
                  <?php o2_the_field('titulo-missao-compliance'); ?>
                </h2>
                <p class="font18 text-gray font-alternates">
                  <?= o2_the_field('texto-missao-compliance'); ?>
                </p>
              </div>
              <div class="icon-wrapper d-flex align-items-center">
                <div>
                  <?= o2_get_field('icone-missao-compliance'); ?>
                  <p>
                    <?= o2_the_filtered_field('the_content', 'texto-icone-missao-compliance'); ?>
                  </p>
                </div>

                <img src="<?= wp_get_attachment_url(o2_get_field('imagem-missao-compliance')); ?>" alt="Compliance">
              </div>
            </div>

            <!-- ABA - ORGANOGRAMA KARINA -->
            <div class="tab-content" data-secondary-tab="organograma-karina">
              <h2 class="font60 fw900 text-green mb-4 mb-md-5">
                <?php o2_the_field('titulo-organograma-karina'); ?>
              </h2>
              <a href="https://karina.oxigenweb.com.br/esg/wp-content/uploads/2024/12/Group-1166-3.png" class="glightbox" data-zoomable="true">
                <img src="<?= wp_get_attachment_url(o2_get_field('imagem-organograma-karina')); ?>" alt="Organograma Karina" class="img-fluid">
              </a>
            </div>

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

  <section class="section-politicas overflow-hidden" data-tab="politicas">
    <div class="mw-1920 mx-auto">
      <div class="container-fluid container-xxl">
        <div class="row">
          <aside>
            <nav class="column-tab-wrapper swiper swiper-column-tab-dois">
              <div class="swiper-wrapper flex-lg-column">
                <button class="tab swiper-slide" role="tab" data-secondary-tab="politicas"><?=  $filtro_politicas?></button>
                <button class="tab swiper-slide" role="tab" data-secondary-tab="conduta-etica"><?= $filtro_codigo_conduta?></button>
                <button class="tab swiper-slide" role="tab" data-secondary-tab="comites"><?= $filtro_comites?></button>
              </div>
            </nav>
            <script defer>
              jQuery(function() {
                var swiperColumnTab2 = new Swiper(".swiper-column-tab-dois", {
                  speed: 800,
                  centerInsufficientSlides: true,
                  slidesPerView: "auto",
                  spaceBetween: 5,
                });
                if (window.innerWidth >= 992) {
                  swiperColumnTab2.destroy();
                }
              });
            </script>
          </aside>
          <div>

            <!-- ABA - POLÍTICAS -->
            <div class="tab-content" data-secondary-tab="politicas">
              <div class="text-wrapper mb-4 mb-md-5 pe-xl-5 pe-xxl-4">
                <h2 class="font60 fw900 text-green">
                  <?php o2_the_field('titulo-politicas'); ?>
                </h2>
                <p class="font18 text-gray font-alternates">
                  <?= o2_the_field('texto-politicas'); ?>
                </p>
                <div class="navigation-politicas d-flex align-items-center gap-3 mt-4">
                  <div class="d-flex align-items-center gap-2">
                    <div class="swiper-button-prev politicas-prev position-static"></div>
                    <div class="swiper-button-next politicas-next position-static"></div>
                  </div>
                  <div class="swiper-pagination politicas-pagination"></div>
                </div>
                <?php
                $politicas = o2_get_field('politicas'); ?>
                <div class="swiper swiper-politicas">
                  <div class="swiper-wrapper">
                    <?php
                    foreach ($politicas as $item) : ?>
                      <div class="swiper-slide">
                        <div class="title-wrapper">
                          <?= $item['nome']; ?>
                        </div>
                        <div class="content-wrapper">
                          <p>
                            <?php
                            $descricao = $item['descricao'];
                            $limite = 160;

                            if (strlen($descricao) > $limite) {
                              $descricao_truncada = substr($descricao, 0, $limite) . '...';
                            ?>
                              <span class="truncada"><?= esc_html($descricao_truncada); ?></span>
                              <span class="completa" style="display: none;"><?= esc_html($descricao); ?></span>
                              <a href="javascript:void(0)" class="leia-mais">Leia mais</a>
                            <?php
                            } else {
                              echo esc_html($descricao);
                            }
                            ?>
                          </p>
                          <a href="<?= wp_get_attachment_url($item['arquivo']); ?>" class="download-btn m-0 mt-4" target="_blank" aria-label="Download">
                            Download
                            <svg class="ms-3" width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M9 0L9 12" stroke="white" stroke-width="2" />
                              <path d="M2 6L9 13L16 6" stroke="white" stroke-width="2" />
                              <path d="M0 18H18" stroke="white" stroke-width="2" />
                            </svg>
                          </a>
                        </div>
                      </div>
                    <?php
                    endforeach; ?>
                  </div>
                </div>
                <script>
                  document.addEventListener("DOMContentLoaded", function() {
                    const links = document.querySelectorAll(".leia-mais");
                    links.forEach(link => {
                      link.addEventListener("click", function() {
                        const parent = this.closest(".content-wrapper");
                        const truncada = parent.querySelector(".truncada");
                        const completa = parent.querySelector(".completa");

                        if (truncada && completa) {
                          truncada.style.display = truncada.style.display === "none" ? "inline" : "none";
                          completa.style.display = completa.style.display === "none" ? "inline" : "none";
                          this.textContent = truncada.style.display === "none" ? "Leia menos" : "Leia mais";
                        }
                      });
                    });
                  });
                </script>
                <script defer>
                  jQuery(function() {
                    var swiperPoliticas = new Swiper(".swiper-politicas", {
                      speed: 800,
                      centerInsufficientSlides: true,
                      slidesPerView: "auto",
                      spaceBetween: 25,
                      navigation: {
                        nextEl: ".politicas-next",
                        prevEl: ".politicas-prev"
                      },
                      pagination: {
                        el: ".politicas-pagination",
                        clickable: true,
                      },
                    });
                  });
                </script>

              </div>
            </div>

            <!-- ABA - CÓDIGOS DE CONDUTA E ÉTICA -->
            <div class="tab-content" data-secondary-tab="conduta-etica">
              <h2 class="font60 fw900 text-green mb-4">
                <?php o2_the_field('titulo-conduta-etica'); ?>
              </h2>
              <div class="row align-items-center">
                <div class="col-12 col-md-5">
                  <div class="text-wrapper">
                    <div class="editor">
                      <?= o2_the_filtered_field('the_content', 'texto-conduta-etica'); ?>
                    </div>
                  </div>
                  <?php
                  $btn = o2_get_field('botao-conduta-etica');
                  if (!empty($btn['url'])) : ?>
                    <a href="<?= $btn['url']; ?>" target="<?= $btn['target']; ?>" aria-label="<?= $btn['text']; ?>" class="btn-principal mt-4">
                      <?= $btn['text']; ?>
                    </a>
                  <?php
                  endif; ?>
                </div>
                <div class="col-12 col-md-7">
                  <div class="img-wrapper mt-4 mt-md-0">
                    <img src="<?= wp_get_attachment_url(o2_get_field('imagem-conduta-etica')); ?>" alt="Código de Ética e Conduta" class="img-fluid d-block mx-auto mx-lg-0">
                  </div>
                </div>
              </div>
            </div>

            <!-- ABA - COMITÊS -->
            <div class="tab-content" data-secondary-tab="comites">
              <div class="text-wrapper mb-4 mb-md-5 pe-xl-5 pe-xxl-4">
                <h2 class="font60 fw900 text-green m-0">
                  <?php o2_the_field('titulo-comites'); ?>
                </h2>
                <div class="navigation-politicas d-flex align-items-center gap-3 mt-3">
                  <div class="d-flex align-items-center gap-2">
                    <div class="swiper-button-prev comites-prev position-static"></div>
                    <div class="swiper-button-next comites-next position-static"></div>
                  </div>
                  <div class="swiper-pagination comites-pagination"></div>
                </div>
                <?php
                $comites = o2_get_field('comites'); ?>
                <div class="swiper swiper-comites p-3 py-sm-4">
                  <div class="swiper-wrapper">
                    <?php
                    foreach ($comites as $item) : ?>
                      <div class="swiper-slide">
                        <div class="d-flex flex-column">
                          <div class="icon-wrapper d-flex align-items-center mb-4">
                            <?= $item['icone']; ?>
                            <div class="title-wrapper ms-3">
                              <?= $item['nome']; ?>
                            </div>
                          </div>
                          <div class="text-wrapper">
                            <div class="content-wrapper">
                              <?= $item['descricao']; ?>
                            </div>
                          </div>
                        </div>
                      </div>
                    <?php
                    endforeach; ?>
                  </div>
                </div>
                <script defer>
                  jQuery(function() {
                    var swiperComites = new Swiper(".swiper-comites", {
                      speed: 800,
                      centerInsufficientSlides: true,
                      slidesPerView: "auto",
                      spaceBetween: 15,
                      navigation: {
                        nextEl: ".comites-next",
                        prevEl: ".comites-prev"
                      },
                      pagination: {
                        el: ".comites-pagination",
                        clickable: true,
                      },
                    });
                  });
                </script>

              </div>
            </div>

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

</main>

<?php
get_footer(); ?>