<script type="text/javascript" src="https://staticportaldaindustria.azureedge.net/static/js/alpine.min.js"></script>
<script type="text/javascript" src="https://staticportaldaindustria.azureedge.net/static/js/dirigentes_empregados_v3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

        <!-- <script type="text/javascript" src="https://staticportaldaindustria.azureedge.net/static/js/vendors.js"></script>
        <script type="text/javascript" src="https://staticportaldaindustria.azureedge.net/static/js/scripts.js"></script> -->
<script>
  window.contratos = function contratos() {
    const urls = {
      download: ({api, ano, departamento, entidade, formato}) => `${api}/api-contratos/publico/contrato-patrocinio/export?ano=${ano}&departamento=${departamento}&entidade=${entidade}&formatoExportacao=${formato}`,
      contratos: ({api, ano, departamento, entidade}) => `${api}/api-contratos/publico/contrato-patrocinio?ano=${ano}&departamento=${departamento}&entidade=${entidade}`,
    }

    function getLastFiveYears() {
        const currentYear = new Date().getFullYear();
        const years = [];

        for (let i = 0; i < 5; i++) {
            years.push(currentYear - i);
        }

        return JSON.stringify(years);
    }
    function getCurrentYearAsString() {
        const currentYear = new Date().getFullYear();
        return currentYear.toString();
    }


    function getAnoInicial() {
      try {
        return parseInt(getCurrentYearAsString());
      } catch (error) {
        return 2022
      }
    }

    function getListaAnos() {
      try {
        return JSON.parse(getLastFiveYears());
      } catch (error) {
        return 2022
      }
    }

    return {
      api: 'https://sistematransparenciaweb.com.br',
      ano: getAnoInicial(),
      entidade: 'SESI',
      departamento: 'SESI-AP',
      anos: getListaAnos(),
      itensPag: [10, 20, 30, 100],
      itemPag: 10,
      itens: [],
      itensFiltrados: [],
      contratoSelecionado: {},
      categoria: null,
      statusContrato: null,
      paginacao: {
        paginas: 0,
        atual: 0,
      },
      busca: {
        processo: null,
        contrato: null,
        nomeRazaoSocial: null,
        cpfCnpj: null,
        modalidade: null,
        statusContrato: null,
        categoria: null,
      },
      init() {
        this.fetchData();
      },
      possuiDados() {
        return this.itens.length > 0;
      },
      abrirDetalhe(item) {
        this.contratoSelecionado = item;
      },
      getItens() {
        return this.itensFiltrados.slice(0, this.itemPag);
      },
      possuiFonte() {
        return this.itens.length > 0 && this.getFonte() !== "";
      },
      possuiNota() {
        return this.itens.length > 0 && this.getNota() !== "";
      },
      isContrato() {
        return this.contratoSelecionado.objeto !== "Patrocínio";
      },
      isPatrocinio() {
        return this.contratoSelecionado.categoria === "Patrocínio";
      },
      getNota() {
        return this.itens.length > 0 ? this.itens[0].nota : "";
      },
      getFonte() {
        return this.itens.length > 0 ? this.itens[0].fonte : "";
      },
      getTituloModal() {
        return this.isContrato() ? "Detalhe do contrato" : "Detalhe do patrocínio";
      },
      download(formato) {
        window.open(urls.download({...this, formato}));
      },
      downloadXLSX() {
        this.download("XLSX");
      },
      downloadODS() {
        this.download("ODS");
      },
      getModalidades() {
        return [...new Set(this.itens.map(el => el.modalidade))];
      },
      getStatus() {
        return [...new Set(this.itens.map(el=> el.statusContrato))]
      },
      getCategorias() {
        return [...new Set(this.itens.filter(el => el.categoria !== "").map(el => el.categoria))].sort();
      },
      buscar() {
        var query = {}
        var results = this.itens;
        
        for (let [key, value] of Object.entries(this.busca)) {
          if (value !== null && value !== "--------") query[key] = value;
        }

        if (Object.keys(query).length === 0) {
          this.limpar();
          return;
        }

        for (let [key, value] of Object.entries(query)) {
          results = results.filter(el => el[key] === value)
        }

        this.itensFiltrados = results;
      },
      limpar() {
        for (let [key, value] of Object.entries(this.busca)) {
          this.busca[key] = null;
        }
        this.itensFiltrados = this.itens;
      },
      fetchData() {
        fetch(urls.contratos({...this}), {'Accept': 'application/json'})
          .then((res) => res.json())
          .then((data) => {
            this.itens = this.itensFiltrados = data;
          })
          .catch((error) => {
            this.itens = this.itensFiltrados = [];
            console.log(error);
          });;
      }
    }
  };

  window.addEventListener('DOMContentLoaded', (evt) => {
    const $busca = document.querySelector(".si-transparencia-busca .busca-header");
    $busca && $busca.addEventListener("click", function(event) {
      const $icon = this.querySelector("i.fa");
      const $parent = this.parentNode;
      this.parentNode.classList.toggle("open");
      if ($parent.classList.contains("open")) {
        $icon.classList.remove("fa-filter");
        $icon.classList.add("fa-times");
      } else {
        $icon.classList.remove("fa-times");
        $icon.classList.add("fa-filter");
      }
    });
  });
</script>
<script>
  window.convenios = function convenios() {
    const urls = {
      download: ({api, ano, departamento, entidade, formato}) => `${api}/api-convenios/convenios/export?ano=${ano}&departamento=${departamento}&entidade=${entidade}&tipoExportacaoEnum=${formato}`,
      convenios: ({api, ano, departamento, entidade}) => `${api}/api-convenios/convenios?ano=${ano}&departamento=${departamento}&entidade=${entidade}`,
    }

    function getLastFiveYears() {
        const currentYear = new Date().getFullYear();
        const years = [];

        for (let i = 0; i < 5; i++) {
            years.push(currentYear - i);
        }

        return JSON.stringify(years);
    }
    function getCurrentYearAsString() {
        const currentYear = new Date().getFullYear();
        return currentYear.toString();
    }


    function getAnoInicial() {
      try {
        return parseInt(getCurrentYearAsString());
      } catch (error) {
        return 2022
      }
    }

    function getListaAnos() {
      try {
        return JSON.parse(getLastFiveYears());
      } catch (error) {
        return 2022
      }
    }

    return {
      api: 'https://sistematransparenciaweb.com.br',
      ano: getAnoInicial(),
      entidade: 'SESI',
      departamento: 'SESI-AP',
      anos: getListaAnos(),
      itensPag: [10, 20, 30, 100],
      itemPag: 10,
      itens: [],
      convenioSelecionado: {},
      possuiDados() {
        return this.itens.length > 0;
      },
      abrirDetalhe(item) {
        this.convenioSelecionado = item;
      },
      getItens() {
        return this.itens.slice(0, this.itemPag);
      },
      possuiFonte() {
        return this.itens.length > 0 && this.getFonte() !== "";
      },
      possuiNota() {
        return this.itens.length > 0 && this.getNota() !== "";
      },
      getNota() {
        return this.itens.length > 0 ? this.itens[0].nota : "";
      },
      getFonte() {
        return this.itens.length > 0 ? this.itens[0].fonte : "";
      },
      download(formato) {
        window.open(urls.download({...this, formato}));
      },
      downloadXLSX() {
        this.download("XLSX");
      },
      downloadODS() {
        this.download("ODS");
      },
      fetchData() {
        fetch(urls.convenios({...this}), {'Accept': 'application/json'})
          .then((res) => res.json())
          .then((data) => {
            this.itens = data;
          })
          .catch((error) => {
            this.itens = [];
            console.log(error);
          });;
      }
    }
  };
