<?php
/*
 * 
 * Template Name: Relatórios Anuais
 * 
*/
enqueue_aos();
enqueue_swiper();
get_header(); ?>

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

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

  <!-- ABA - RELATÓRIO DE IGUALDADE SALARIAL -->
  <section class="section-relatorios section-igualdade-salarial active" data-tab="igualdade-salarial">
    <div class="mw-1920 mx-auto">
      <div class="container-xl">

        <div class="title-wrapper d-flex flex-column flex-md-row align-items-center justify-content-between">
          <h2 class="font60 fw900 text-green mb-0"><?php o2_the_field('titulo-igualdade-salarial'); ?></h2>
          <img src="<?php bloginfo("template_url"); ?>/assets/images/logo-governo.png" alt="Logo Governo Federal" class="mw-100 mt-3 mt-md-0">
        </div>

        <p class="font24 fw500 text-gray font-alternates mw-903 mt-4"><?php o2_the_field('subtitulo-igualdade-salarial'); ?></p>
        <div class="editor">
          <?php o2_the_filtered_field('the_content', 'conteudo-igualdade-salarial'); ?>
        </div>

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

  <!-- ABA - RELATÓRIOS DE SUSTENTABILIDADE -->
  <section class="section-relatorios section-relatorio-sustentabilidade" data-tab="relatorio-sustentabilidade">
    <div class="mw-1920 mx-auto">
      <div class="container-xl">
        <h2 class="font60 fw900 text-green mb-4 mb-md-5"><?php o2_the_field('titulo-relatorio-sustentabilidade'); ?></h2>

        <div class="row row-gap-4">
          <?php
          $relatorios = o2_get_field('relatorios');

          foreach ($relatorios as $item) : ?>
            <div class="col-12 col-md-6">
              <div class="relatorio-card h-100 d-flex flex-column">
                <div class="img-wrapper position-relative">
                  <img src="<?= wp_get_attachment_url($item['imagem']); ?>" alt="<?= $item['titulo']; ?>">
                </div>
                <div class="text-wrapper">
                  <h3 class="font20 fw700 text-gray font-alternates mb-3"><?= $item['titulo']; ?></h3>
                  <p class="font18 fw400 text-gray font-alternates"><?= $item['descricao']; ?></p>
                  <a href="<?= wp_get_attachment_url($item['arquivo']); ?>" class="download-btn" 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>
            </div>
          <?php
          endforeach; ?>
        </div>

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

  <!-- ABA - REDUÇÃO DE EMISSÃO DE GASES DO EFEITO ESTUFA -->
  <section class="section-relatorios section-reducao-emissao-estufa" data-tab="reducao-emissao-estufa">
    <div class="mw-1920 mx-auto">
      <div class="container-xl">

        <div class="title-wrapper d-flex flex-column flex-md-row align-items-center justify-content-between mb-4 mb-md-5">
          <h2 class="font60 fw900 text-green mb-0"><?php o2_the_field('titulo-reducao-emissao-estufa'); ?></h2>
        </div>

        <?php
        $inventarios = o2_get_field('inventarios');
        foreach ($inventarios as $item) : ?>
          <div class="inventario">
            <h3 class="font20 fw700 text-gray font-alternates text-uppercase mb-2"><?= $item['titulo']; ?></h3>
            <p class="font14 fw500 text-gray font-alternates text-uppercase mb-3"><?= $item['texto']; ?></p>
            <div class="table-wrapper">
              <?php
              $tabela = $item['databooks'];
              foreach ($tabela as $index => $item) : ?>
                <div class="<?= $index % 2 == 0 ? 'bg-gray' : ''; ?> tabela d-flex flex-column flex-md-row align-items-md-center justify-content-between">
                  <div class="info d-flex align-items-center">
                    <div class="font14 fw700 text-gray font-alternates">
                      <?= $item['data']; ?>
                    </div>
                    <div class="font14 fw500 text-gray font-alternates text-uppercase">
                      <?= $item['titulo']; ?>
                    </div>
                  </div>
                  <a href="<?= wp_get_attachment_url($item['arquivo']); ?>" class="download-btn m-0" style="font-size: 14px;" 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>
              <?php
              endforeach; ?>
            </div>
          </div>
        <?php
        endforeach; ?>

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

</main>

<?php
get_footer(); ?>