</script>
<script>
    window.outrasFormasDeAjuste = function () {
        const urls = {
            download: ({ api, ano, departamento, entidade, formato }) => `${api}/api-outras-formas-ajuste/publico/outras-formas-ajuste/export?ano=${ano}&departamento=${departamento}&entidade=${entidade}&formatoExportacao=${formato}`,
            data: ({ api, ano, departamento, entidade }) => `${api}/api-outras-formas-ajuste/publico/outras-formas-ajuste?ano=${ano}&departamento=${departamento}&entidade=${entidade}`,
        }

    function getLastFiveYears() {
        const currentYear = new Date().getFullYear();
        const years = [];

        for (let i = 0; i < 5; i++) {
            years.push(currentYear - i);
        }

        return JSON.stringify(years);
    }
    function getCurrentYearAsString() {
        const currentYear = new Date().getFullYear();
        return currentYear.toString();
    }


    function getAnoInicial() {
      try {
        return parseInt(getCurrentYearAsString());
      } catch (error) {
        return 2022
      }
    }

    function getListaAnos() {
      try {
        return JSON.parse(getLastFiveYears());
      } catch (error) {
        return []
      }
    }

        return {
            api: 'https://sistematransparenciaweb.com.br',
            ano: getAnoInicial(),
            entidade: 'SESI',
            departamento: 'SESI-AP',
            anos: getListaAnos(),
            itensPag: [10, 20, 30, 100],
            itemPag: 10,
            itens: [],
            itemSelecionado: {},
            loading: false,
            possuiDados() {
                return this.itens.length > 0;
            },
            naoPossuiDados() {
                return this.itens.length === 0 || this.loading;
            },
            abrirDetalhe(item) {
                this.itemSelecionado = item;
            },
            getItens() {
                return this.itens.slice(0, this.itemPag);
            },
            possuiFonte() {
                return this.itens.length > 0 && this.getFonte() !== "";
            },
            possuiNota() {
                return this.itens.length > 0 && this.getNota() !== "";
            },
            getNota() {
                return this.itens.length > 0 ? this.itens[0].nota : "";
            },
            getFonte() {
                return this.itens.length > 0 ? this.itens[0].fonte : "";
            },
            download(formato) {
                window.open(urls.download({ ...this, formato }));
            },
            downloadXLSX() {
                this.download("XLSX");
            },
            downloadODS() {
                this.download("ODS");
            },
            fetchData() {
                this.itens = [];
                this.loading = true;
                fetch(urls.data({ ...this }), { 'Accept': 'application/json' })
                    .then((res) => res.json())
                    .then((data) => {
                        this.itens = data;
                    })
                    .catch((error) => {
                        this.itens = [];
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            }
        }
    };
</script>
<script>
(function($){
    [...document.querySelectorAll(".tab-content .tab-pane")].forEach((panel) => {
        if (panel.classList.contains("active")) return;
        const tab = document.querySelector(`li.active>[aria-controls="${panel.id}"]`);
        if (tab) {
            panel.classList.add("active");
            return;
        }
    });
    $('a.tab-link').click(function(e){
        e.preventDefault();
        $(this).tab('show');
    });
});
</script>

<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        const $departamento = document.querySelector(".departamento-regional-select.auto-open")
        $departamento && $departamento.addEventListener("change", function (evt) {
            const value = this.value || this.options[this.selectedIndex].value;
            const selected = this.querySelector(`[value="${value}"]`);
            window.open(value, selected.dataset.target);
        });

        const btnOpenUrl = document.querySelector(".departamento-regional-mapa .btn-open-url");
        btnOpenUrl && btnOpenUrl.addEventListener("click", function (event) {
            const $select = this.parentElement.querySelector(".departamento-regional-select");
            const selected = $select.querySelectorAll("option")[$select.selectedIndex];
            const target = selected.dataset.target;

            $select && target && window.open($select.value, target)
        });
    });
</script>

<script>
(function($){
  // Mascara de CPF e CNPJ
  var CpfCnpjMaskBehavior = function (val) {
    return val.replace(/\D/g, '').length <= 11 ? '000.000.000-009' : '00.000.000/0000-00';
  }

  cpfCnpjpOptions = {
    onKeyPress: function(val, e, field, options) {
      field.mask(CpfCnpjMaskBehavior.apply({}, arguments), options);
    }
  };

  $(function() {
    $('#cpfCnpj').mask(CpfCnpjMaskBehavior, cpfCnpjpOptions);
  });
});
</script>


<script>
(function($){
    [...document.querySelectorAll(".tab-content .tab-pane")].forEach((panel) => {
        if (panel.classList.contains("active")) return;
        const tab = document.querySelector(`li.active>[aria-controls="${panel.id}"]`);
        if (tab) {
            panel.classList.add("active");
            return;
        }
    });
});
</script>

<style>
#common-space-4909409 {
        height: 26px;
}
    .departamento-regional {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 32px;

        background: #FFFFFF;
        border: 1px solid rgba(225, 225, 225, 0.5);
        box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.05);
    }

    .departamento-regional-shadow {
        border: 1px solid rgba(225, 225, 225, 0.5);
        box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.05);
    }

    .departamento-regional .departamento-regional-textos {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 8px;
    }

    .departamento-regional h6,
    .departamento-regional p {
        /* font */
        /* font-family: 'Calibre Regular'; */
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .departamento-regional h6 {
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 0.04em;
        margin: 0;
    }

    .departamento-regional .departamento-regional-textos p {
        color: #222222;
        font-size: 14px !important;
    }

    .departamento-regional p:last-child {
        margin-bottom: 0;
    }

    .departamento-regional-select {
        width: 100%;
        border: 2px solid #A2A2A2;
        border-radius: 4px;

        /* font */
        /* font-family: 'Calibre Regular'; */
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 17px;
        color: #222222;
        opacity: 0.64;
    }

    .departamento-regional-senai h6 {
        color: #ff8c00;
    }

    .departamento-regional-sesi h6 {
        color: #009C31;
    }

    /* Mapa */

    .departamento-regional-mapa {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px 0px 32px;
        gap: 16px;

        background: #FFFFFF;
        border: 1px solid rgba(130, 130, 130, 0.5);
        box-shadow: 0px 30px 40px rgba(0, 0, 0, 0.05);
    }

    .departamento-regional-mapa-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 16px;
        gap: 16px;
        width: 100%;
    }

    .departamento-regional-separador {
        display: block;
        border-bottom: 1px solid rgba(130, 130, 130, 0.5);
        width: 100%;
    }

    .departamento-regional-mapa-titulo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 16px;
        gap: 8px;
        width: 100%;
        background: #828282;

        /* Font */
        /* font-family: 'Calibre Regular'; */
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 22px;
        text-align: center;
        color: #FFFFFF;
    }

    .departamento-regional-mapa-subtitulo {
        width: 100%;

        /* Font */
        /* font-family: 'Inter'; */
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 19px;
        text-align: center;
        color: #373737;
    }

    
    .departamento-regional-mapa .svg-wrap {
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .departamento-regional-mapa .svg-wrap .outros-departamentos {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 8px;
        right: 0;
        bottom: 50px;
    }

    .departamento-regional-mapa .svg-wrap .outros-departamentos a {
        display: block;
        background: #D3D2D1;
        border-radius: 8px;
        padding: 10px 20px;

        /* font-family: 'Inter'; */
        font-style: normal;
        font-weight: 700;
        font-size: 10px;
        line-height: 120%;
        text-align: center;
        color: #000000;
    }

    .departamento-regional-mapa .svg-wrap .outros-departamentos a:hover {
        background-color: #999;
        color: #000 !important;
    }

    .departamento-regional-mapa svg {
        width: 100%;
    }

    .departamento-regional-mapa svg a text {
        fill: #000;
        /* font-family: 'Inter'; */
        font-weight: 700;
        font-size: 14px;
    }

    .departamento-regional-mapa .btn.btn-primary {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 10px 16px 12px 16px;
        gap: 8px;
        border-radius: 8px;
        border: unset;

        /* Font */
        /* font-family: 'Calibre Regular'; */
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        color: #FFFFFF;
    }

    [data-instituicao="senai"] .btn-primary {
        background: #00963f;
    }

    [data-instituicao="sesi"] .btn-primary {
        background: #01A62D;
    }
       .custom-nav-tabs {
        display: flex;
        flex-direction: row;
        align-items: end;
        justify-content: space-around;
        border-bottom: unset;
    }

    .custom-nav-tabs>li>a {
        text-align: center;
        border: unset;
        padding: 12px 16px;
    }

    .custom-nav-tabs>li{
        border-bottom: 4px solid #F8F8F8;;
        transition: all 500ms ease;
    }
    
    .custom-nav-tabs>li.active{
        border-bottom: 4px solid rgba(1, 1, 1, .25);;
    }

    .custom-nav-tabs>li>a:focus, .custom-nav-tabs>li>a:hover {
        background-color: transparent;
    }
      .si-transparencia-empty {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 48px 0px;
    gap: 80px;
  }
  
  .si-transparencia-empty svg path {
    fill: 1px !important;
  }
  
  .si-transparencia-empty-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
  
    /* font-family: "Inter"; */
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
  }
  
  .si-transparencia-empty-label h4 {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
  }
  
  [data-entidade="sesi"] .si-transparencia-empty-label h4 {
    color: #009c31;
  }
  
  [data-entidade="senai"] .si-transparencia-empty-label h4 {
    color: #ff862c;
  }
  
  .si-transparencia-empty-label strong {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
  }
  
  [data-entidade="sesi"] .si-transparencia-empty-label strong {
    color: #005C1D;
  }
  
  [data-entidade="senai"] .si-transparencia-empty-label strong {
    color: #CC6B23;
  }
    .si-transparencia-tabela table > * > tr > [colspan="1"] {
    width: calc((100% / 15) * 1) !important;
  }

  .si-transparencia-tabela table > * > tr > [colspan="2"] {
    width: calc((100% / 15) * 2) !important;
  }

  .si-transparencia-tabela table > * > tr > [colspan="3"] {
    width: calc((100% / 15) * 3) !important;
  }
.si-transparencia-controles {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.si-transparencia-filtros .form-group label {
  /* font-family: "Inter"; */
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
}

[data-entidade="sesi"] .si-transparencia-filtros .form-group label {
  color: #009c31;
}

[data-entidade="senai"] .si-transparencia-filtros .form-group label {
  color: #ff862c;
}

.si-transparencia-filtros select {
  min-width: 90px;
  height: 40px;
  /* padding: 12px 8px; */
  border: 2px solid #c0c0c0;
  border-radius: 4px;

  /* font-family: "Calibre"; */
  /* font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px; */
}

.si-transparencia-filtros select option {
  padding-top: 12px;
  padding-bottom: 12px;
}

.select-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-info select {
  width: fit-content;
}

.select-info span {
  display: block;
  width: auto;
}

.si-transparencia-filtros,
.si-transparencia-downloads {
  display: flex;
  gap: 16px;
}

.si-transparencia .btn-default,
.si-transparencia .btn-outline-default {
  padding: 18px 24px 12px 24px;
  text-align: center;
  letter-spacing: 0.03em;
  border-width: 2px;
  border-style: solid;

  /* font-family: "Calibre"; */
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
}

.si-transparencia-busca .btn {
  padding: 12px 24px 8px 24px;
}

.si-transparencia[data-entidade="sesi"] .btn-default {
  border-color: #009c31;
  background: #009c31;
  color: #ffffff;
}

.si-transparencia[data-entidade="senai"] .btn-default {
  border-color: #00963f;
  background: #00963f;
  color: #ffffff;
}

.si-transparencia[data-entidade="sesi"] .btn-outline-default {
  border-color: #009c31;
  background: white;
  color: #009c31;
}

.si-transparencia[data-entidade="senai"] .btn-outline-default {
  border-color: #00963f;
  background-color: white;
  color: #00963f;
}

.si-transparencia-downloads .btn {
  height: 40px;
  padding: 10px 16px;
  border: 2px solid #c0c0c0;
  border-radius: 8px;
  background-color: #fff;
  line-height: 100%;

  /* font-family: "Inter"; */
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
}

[data-entidade="sesi"] .si-transparencia-downloads .btn {
  border: 2px solid #009c31;
  color: #009c31 !important;
}

[data-entidade="senai"] .si-transparencia-downloads .btn {
  border: 2px solid #00963f;
  color: #00963f !important;
}

/* Reset Table Style */
.si-transparencia-tabela {
  width: 100%;
  background: unset;
  overflow: hidden;
  border-radius: 4px;
}

[data-entidade="sesi"] .si-transparencia-tabela {
  border: 1px solid #0f6d47;
}

[data-entidade="senai"] .si-transparencia-tabela {
  border: 1px solid #00963f;
}

.si-transparencia-tabela table {
  width: 100%;
  background: unset;
}

.si-transparencia-tabela table > thead {
  background: unset;
  border: unset;
  font-size: unset;
  line-height: unset;
  vertical-align: unset;
  margin: unset;
  padding: unset;
}

.si-transparencia-tabela table > thead > tr,
.si-transparencia-tabela table > tbody > tr {
  background: unset;
  border: unset;
}

.si-transparencia-tabela table > thead > tr > th,
.si-transparencia-tabela table > tbody > tr > td {
  padding: unset;
  margin: unset;

  background: unset;
  border-radius: unset !important;
  border: unset !important;

  font-family: unset;
  font-size: unset;
  text-align: unset;
  line-height: unset;
}

.si-transparencia-tabela table > tbody > tr > td.text-end {
  text-align: end;
}

.si-transparencia-tabela table > tbody > tr > td.abrir-detalhe {
  position: relative;
}

.si-transparencia-tabela table > tbody > tr > td.abrir-detalhe::before {
  position: absolute;
  right: -4px;
  top: -1px;
  display: block;
  content: "";
  width: 00px;
  height: 00px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  transform: rotate(45deg);
}

[data-entidade="sesi"] .si-transparencia-tabela table > tbody > tr > td.abrir-detalhe::before {
  border-bottom: 5px solid #86dda2;
}

[data-entidade="senai"] .si-transparencia-tabela table > tbody > tr > td.abrir-detalhe::before {
  border-bottom: 5px solid #00963f;
}

[data-entidade="sesi"] .si-transparencia-tabela table > tbody > tr.total {
  background-color: #e1f5e7 !important;
}

[data-entidade="senai"] .si-transparencia-tabela table > tbody > tr.total {
  background-color: #ffecd6 !important;
}

/* Table */
[data-entidade="sesi"] .si-transparencia-tabela table > thead {
  background: #009c31;
}

[data-entidade="senai"] .si-transparencia-tabela table > thead {
  background: #00963f;
}

.si-transparencia-tabela table > thead > tr > th,
.si-transparencia-tabela table > tbody > tr > td {
  /* font-family: "Calibre"; */
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  padding: 14px 16px !important;
  vertical-align: middle;
}

.si-transparencia-tabela table > thead > tr > th {
  font-weight: 700;
  color: #ffffff;
  vertical-align: middle;
  font-size: 14px;
}

.si-transparencia-tabela table > tbody > tr > td:last-child {
  text-align: end;
}

.si-transparencia-tabela table > thead > tr > th[colspan="3"] {
  text-align: start;
}

.si-transparencia-tabela table > tbody > tr {
  border-bottom: 1px solid #c0c0c0;
  background: #dcdcdc;
}

.si-transparencia-tabela table > tbody > tr:last-child {
  border-bottom: unset;
}

.si-transparencia-tabela table > tbody > tr > td {
  /* font-family: "Calibre"; */
  font-weight: 400;
  color: #222222;
}

.si-transparencia-tabela table > tbody > tr {
  background: #ffffff;
  cursor: pointer;
}

.si-transparencia-tabela table > tbody > tr:hover {
  background: #ededed;
}

.si-transparencia-tabela table > tbody > tr td {
  padding-top: 18px;
  padding-right: 16px;
  padding-bottom: 18px;
  padding-left: 24px;
}

.si-transparencia-tabela table > tbody > tr td.detalhe {
  font-size: 22px;
  /* font-family: "Calibre"; */
  font-weight: 300;
  text-align: center;
}

.si-transparencia-tabela table > tbody > tr td[colspan="3"] {
  text-align: start;
}

/* Modal */

.modal-transparencia {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .modal-transparencia:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-transparencia .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.modal-transparencia .modal-md .modal-dialog {
  max-width: 555px !important;
}

.modal-transparencia .modal-lg .modal-dialog {
  max-width: 865px !important;
}

.modal-transparencia .modal-content {
  background: #ffffff;
  box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 24px;
}

.modal-transparencia .modal-content .modal-header,
.modal-transparencia .modal-content .modal-footer {
  padding: 0;
  border: 0;
}

.modal-transparencia .modal-content .modal-footer {
  text-align: left;
}

.modal-transparencia .btn {
  padding: 12px 16px;
  /* font-family: "Inter"; */
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: #ffffff;
}

[data-entidade="sesi"] .modal-transparencia .btn {
  background: #1e984f;
}

[data-entidade="senai"] .modal-transparencia .btn {
  background: #00963f;
}

.modal-transparencia .modal-content .modal-body {
  padding: 24px 0;
}

.modal-transparencia .si-transparencia-tabela {
  max-height: 500px;
  overflow-y: auto;
}

/* width */
.modal-transparencia .si-transparencia-tabela::-webkit-scrollbar {
  width: 6px;
}

/* Track */
.modal-transparencia .si-transparencia-tabela::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
.modal-transparencia .si-transparencia-tabela::-webkit-scrollbar-thumb {
  background: #b5b5b5;
  border-radius: 3px;
}

/* Handle on hover */
.modal-transparencia .si-transparencia-tabela::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.modal-transparencia .modal-content .modal-header h4.modal-title {
  /* font-family: "Calibre Regular"; */
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 150%;
}

.modal-transparencia .modal-content .modal-header button.close {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-transparencia .modal-content .modal-header button.close span {
  font-size: 32px;
  width: 27px;
  height: 27px;
  font-weight: 400;
  line-height: 80%;
}

.modal-transparencia .modal-content .modal-body p {
  margin: 0;
  padding: 8px 0;
}

.modal-transparencia .modal-content .modal-body p > strong {
  /* font-family: "Calibre Regular"; */
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 150%;
  color: #646464;
}

.modal-transparencia .modal-content .modal-body .nt-modal-card .custom-card {
  height: 100%;
}

.modal-transparencia
  .modal-content
  .modal-body
  .nt-modal-card-cinza-claro
  .custom-card {
  background: #8397b0;
}

.modal-transparencia
  .modal-content
  .modal-body
  .nt-modal-card-cinza-medio
  .custom-card {
  background: #333e50;
}

.modal-transparencia
  .modal-content
  .modal-body
  .nt-modal-card-marrom
  .custom-card {
  background: #767070;
}

.modal-transparencia
  .modal-content
  .modal-body
  .nt-modal-card-verde
  .custom-card {
  background: #009c31;
}

.modal-transparencia
  .modal-content
  .modal-body
  .nt-modal-card-laranja
  .custom-card {
  background: #00963f;
}

.modal-transparencia .modal-content .modal-body .nt-seta-centro {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-transparencia .modal-content .modal-body .nt-seta-centro img {
  padding: 15px;
}

.modal-transparencia .modal-content .modal-body .custom-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
  gap: 12px;
  border-radius: 8px;
}

.modal-transparencia .modal-content .modal-body .custom-card .card-body p {
  /* font-family: "Inter"; */
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  color: #ffffff;
  margin: 0;
}

[data-entidade="sesi"] h4.modal-title {
  color: #009c31;
}

[data-entidade="senai"] h4.modal-title {
  color: #00963f;
}

/* Busca AvanÃ§ada */

.si-transparencia-busca {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #f7f7f7;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 30px;
}

[data-entidade="sesi"] .si-transparencia-busca .busca-header {
  color: #009c31;
}

[data-entidade="senai"] .si-transparencia-busca .busca-header {
  color: #00963f;
}

.si-transparencia-busca .busca-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100%;

  /* font-family: "Calibre"; */
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 150%;
  letter-spacing: 0.03em;
}

.si-transparencia-busca .busca-content {
  display: block;
  transition: all 0.5s;
  overflow: hidden;
  max-height: 0;
}

.si-transparencia-busca.open .busca-content {
  max-height: 1000px;
  margin-top: 30px;
}

.si-transparencia-busca .form-group {
  margin-bottom: 16px;
}

.si-transparencia-busca label {
  /* font-family: "Calibre"; */
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0.04em;
  color: #222222;
}

.si-transparencia-busca .form-control {
  padding: 8px;
  border: 2px solid #c0c0c0;
  border-radius: 4px;
  height: unset;
}

[data-entidade="sesi"] .si-transparencia-busca .form-control {
  color: #0f6d47;
}

[data-entidade="senai"] .si-transparencia-busca .form-control {
  color: #00963f;
}

.si-transparencia-notas {
  margin-top: 16px;
}

.si-transparencia-notas .si-transparencia-nota {
  /* font-family: "Calibre"; */
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #222222;
}

.si-transparencia-notas .si-transparencia-nota strong {
  font-weight: 600;
  line-height: 110%;
}

.si-transparencia-notas .si-transparencia-nota p {
  line-height: 150%;
  letter-spacing: 0.04em;
}

.si-transparencia-subtitulo {
  margin-bottom: 15px;
}

.si-transparencia-subtitulo strong {
  /* font-family: 'Calibre'; */
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 130%;
  color: #222222;
}

@media only screen and (max-width: 600px) {
  .si-transparencia .si-transparencia-controles {
    flex-direction: column;
    align-items: start;
    margin-bottom: 30px;
  }

  .si-transparencia .si-transparencia-controles .form-group {
    margin: 0;
  }
}  
</style>
   <script>
    document.addEventListener("DOMContentLoaded", function () {
      // Função para mostrar ou esconder links com base no texto
      function toggleLinks(showText) {
        document.querySelectorAll("a").forEach(link => {
          // Ignorar os links das abas e aqueles cujo href seja #contratos ou #convenios
          if (
            link.id === "contratos" || 
            link.id === "convenios" || 
            link.id === "outras-formas-de-ajuste" ||
            link.getAttribute("href") === "#contratos" || 
            link.getAttribute("href") === "#convenios" ||
            link.getAttribute("href") === "#outras-formas-de-ajuste"
          ) {
            return;
          }

          // Mostrar ou esconder links com base no texto
          if (link.textContent.includes("Contratos") || link.textContent.includes("Convênios") || link.textContent.includes("Outras Formas de Ajuste")) {
            link.style.display = link.textContent.includes(showText) ? "inline" : "none";
          }
        });
      }

      // Inicialmente mostrar apenas "Contratos"
      toggleLinks("Contratos");

    // Detectar cliques nas abas
      document.querySelectorAll('.nav-tabs a').forEach(tab => {
        tab.addEventListener("click", function (event) {
          event.preventDefault(); // Previne o comportamento padrão
          const target = this.getAttribute("href"); // Obtém o href da aba clicada

          // Troca a aba ativa
          document.querySelectorAll('.nav-tabs li').forEach(li => li.classList.remove('active'));
          this.parentElement.classList.add('active');

          // Troca o conteúdo visível
          document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
          document.querySelector(target).classList.add('active');

          // Mostrar ou esconder links com base na aba
          if (target === "#contratos") {
            toggleLinks("Contratos");
            } else if (target === "#outras-formas-de-ajuste") {
                toggleLinks("Outras Formas de Ajuste");
            } else if (target === "#convenios") {
                toggleLinks("Convênios");
          }
        });
      });
    });
   </script>
<div class="nt-lead-textos col-xs-12 col-sm-12 col-md-12 col-lg-12  image-size-backgroud-4909406 image-mobile-background-4909406" style="">
    <p><strong>Departamento Regional - SESI/AP</strong></p>
    <p> </p>
    <p>Neste módulo, você terá acesso a informações sobre contratos, convênios e outras formas de ajuste firmados pelo Departamento Regional – SESI/AP.</p>
    <p> </p>
    <p><strong>Acesse as abas abaixo para conferir os Contratos, os Convênios e as Outras Formas de Ajuste.</strong></p>
</div>

<div id="id-4909411" class="mobile-fallback background-image-4909411 image-size-backgroud-4909411 image-repeat-backgroud-4909411 None row nt nt-sesi" style="">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12  image-size-backgroud-4909412 image-mobile-background-4909412" style="">
        <div>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs custom-nav-tabs" role="tablist">
                <li role="presentation" class="active" style="width: 33.3333333333%;"><a href="#contratos" aria-controls="contratos" role="tab" data-toggle="tab">Contratos</a></li>
                <li role="presentation" style="width: 33.3333333333%;"><a href="#convenios" aria-controls="convenios" role="tab" data-toggle="tab">Convênios</a></li>
                <li role="presentation" style="width: 33.3333333333%;"><a href="#outras-formas-de-ajuste" aria-controls="outras-formas-de-ajuste" role="tab" data-toggle="tab">Outras Formas de Ajuste</a></li>
            </ul>
        </div>
        
        
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="contratos">
                <div class="si-transparencia si-transparencia-contratos" x-data="{ state: contratos() }" x-init="state.init()" data-entidade="sesi">
                    <div class="modal fade modal-transparencia" id="contrato-detalhe" tabindex="-1" role="dialog" aria-labelledby="contrato-detalheLabel">
                        <div class="modal-dialog modal-md" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="contrato-detalheLabel" x-text="state.getTituloModal()">Detalhe do contrato</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="si-transparencia-tabela">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th colspan="2" x-text="`Contrato N° ${state.contratoSelecionado.contrato}`"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <!-- comum -->
                                                <tr>
                                                    <td colspan="1">N° do Processo</td>
                                                    <td colspan="1"  x-text="state.contratoSelecionado.processo"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Contratantes</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.contratantes"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Data do contrato / Renovação</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.dataContrato"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Vigência</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.vigencia"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Data Final</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.dataFinal"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Status do contrato / renovação</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.statusContrato"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Modalidade (RLC) / Forma (RCA)</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.modalidade"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Objeto</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.objeto"></td>
                                                </tr>
                                                <tr x-show="state.contratoSelecionado.categoria">
                                                    <td colspan="1">Categoria</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.categoria"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">CNPJ / CPF</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.cpfCnpj"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Razão social / Nome</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.nomeRazaoSocial"></td>
                                                </tr>
                                                
                                                <!-- contrato -->
                                                <tr x-show="state.isContrato()">
                                                    <td colspan="1">Valor total do contrato (com aditivos quando houver)</td>
                                                    <td colspan="1" x-text="`R$ ${state.contratoSelecionado.valorContrato}`"></td>
                                                </tr>
                                                <tr x-show="state.isContrato()">
                                                    <td colspan="1" x-text="`Valor previsto da participação do ${state.entidade.toUpperCase()}`"></td>
                                                    <td colspan="1" x-text="`R$ ${state.contratoSelecionado.valorPrevisto}`"></td>
                                                </tr>
                                                <tr x-show="state.isContrato()">
                                                    <td colspan="1" x-text="`Percentual previsto de participação do ${state.entidade.toUpperCase()}`"></td>
                                                    <td colspan="1" x-text="`${state.contratoSelecionado.porcentagemPrevista}`"></td>
                                                </tr>
                                                <tr x-show="state.isContrato()">
                                                    <td colspan="1" x-text="`Valor executado pelo ${state.entidade.toUpperCase()}`"></td>
                                                    <td colspan="1" x-text="`R$ ${state.contratoSelecionado.valorExecutado}`"></td>
                                                </tr>
                                                <tr x-show="state.isContrato()">
                                                    <td colspan="1">Houve aditivo de preço?</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.houveAditivoPreco"></td>
                                                </tr>
                                                <tr x-show="state.isContrato()">
                                                    <td colspan="1">Valor do(s) aditivo(s)</td>
                                                    <td colspan="1" x-text="`R$ ${state.contratoSelecionado.valorAditivo}`"></td>
                                                </tr>
                                                <tr x-show="state.isContrato()">
                                                    <td colspan="1">Houve aditivo de prazo?</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.houveAditivoPrazo"></td>
                                                </tr>
                                                <tr x-show="state.isContrato()">
                                                    <td colspan="1">Houve aditivo de alteração qualitativa do objeto?</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.houveAditivoQualitativoObjeto"></td>
                                                </tr>
                                                
                                                <!-- Patrocinio -->
                                                <tr x-show="!state.isContrato()">
                                                    <td colspan="1">Valor total do contrato (com aditivos quando houver)</td>
                                                    <td colspan="1" x-text="`R$ ${state.contratoSelecionado.valorContrato}`"></td>
                                                </tr>
                                                <tr x-show="!state.isContrato()">
                                                    <td colspan="1" x-text="`Valor previsto da participação do ${state.entidade.toUpperCase()}`"></td>
                                                    <td colspan="1" x-text="`R$ ${state.contratoSelecionado.valorPrevisto}`"></td>
                                                </tr>
                                                <tr x-show="!state.isContrato()">
                                                    <td colspan="1" x-text="`Percentual previsto de participação do ${state.entidade.toUpperCase()}`"></td>
                                                    <td colspan="1" x-text="`R$ ${state.contratoSelecionado.porcentagemPrevista}`"></td>
                                                </tr>
                                                <tr x-show="!state.isContrato()">
                                                    <td colspan="1" x-text="`Valor executado pelo ${state.entidade.toUpperCase()}`"></td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.valorExecutado"></td>
                                                </tr>
                                                <tr x-show="!state.isContrato()">
                                                    <td colspan="1">Contrapartidas da Patrocinada - Previstas</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.contrapartidaPatrocinadaPrevista" style="text-align: left;">...</td>
                                                </tr>
                                                <tr x-show="!state.isContrato()">
                                                    <td colspan="1">Contrapartidas da Patrocinada - Realizadas</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.contrapartidaPatrocinadaRealizada" style="text-align: left;"></td>
                                                </tr>
                                                
                                                <!-- Comum -->
                                                <tr x-show="state.isContrato()">
                                                    <td colspan="1">É aditivo de renovação?</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.isAditivoRenovacao"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Observações</td>
                                                    <td colspan="1" x-text="state.contratoSelecionado.observacoes"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn" data-dismiss="modal">Fechar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="si-transparencia-busca">
                        <div class="busca-header">
                            <span>Busca avançada</span>
                            <i class="fa fa-filter" aria-hidden="true"></i>
                        </div>
                        <div class="busca-content">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="processo">N° do Processo</label>
                                        <input type="text" class="form-control" id="processo" placeholder="0000000" x-model="state.busca.processo">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="contrato">N° do Contrato</label>
                                        <input type="text" class="form-control" id="contrato" placeholder="0000000" x-model="state.busca.contrato">
                                    </div>
                                </div>
                                <div class="col-md-5">
                                  <div class="form-group">
                                    <label for="categoria">Categoria</label>
                                    <select name="categoria" id="categoria" class="form-control" x-model="state.busca.categoria">
                                      <option>--------</option>
                                      <template x-for="item in state.getCategorias()">
                                        <option x-text="item" :selected="item === state.categoria"></option>
                                      </template>
                                    </select>
                                  </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="nomeRazaoSocial">Razão Social / Nome</label>
                                        <input type="text" class="form-control" id="nomeRazaoSocial" placeholder="Razão social da empresa" x-model="state.busca.nomeRazaoSocial">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="cpfCnpj">CNPJ / CPF</label>
                                        <input type="text" class="form-control" id="cpfCnpj" placeholder="00.000.000/0000-00" x-model="state.busca.cpfCnpj">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="status">Status</label>
                                        <select name="status" id="status" class="form-control" x-model="state.busca.statusContrato">
                                            <option>--------</option>
                                            <template x-for="item in state.getStatus()">
                                                <option x-text="item" :selected="item === state.statusContrato"></option>
                                            </template>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="modalidade">Modalidade</label>
                                        <select name="modalidade" id="modalidade" class="form-control" x-model="state.busca.modalidade">
                                            <option>--------</option>
                                            <template x-for="item in state.getModalidades()">
                                                <option x-text="item" :selected="item === state.modalidade"></option>
                                            </template>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12" style="display: flex; gap: 16px; margin-top: 16px">
                                    <button @click="state.buscar()" type="button" class="btn btn-default">Pesquisar</button>
                                    <button @click="state.limpar()" type="button" class="btn btn-outline-default">Limpar busca</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="si-transparencia-controles">
                        <div class="si-transparencia-filtros">
                            <div class="form-group">
                                <label for="id_contratos_anos">Busca por Ano</label>
                                <select name="contratos-anos" id="id_contratos_anos" class="form-control" x-model="state.ano" @change="state.fetchData()">
                                    <template x-for="ano in state.anos">
                                        <option x-text="ano" :selected="ano === state.ano"></option>  
                                    </template>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="id_contratos_itens">Mostrando</label>
                                <div class="select-info">
                                    <select name="contratos-anos" id="id_contratos_itens" class="form-control" x-model="state.itemPag">
                                        <template x-for="item in state.itensPag">
                                            <option x-text="item" :selected="item === state.itemPag"></option>
                                        </template>
                                    </select>
                                    <span x-text="`de ${state.itens.length} resultados disponíveis`"></span>
                                </div>
                            </div>
                        </div>
                        <div class="si-transparencia-downloads" x-show="state.possuiDados()">
                            <button class="btn btn-success" @click="state.downloadXLSX()">Salvar (XLSX)</button>
                            <button class="btn btn-success" @click="state.downloadODS()">Salvar (ODS)</button>
                        </div>
                    </div>
                    <div class="si-transparencia-tabela" x-show="state.possuiDados()">
                        <table>
                            <thead>
                                <tr>
                                    <th colspan="2">N° do contrato</th>
                                    <th colspan="2">N° do<br> processo</th>
                                    <th colspan="2">Data do<br> contrato /<br> Avença</th>
                                    <th colspan="3">Razão social / Nome</th>
                                    <th colspan="3">CNPJ / CPF</th>
                                    <th colspan="2">Valor da<br>participação<br>no contrato</th>
                                    <th colspan="1">Detalha<br>mento</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="item in state.getItens()">
                                    <tr @click="state.abrirDetalhe(item)" data-toggle="modal" data-target="#contrato-detalhe">
                                        <td colspan="2" x-text="item.contrato"></td>
                                        <td colspan="2" x-text="item.processo"></td>
                                        <td colspan="2" x-text="item.dataContrato"></td>
                                        <td colspan="3" x-text="item.nomeRazaoSocial"></td>
                                        <td colspan="3" x-text="item.cpfCnpj"></td>
                                        <td colspan="2" x-html="`R$<br>${item.valorPrevisto}`"></td>
                                        <td colspan="1" class="detalhe">+</td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                    
                    
                    <div class="si-transparencia-empty"x-show="!state.possuiDados()">
                        <div class="si-transparencia-empty-label">
                            <h4>Desculpe! Não há dados disponíveis para sua busca no momento.</h4>
                            <div>
                                <strong>Tente outra vez!</strong>
                                <p>Selecione outro período para localizar o que procura.</p>
                            </div>
                        </div>
                        <div class="si-transparencia-empty-imagem">
                            
                            <img src="https://staticportaldaindustria.azureedge.net/static/si_transparencia/imgs/sesi-empty.png">
                            
                        </div>
                    </div>
                    
                    
                    <div class="si-transparencia-notas" x-show="state.possuiDados()">
                        <div x-show="state.possuiFonte()" class="si-transparencia-nota">
                            <strong>Fonte: </strong>
                            <p x-text="state.getFonte()"></p>
                        </div>
                        <div x-show="state.possuiNota()" class="si-transparencia-nota">
                            <strong>Nota: </strong>
                            <p x-text="state.getNota()"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade in" id="convenios">
                <div class="si-transparencia si-transparencia-convenios" x-data="{ state: convenios() }" x-init="state.fetchData()" data-entidade="sesi">
                    <div class="modal fade modal-transparencia" id="convenio-detalhe" tabindex="-1" role="dialog" aria-labelledby="convenio-detalheLabel">
                        <div class="modal-dialog modal-md" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="convenio-detalheLabel">Detalhe do Convênio</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="si-transparencia-tabela">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th colspan="2" x-text="`Convênio N° ${state.convenioSelecionado.numeroConvenio}`"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td colspan="1">N° do Convênio</td>
                                                    <td colspan="1" x-text="state.convenioSelecionado.numeroConvenio"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Data do convênio</td>
                                                    <td colspan="1" x-text="state.convenioSelecionado.dataConvenio"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Vigência</td>
                                                    <td colspan="1" x-text="state.convenioSelecionado.vigencia"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Status do convênio / renovação</td>
                                                    <td colspan="1" x-text="state.convenioSelecionado.statusConvenioRenovacao"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Descrição do Objeto</td>
                                                    <td colspan="1" x-text="state.convenioSelecionado.descricaoObjeto" style="text-align: left"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Razão social do Convenente</td>
                                                    <td colspan="1" x-text="state.convenioSelecionado.razaoSocialConvenente"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">CNPJ</td>
                                                    <td colspan="1" x-text="state.convenioSelecionado.cnpj"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Valor da Participação do Concedente</td>
                                                    <td colspan="1" x-html="`R$ ${state.convenioSelecionado.valorParticipacaoConcedente}`"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Valor Transferido</td>
                                                    <td colspan="1" x-html="`R$ ${state.convenioSelecionado.valorTransferido}`"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Valor da Contrapartida</td>
                                                    <td colspan="1" x-html="`R$ ${state.convenioSelecionado.valorContrapartida}`"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Houve aditivo de valor do Concedente?</td>
                                                    <td colspan="1" x-text="state.convenioSelecionado.houveValorAditivoContraPartida"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Valor do(s) aditivo(s) do Concedente?</td>
                                                    <td colspan="1" x-html="`R$ ${state.convenioSelecionado.valorAditivosConcedente}`"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Houve aditivo de valor da Contrapartida?</td>
                                                    <td colspan="1" x-text="state.convenioSelecionado.houveValorAditivoContraPartida"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Valor do(s) aditivo(s) da Contrapartida?</td>
                                                    <td colspan="1" x-html="`R$<br>${state.convenioSelecionado.valorAditivoContraPartida}`"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Houve aditivo de prazo?</td>
                                                    <td colspan="1" x-text="state.convenioSelecionado.houveAditivoPrazo"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="1">Houve aditivo de alteração qualitativa do objeto?</td>
                                                    <td colspan="1" x-text="state.convenioSelecionado.houveAditivoAlteracaoQualitativaObjeto"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn" data-dismiss="modal">Fechar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="si-transparencia-controles">
                        <div class="si-transparencia-filtros">
                            <div class="form-group">
                                <label for="id_convenios_anos">Busca por Ano</label>
                                <select name="convenios-anos" id="id_convenios_anos" class="form-control" x-model="state.ano" @change="state.fetchData()">
                                    <template x-for="ano in state.anos">
                                        <option x-text="ano" :selected="ano === state.ano"></option>  
                                    </template>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="id_convenios_itens">Mostrando</label>
                                <div class="select-info">
                                    <select name="convenios-anos" id="id_convenios_itens" class="form-control" x-model="state.itemPag">
                                        <template x-for="item in state.itensPag">
                                            <option x-text="item" :selected="item === state.itemPag"></option>
                                        </template>
                                    </select>
                                    <span x-text="`de ${state.itens.length} resultados disponíveis`"></span>
                                </div>
                            </div>
                        </div>
                        <div class="si-transparencia-downloads" x-show="state.possuiDados()">
                            <button class="btn btn-success" @click="state.downloadXLSX()">Salvar (XLSX)</button>
                            <button class="btn btn-success" @click="state.downloadODS()">Salvar (ODS)</button>
                        </div>
                    </div>
                    <div class="si-transparencia-tabela" x-show="state.possuiDados()">
                        <table>
                            <thead>
                                <tr>
                                    <th colspan="2">N° do convênio</th>
                                    <th colspan="2">Data do<br>convênio</th>
                                    <th colspan="3">Razão Social do Convenente</th>
                                    <th colspan="2">CNPJ</th>
                                    <th colspan="2">Valor do<br>convênio</th>
                                    <th colspan="2">Detalhamento</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="item in state.getItens()">
                                    <tr @click="state.abrirDetalhe(item)" data-toggle="modal" data-target="#convenio-detalhe">
                                        <td colspan="2" x-text="item.numeroConvenio"></td>
                                        <td colspan="2" x-text="item.dataConvenio"></td>
                                        <td colspan="3" x-text="item.razaoSocialConvenente"></td>
                                        <td colspan="2" x-text="item.cnpj"></td>
                                        <td colspan="2" x-html="`R$<br>${item.valorParticipacaoConcedente}`"></td>
                                        <td colspan="1" class="detalhe">+</td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                    
                    
                    <div class="si-transparencia-empty"x-show="!state.possuiDados()">
                        <div class="si-transparencia-empty-label">
                            <h4>Desculpe! Não há dados disponíveis para sua busca no momento.</h4>
                            <div>
                                <strong>Tente outra vez!</strong>
                                <p>Selecione outro período para localizar o que procura.</p>
                            </div>
                        </div>
                        <div class="si-transparencia-empty-imagem">
                            
                            <img src="https://staticportaldaindustria.azureedge.net/static/si_transparencia/imgs/sesi-empty.png">
                            
                        </div>
                    </div>
                    
                    
                    <div class="si-transparencia-notas" x-show="state.possuiDados()">
                        <div x-show="state.possuiFonte()" class="si-transparencia-nota">
                            <strong>Fonte: </strong>
                            <p x-text="state.getFonte()"></p>
                        </div>
                        <div x-show="state.possuiNota()" class="si-transparencia-nota">
                            <strong>Nota: </strong>
                            <p x-text="state.getNota()"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade in" id="outras-formas-de-ajuste">
              <div class="si-transparencia si-transparencia-outras-formas-de-ajuste" x-data="{ state: outrasFormasDeAjuste() }"
                  x-init="state.fetchData()" data-entidade="sesi">
                  <div class="modal fade modal-transparencia" id="outrasFormasDeAjuste" tabindex="-1" role="dialog"
                      aria-labelledby="outrasFormasDeAjusteLabel">
                      <div class="modal-dialog modal-md" role="document">
                          <div class="modal-content">
                              <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                  </button>
                                  <h4 class="modal-title" id="outrasFormasDeAjusteLabel">Detalhe do Convênio</h4>
                              </div>
                              <div class="modal-body">
                                  <div class="si-transparencia-tabela">
                                      <table>
                                          <thead>
                                              <tr>
                                                  <th colspan="2" x-text="`Instrumento N° ${state.itemSelecionado.numeroInstrumento}`"></th>
                                              </tr>
                                          </thead>
                                          <tbody>
                                              <tr>
                                                  <td colspan="1">N° do processo</td>
                                                  <td colspan="1" x-text="state.itemSelecionado.numeroInstrumento"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Tipo do instrumento</td>
                                                  <td colspan="1" x-text="state.itemSelecionado.tipoInstrumento"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Data do instrumento</td>
                                                  <td colspan="1" x-text="state.itemSelecionado.dataInstrumento"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Vigência</td>
                                                  <td colspan="1" x-text="state.itemSelecionado.vigencia"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Data Final</td>
                                                  <td colspan="1" x-text="state.itemSelecionado.dataFinal"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Status do Instrumento / renovação</td>
                                                  <td colspan="1" x-text="state.itemSelecionado.statusInstrumento"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Descrição do Objeto</td>
                                                  <td colspan="1" x-text="state.itemSelecionado.descricaoObjeto"
                                                      style="text-align: left"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Razão social do Convenente</td>
                                                  <td colspan="1" x-text="state.itemSelecionado.razaoSocialParticipe"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">CNPJ</td>
                                                  <td colspan="1" x-text="state.itemSelecionado.cnpj"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1" x-text="`Valor da Participação do ${state.entidade}`"></td>
                                                  <td colspan="1" x-html="`R$ ${state.itemSelecionado.valorParticipacaoEntidade}`">
                                                  </td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Valor Transferido</td>
                                                  <td colspan="1" x-html="`R$ ${state.itemSelecionado.valorTransferido}`"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Valor da Contrapartida</td>
                                                  <td colspan="1" x-html="`R$ ${state.itemSelecionado.valorContrapartida}`"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1" x-text="`Houve aditivo de valor do ${state.entidade}?`"></td>
                                                  <td colspan="1" x-text="state.itemSelecionado.houveAditivoParticipacao"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Valor do(s) aditivo(s) do Concedente?</td>
                                                  <td colspan="1" x-html="`R$ ${state.itemSelecionado.valorAditivoParticipacao}`"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Houve aditivo de valor da Contrapartida?</td>
                                                  <td colspan="1" x-text="state.itemSelecionado.houveAditivoContrapartida"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Valor do(s) aditivo(s) da Contrapartida?</td>
                                                  <td colspan="1" x-html="`R$<br>${state.itemSelecionado.valorAditivoContrapartida}`">
                                                  </td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Houve aditivo de prazo?</td>
                                                  <td colspan="1" x-text="state.itemSelecionado.houveAditivoPrazo"></td>
                                              </tr>
                                              <tr>
                                                  <td colspan="1">Houve aditivo de alteração qualitativa do objeto?</td>
                                                  <td colspan="1"
                                                      x-text="state.itemSelecionado.houveAditivoObjeto"></td>
                                              </tr>
                                          </tbody>
                                      </table>
                                  </div>
                              </div>
                              <div class="modal-footer">
                                  <button class="btn" data-dismiss="modal">Fechar</button>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="si-transparencia-controles">
                      <div class="si-transparencia-filtros">
                          <div class="form-group">
                              <label for="id_convenios_anos">Busca por Ano</label>
                              <select name="convenios-anos" id="id_convenios_anos" class="form-control" x-model="state.ano"
                                  @change="state.fetchData()">
                                  <template x-for="ano in state.anos">
                                      <option x-text="ano" :selected="ano === state.ano"></option>
                                  </template>
                              </select>
                          </div>
                          <div class="form-group">
                              <label for="id_convenios_itens">Mostrando</label>
                              <div class="select-info">
                                  <select name="convenios-anos" id="id_convenios_itens" class="form-control" x-model="state.itemPag">
                                      <template x-for="item in state.itensPag">
                                          <option x-text="item" :selected="item === state.itemPag"></option>
                                      </template>
                                  </select>
                                  <span x-text="`de ${state.itens.length} resultados disponíveis`"></span>
                              </div>
                          </div>
                      </div>
                      <div class="si-transparencia-downloads" x-show="state.possuiDados()">
                          <button class="btn btn-success" @click="state.downloadXLSX()">Salvar (XLSX)</button>
                          <button class="btn btn-success" @click="state.downloadODS()">Salvar (ODS)</button>
                      </div>
                  </div>
                  
                  <div class="si-transparencia-tabela">
                      <table>
                          <thead>
                              <tr>
                                  <th colspan="2">N° do instrumento</th>
                                  <th colspan="2">Data do<br>ato</th>
                                  <th colspan="3">Razão Social do Convenente</th>
                                  <th colspan="2">CNPJ</th>
                                  <th colspan="2">Valor do<br>instrumento</th>
                                  <th colspan="2">Detalhamento</th>
                              </tr>
                          </thead>
                          <tbody>
                              <template x-for="item in state.getItens()" x-show="state.possuiDados()">
                                  <tr @click="state.abrirDetalhe(item)" data-toggle="modal" data-target="#outrasFormasDeAjuste">
                                      <td colspan="2" x-text="item.numeroInstrumento"></td>
                                      <td colspan="2" x-text="item.dataInstrumento"></td>
                                      <td colspan="3" x-text="item.razaoSocialParticipe"></td>
                                      <td colspan="2" x-text="item.cnpj"></td>
                                      <td colspan="2" x-html="`R$<br>${item.valorParticipacaoEntidade}`"></td>
                                      <td colspan="1" class="detalhe">+</td>
                                  </tr>
                              </template>
                              <tr x-show="state.loading" style="display: none;">
                                  <td colspan="12" style="text-align: center; font-style: italic; cursor: auto;">
                                      Carregando dados...
                                  </td>
                              </tr>
                              <tr x-show="!state.possuiDados() && !state.loading" style="display: none;">
                                  <td colspan="12" style="text-align: center; font-style: italic; cursor: auto;">
                                      Não foram firmadas Outras Formas de Ajuste neste período.
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                  </div>
                  
                  <div class="si-transparencia-notas" x-show="state.possuiDados()">
                      <div x-show="state.possuiFonte()" class="si-transparencia-nota">
                          <strong>Fonte: </strong>
                          <p x-text="state.getFonte()"></p>
                      </div>
                      <div x-show="state.possuiNota()" class="si-transparencia-nota">
                          <strong>Nota: </strong>
                          <p x-text="state.getNota()"></p>
                      </div>
                  </div>
              </div>
            </div>            
        </div>
    </div>
</div>
<br><br>
   {"id":29,"date":"2017-03-16T04:49:28","date_gmt":"2017-03-16T07:49:28","guid":{"rendered":"http:\/\/transparencia.raphaborralho.com\/?page_id=29"},"modified":"2025-10-26T12:39:32","modified_gmt":"2025-10-26T15:39:32","slug":"contratos-e-convenio","status":"publish","type":"page","link":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/contratos-e-convenio\/","title":{"rendered":"Contratos, Conv\u00eanios e Outras Formas de Ajuste"},"content":{"rendered":"<div class=\"well table-responsive\">\n\n<p><a href=\"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-content\/uploads\/2023\/02\/SESI-CONTRATOS-2022.pdf\">Contratos 2022 &#8211; PDF<\/a><br \/>\n<a href=\"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-content\/uploads\/2023\/02\/SESI-CONTRATOS-2022.ods\">Contratos 2022 &#8211; ODS<\/a><br \/>\n<a href=\"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-content\/uploads\/2023\/02\/SESI-CONVENIOS-2022.pdf\">Conv\u00eanios 2022 &#8211; PDF<\/a><br \/>\n<a href=\"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-content\/uploads\/2023\/02\/SESI-CONVENIOS-2022.ods\">Conv\u00eanios 2022 &#8211; ODS<\/a><br \/>\n<a href=\"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-content\/uploads\/2022\/01\/20220110_Transparencia_Plano-de-Contingencia_Formato-Contratos-SESI.pdf\" target=\"_blank\" rel=\"noopener\">Contratos 2021 &#8211; PDF<\/a><br \/>\n<a href=\"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-content\/uploads\/2022\/01\/20220110_Transparencia_Plano-de-Contingencia_Formato-Contratos-SESI.ods\" target=\"_blank\" rel=\"noopener\">Contratos 2021 &#8211; ODS<\/a><br \/>\n<a href=\"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-content\/uploads\/2022\/02\/convenios_-_sesi_2021-1.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Conv\u00eanios 2021 &#8211; PDF<\/a><br \/>\n<a href=\"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-content\/uploads\/2022\/02\/convenios_-_sesi_2021-1.ods\" target=\"_blank\" rel=\"noreferrer noopener\" data-type=\"URL\" data-id=\"https:\/\/www.ap.senai.br\/transparencia-senai\/wp-content\/uploads\/2022\/02\/convenios_-_senai_2021.ods\">Conv\u00eanios 2021 &#8211; ODS<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Contratos 2022 &#8211; PDF Contratos 2022 &#8211; ODS Conv\u00eanios 2022 &#8211; PDF Conv\u00eanios 2022 &#8211; ODS Contratos 2021 &#8211; PDF Contratos 2021 &#8211; ODS Conv\u00eanios 2021 &#8211; PDF Conv\u00eanios 2021 &#8211; ODS<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":58,"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":2826,"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/pages\/29\/revisions\/2826"}],"wp:attachment":[{"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}