<?php include_once('config.php') ?>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Sisplan Web</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css?versao=3.263.17.1">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css?versao=3.263.17.1">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css?versao=3.263.17.1">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css?versao=3.263.17.1">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  <link rel="stylesheet" href="dist/css/animate.min.css?versao=3.263.17.1">
  <link rel="stylesheet" href="dist/css/custom.css?versao=3.263.17.1">
  <link rel="stylesheet" href="dist/css/sisplan.css?versao=3.263.17.1">
  <link rel="stylesheet" href="dist/css/cadastro.css?versao=3.263.17.1">
  <link rel="stylesheet" href="dist/css/default.min.css?versao=3.263.17.1">
  <link rel="stylesheet" type="text/css" href="dist/css/dataTables.bootstrap4.min.css?versao=3.263.17.1" />
  <link rel="shortcut icon" href="favicon.ico">

  <link href='dist/css/bootstrap.min.css?versao=3.263.17.1'>
  <link rel="stylesheet" href="dist/css/normalize.css?versao=3.263.17.1">
  <link rel="stylesheet" href="plugins/select2/css/select2.min.css?versao=3.263.17.1">
  <link rel="stylesheet" href="plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css?versao=3.263.17.1">
  <link rel="stylesheet" href="dist/css/jquery-ui.css?versao=3.263.17.1">
  <link rel="stylesheet" href="dist/css/cards-financeiro.css">
  <style>
    .progress-bar {
      background-color: var(--primary-color) !important;
    }

    .chart {
      width: 100%;
    }

    #chart {
      margin: 0 auto;
      background: #fff;
      padding: 20px;
      border-radius: 12px;
    }

    .custom-tooltip {
      background: #fff;
      border: 1px solid #dcdcdc;
      border-radius: 8px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
      padding: 10px 12px;
      font-size: 14px;
      min-width: 150px;
    }

    .custom-tooltip .tt-title {
      font-weight: bold;
      margin-bottom: 8px;
      color: #333;
    }

    .custom-tooltip .tt-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 6px 0;
    }

    .custom-tooltip .tt-left {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #333;
    }

    .custom-tooltip .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }

    .custom-tooltip .meta-dot {
      width: 10px;
      height: 2px;
      border-top: 2px dashed #666;
      display: inline-block;
    }

    .custom-tooltip .value {
      font-weight: bold;
      color: #111;
    }

    .select2-search.select2-search--inline .select2-search__field {
      width: 100% !important;
    }

    .card-body {
      padding: 0 !important;
    }

    /* #listaAbas li {
      padding: 0 3px;
    } */

    #listaAbas {
      font-size: .9em;
      height: 100%;
    }

    #listaAbas li:hover {
      background-color: #343a40;
      color: #FFF;
    }

    #listaAbas>li>a.active {
      background: #121214;
      color: #fff;
    }

    #listaAbas li a {
      right: 0.3rem;
      color: var(--font-primary);
      padding: .3rem .7rem .5rem .7rem;
    }

    #listaAbas li .btn-iframe-close {
      top: 1px;
      right: 0rem;
      color: rgba(190, 0, 0) !important;
      padding: 0px 2px 4px 0px;
    }

    .dropdown-item:hover {
      background: var(--hoverOpcao) !important;
    }

    #exibir_iframe {
      height: auto !important;
    }

    #carregandoTela {
      font-size: 1.8rem;
      color: var(--font-card-color) !important;
    }

    #abrirTelaCheia,
    #abrirIA {
      background: #be0000;
      color: #FFF !important;
      padding: 8px 21px 8px 21px;
    }

    #numero_notificacoes {
      font-weight: bold;
      font-size: 10px;
      position: absolute;
      top: 0px;
      font-weight: bold;
      font-size: 12px;
      right: 22px;
    }

    @keyframes pulsar {
      0% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.5;
        transform: scale(1.5);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    .notificacao-pulsando {
      animation: pulsar 1s infinite;
    }

    #div_notificacoes {
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
    }

    div>#btnAddNotificacao {
      display: flex;
      width: 100%;
      justify-content: center;
    }

    body.sidebar-mini.layout-fixed.vsc-initialized.iframe-mode-fullscreen #mostrarEsconderMenu {
      pointer-events: none;
      opacity: 0.5;
    }

    body.sidebar-mini.layout-fixed.vsc-initialized.iframe-mode-fullscreen #menuLateral {
      display: none !important;
    }

    body.sidebar-mini.layout-fixed.iframe-mode-fullscreen #mostrarEsconderMenu {
      pointer-events: none;
      opacity: 0.5;
    }

    body.sidebar-mini.layout-fixed.iframe-mode-fullscreen #menuLateral {
      display: none !important;
    }

    #btnMostrarGrupos {
      margin-bottom: 5px;
      margin-left: 10px;
      transform: translate(-35px, -32px);
      height: 29px !important;
      background-color: rgba(184, 0, 0, 1);
      color: #fff;
      margin-right: 2px;
      padding: 0.3rem 0.7rem 0.3rem 0.7rem;
      width: 29px;
      text-align: center;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #menuMobile {
      background: var(--gradient-color);
      color: #FFF;
    }

    #nav-tab a {
      color: var(--text-primary);
    }

    #exibir_dashboard {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    .backdropOpacity {
      background-color: var(--dash-back) !important;
      width: 100%;
      height: 110vh;
    }

    #tabelaNotificacoes_wrapper .table.dataTable tbody td,
    #tabelaNotificacoes_wrapper .table.dataTable thead th {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    #modalNotificacao .modal-dialog {
      max-width: 800px;
      width: calc(100% - 2rem);
      transition: transform .2s ease;
    }

    /* Em telas menores desloca um pouco para a direita para não ficar atrás da sidebar */
    @media (max-width: 1100px) {
      #modalNotificacao .modal-dialog {
        transform: translateX(110px);
        max-width: calc(100% - 320px);
      }
    }

    @media (max-width: 768px) {
      #modalNotificacao .modal-dialog {
        transform: translateX(10px);
        max-width: calc(100% - 320px);
      }
    }

    @media (max-width: 576px) {
      #modalNotificacao .modal-dialog {
        transform: translateX(18px);
        max-width: calc(100% - 48px);
        width: calc(100% - 48px);
      }
    }
  </style>
  <!--Load the AJAX API-->
  <script type="text/javascript" src="dist/js/loader.js"></script>
</head>

<body class="hold-transition sidebar-mini layout-fixed">

  <div class="wrapper">
    <?php
    include_once('menu.php');
    ?>

    <a id="menuMobile" class="nav-link d-none" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>

    <div class="content-wrapper" id="exibir_dashboard">
      <div class="backdropOpacity" id="backdropOpacity">

        <div class="content-header">
          <a id="mostrarEsconderMenuDesktop" class="nav-link" data-widget="pushmenu" href="#" role="button" style="margin-bottom: 5px;margin-left: 7.5px;transform: translate(-35px, -12px);height: 29px!important;background-color: rgba(184, 0, 0, 1);color: #fff;margin-right: 2px;padding: 5px 1px 1px 12px;width: 36px;border-radius: 5px;"><i class="fas fa-bars"></i></a>
          <div class="container-fluid">
            <div class="row">
              <div class="col-sm-12 d-none" id='div-welcome'>
                <h3>Bem Vindo!</h3>
              </div>
              <div class="col-sm-12">
                <!-- <div class="col-sm-12">
                <div id="Grafico27" class="panel panel-default">
                  <div id="graf27"></div>
                </div>
              </div> -->
                <nav>
                  <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <!-- <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
                  <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
                  <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> -->
                  </div>
                </nav>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12">
                <div class="tab-content" id="nav-tabContent">
                  <!-- <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">.aaa.</div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">..bbb.</div>
                <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">.ccc..</div> -->
                </div>
              </div>
            </div>
            <div class="row mb-2">
              <div class="col-sm-6 flex">
                <div style="text-align:center;" class="mt-2">
                  <button class="btn mr-3 d-none" onclick="toggleTheme()">
                    <i style="font-size: 25px" id="themeIcon" class="text-white fas"></i>
                  </button>
                </div>
                <h1 class="m-0 mt-2 text-dark" id="txtNome">
                </h1>
                <button class="btn btn-sm btn-sisp btn-danger m-2 d-none" id="btnFiltros">Filtros</button>

              </div>
              <div class="col-sm-6" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center;">
                <ol class="breadcrumb float-sm-right">
                  <li class="breadcrumb-item active mr-2">Início</li>
                </ol>
                <i id="icone-play" style="line-height: 1.8rem; margin-right: 8px" class="fas fa-play float-sm-right" title="Rodar todos os dashboards"></i>
                <input class="float-sm-right  input-default" style="height: 30px; width: 50px; margin-right: 5px" type="number" value="1" id="txtTempoPlay" />
                <label class="float-sm-right m-0">minuto(s)</label>
              </div>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row d-none" id="card-carregando">
              <div class="col-sm-12" style="text-align:center">
                <h5>Carregando dashboard</h5>
                <div class="progress progress-stripedactive">
                  <div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                  </div>
                </div>
              </div>
            </div>
            <div id="conteudo" class="row">
              <div class="col-sm-12">
                <textarea id="txtSelect" class="d-none" rows="10" placeholder="Monte o SQL aqui"></textarea>
                <div id="resultados" class="col-sm-12 table-responsive d-none">
                </div>
              </div>
              <div id="chart_div"></div>
            </div>
            <div id="modal-conteudos"></div>
            <div class="modal fade" id="modal-info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-xl">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 id="modal-info-title" class="modal-title">Vendas Semanais</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div class="row">
                      <div class="col-sm-12">
                        <div class="table-responsive" id="modal-info-table">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- 

    <div class="content-wrapper iframe-mode d-none" data-widget="iframe" data-loading-screen="750" style="min-height: 100vh !important;" id="exibir_iframe"> -->

    <div class="content-wrapper iframe-mode d-none" data-widget="iframe" data-loading-screen="750" style="min-height: 1px !important;" id="exibir_iframe">
      <div class="nav navbar navbar-expand border-bottom p-0" style="height: 30px;">
        <div class="nav-item dropdown">
          <div class="d-flex">

            <a id="mostrarEsconderMenu" class="nav-link" data-widget="pushmenu" href="#" role="button" style="height: 29px!important; background-color: rgba(184, 0, 0, 1); color: #fff; margin-right: 2px; padding: 0.3rem 0.7rem 0.3rem 0.7rem;"><i class="fas fa-bars"></i></a>
            <a class="nav-link dropdown-toggle text-white" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="background: rgba(184, 0, 0, 1); font-size: .9em; padding: 0.4rem 0.7rem 0.3rem 0.7rem; height: 29px;">Opções</a>

            <div class="dropdown-menu mt-0" style="left: 0px; right: inherit;">
              <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all" id="fecharTodasAbas">Fechar todas as Telas</a>
              <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all-other">Manter apenas a tela Atual</a>
            </div>
          </div>
        </div>
        <a class="nav-link theme-dark text-danger" href="#" data-widget="iframe-scrollleft"><i class="fas fa-angle-double-left" title="Clique para ver todas as abas"></i></a>
        <ul class="navbar-nav overflow-hidden" role="tablist" id="listaAbas"></ul>
        <a class="nav-link theme-dark text-danger" href="#" data-widget="iframe-scrollright"><i class="fas fa-angle-double-right" title="Clique para ver todas as abas"></i></a>

        <div class="d-flex">

          <a class="nav-link theme-dark text-danger" href="#" id='abrirTelaCheia' style="padding: 0.3rem 0.7rem 0.3rem 0.7rem;"><i class="fas fa-expand" title="Ativar/Desativar Menus"></i></a>
          <a class="nav-link theme-dark text-danger" href="#" id='abrirIA' style="padding: 0.3rem 0.7rem 0.3rem 0.7rem;"><i class="fas fa-robot" title="Falar com a SIA"></i></a>

          <li class="nav-item dropdown" id="btnNotificacao" style="height: 29px!important; background-color: rgba(184, 0, 0, 1); color: #fff; margin-left: 2px">
            <a class="nav-link" href="#" id="botao_notificacoes">
              <i class="far fa-bell text-white" style="font-size: 17px" title="Notificações"></i>
              <span id="numero_notificacoes" class="badge badge-warning navbar-badge" style="top: 4px; font-weight: bold; font-size: 12px">0</span>
            </a>

            <div id="div_notificacoes" class="dropdown-menu dropdown-menu-xl dropdown-menu-right" style="max-width: 1200px;left: inherit; right: 0px;">
              <div class="flex">
                <span class="dropdown-item dropdown-header">Notificações</span>
                <button id="btnAddNotificacao" class="btn btn-danger btn-xs"><i class="fas fa-plus"></i></button>
              </div>
              <!-- <div class="dropdown-divider"></div>
                  <a style="display: flex;align-items: center;justify-content: space-between;grid-gap:1rem" href="#" class="dropdown-item">
                    <i class="fas fa-exclamation-triangle"></i> Falha ao enviar mensagem whatsapp ...
                    <span class="float-right text-muted text-sm">22/09/2022</span>
                  </a>
                  <div class="dropdown-divider"></div>
                  <a style="display: flex;align-items: center;justify-content: space-between;grid-gap:1rem" href="#" class="dropdown-item">
                    <i class="fas fa-exclamation-triangle"></i> Erro ao transmitir Bloco X ...
                    <span class="float-right text-muted text-sm">21/09/2022</span>
                  </a> -->
              <div class="dropdown-divider"></div>
            </div>
          </li>

        </div>




      </div>
      <div class="tab-content">
        <div class="tab-empty" style="height: 790px;">
          <h2 class="display-4" style="height: calc(100vh - 150px); margin: auto;">Nenhuma tela selecionada!</h2>
        </div>
        <div class="tab-loading" style="min-height: 100vh; display: none;">
          <div>
            <h2 class="display-4" id="carregandoTela" style="padding-bottom: 10rem;">Tela está sendo carregada. <i class="fa fa-sync fa-spin"></i></h2>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="modalFullscreen" tabindex="-1" role="dialog" aria-labelledby="modalFullscreenLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl" style="width: 100vw!important; height: 100%!important;max-width: 200%!important; margin: 0px!important">
        <div class="modal-content" style="height: 100%!important; max-height: 100vh!important">
          <div class="modal-header">
            <h5 class="modal-title" id="modalFullscreenLabel">Conteúdo Expandido</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <!-- Conteúdo do card aqui -->
          </div>
        </div>
      </div>
    </div>
    <div class="modal" id="mapaModal" tabindex="-1" role="dialog" aria-labelledby="mapaModalLabel">
      <div id="pnlMapaEstado" class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="mapaModalLabel">Estado</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body" style="height: 98%;max-width:98%">
            <div id="mapa_estado" style="height: 80vh;display: flex;justify-content: center;"></div>
            <ul id="cidades_vendas" style="clear: none; margin-right: 70px; float: right;">
              <li id="cidVerde">
                <font color="#6baa01">Cidades em verde com vendas:</font> <span id="cidades_com_vendas"></span>
              </li>
              <li id="cidVermelho">
                <font color="red">Cidades em vermelho com clientes e sem vendas:</font> <span id="cidades_com_clientes"></span>
              </li>
              <li id="cidAzul">
                <font color="blue"> Cidades em azul sem clientes: </font><span id="cidades_sem_clientes"></span>
              </li>
              <li id="cidAmarelo">
                <font color="#ffd700">Cidades em amarelo sem clientes e sem vendas:</font> <span id="cidades_sem_clientes_sem_vendas"></span>
              </li>
            </ul>
            <p style="font-size: 9px;" id="mapa_modal_msg">Estados em azul não houve vendas.</p>
          </div>
        </div>
      </div>
    </div>

    <div id="customModalIA" class="custom-modal-overlay" style="display: none;">
      <div class="custom-modal-container">
        <div class="custom-modal">
          <div class="custom-modal-header">
            <h4>SIA - Sisplan IA <i id="abrirIaNovaGuia" class="fas fa-external-link-alt text-red" style="font-size: 10pt"></i></h4>
            <button class="custom-modal-close" onclick="closeCustomModal()">
              <span>&times;</span>
            </button>
          </div>
          <div class="custom-modal-body">
            <iframe
              src="https://ia-web.sisplansistemas.com.br/?"
              id="customSiaIframe"
              class="custom-modal-iframe"></iframe>
          </div>
        </div>
      </div>
    </div>

    <style>
      .custom-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease;
      }

      .custom-modal-container {
        width: 95%;
        height: 95%;
        max-width: 95%;
        max-height: 95%;
        display: flex;
        flex-direction: column;
      }

      .custom-modal {
        background: white;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        overflow: hidden;
        animation: slideIn 0.3s ease;
      }

      .custom-modal-header {
        padding: 15px 20px;
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
        /* Não encolhe */
      }

      .custom-modal-header h4 {
        margin: 0;
        color: #333;
        font-size: 1.25rem;
      }

      .custom-modal-close {
        background: none;
        border: none;
        font-size: 28px;
        cursor: pointer;
        color: #666;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s;
      }

      .custom-modal-close:hover {
        color: #000;
      }

      .custom-modal-body {
        flex: 1;
        /* Esta é a chave: ocupa todo o espaço restante */
        overflow: hidden;
        /* Importante para o iframe não vazar */
        position: relative;
        /* Para o iframe absoluto funcionar bem */
        min-height: 0;
        /* Correção necessária para flex em alguns navegadores */
      }

      .custom-modal-iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
        position: absolute;
        /* Garante que ocupe todo o .custom-modal-body */
        top: 0;
        left: 0;
        background: white;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }

        to {
          opacity: 1;
        }
      }

      @keyframes slideIn {
        from {
          opacity: 0;
          transform: translateY(-20px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (max-width: 768px) {
        .custom-modal-container {
          width: 98%;
          height: 98%;
        }

        .custom-modal-header {
          padding: 12px 15px;
        }

        .custom-modal-header h4 {
          font-size: 1.1rem;
        }
      }
    </style>

    <script>
      let isModalOpen = false;

      function openCustomModal() {
        const modal = document.getElementById('customModalIA');
        modal.style.display = 'flex';
        isModalOpen = true;

        document.body.style.overflow = 'hidden';

        document.addEventListener('keydown', handleEscapeKey);
      }

      function closeCustomModal() {
        const modal = document.getElementById('customModalIA');
        modal.style.display = 'none';
        isModalOpen = false;

        document.removeEventListener('keydown', handleEscapeKey);
        document.body.style.overflow = '';
      }

      function handleEscapeKey(event) {
        if (event.key === 'Escape' && isModalOpen) {
          closeCustomModal();
        }
      }

      // Fechar ao clicar fora do conteúdo
      document.getElementById('customModalIA').addEventListener('click', function(event) {
        if (event.target === this) {
          closeCustomModal();
        }
      });

      window.openSIAModal = openCustomModal;
      window.closeSIAModal = closeCustomModal;
    </script>

    <div class="modal fade bd-modal-sm" id="modalNotificacao">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h4>Notificação</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">

            <nav>
              <div class="nav nav-tabs justify-content-start" id="nav-tab" role="tablist" style="text-decoration: none">
                <a class="nav-link abaLink" id="tabAcesso" data-toggle="tab" href="#divAcesso" role="tab" aria-controls="divAcesso" aria-selected="false">Acesso</a>
                <a class="nav-link abaLink active" id="tabCadastro" data-toggle="tab" href="#divCadastro" role="tab" aria-controls="divCadastro" aria-selected="true">Cadastro</a>
              </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active card" id="divCadastro" role="tabpanel" aria-labelledby="tabCadastro">
                <div class="row">
                  <div class="col-sm-6">
                    <label for="txtNotificacaoOrigem">Origem</label>
                    <input disabled type="text" placeholder="Origem" class="input-default" id="txtNotificacaoOrigem" name="txtNotificacaoOrigem">
                  </div>
                  <div class="col-sm-6">
                    <label for="txtNotificacaoData">Data Cadastro</label>
                    <input disabled type="datetime-local" placeholder="Data Cadastro" class="input-default" id="txtNotificacaoData" name="txtNotificacaoData">
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12">
                    <div class="form-group" style="margin-bottom: 0.5rem!important;">
                      <label for="txtNotificacaoDesc">Descrição:</label>
                      <div class="relative">
                        <input class="d-none" id="txtNotificacaoId" />
                        <textarea class="input-default focus form-control validate" style="width: 100%" readonly disabled id="txtNotificacaoDesc" rows="10" placeholder="Descrição"></textarea>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-12" id="divNotificacaoDestino">
                    <label for="txtNotificacaoDestino">Destino</label>
                    <select class="js-example-basic-single" id="txtNotificacaoDestino" name="txtNotificacaoDestino">
                    </select>
                    <!-- <input disabled type="text" placeholder="Destino" class="input-default" id="txtNotificacaoDestino" name="txtNotificacaoDestino"> -->
                  </div>
                </div>
                <div id="modal-footer" class="modal-footer d-flex justify-content-rigth">
                  <button class="btn btn-primary focus" id="btnConfirmarNotificacao">Confirmar</button>
                </div>
              </div>

              <div class="tab-pane fade show card" id="divAcesso" role="tabpanel" aria-labelledby="tabAcesso">
                <div class="row mt-2">
                  <div class="col-lg-3 col-12">
                    <div class="group-default form-group">
                      <label for="txtCadastroDe">Cadastro De:</label>
                      <div class="relative">
                        <input type="date" max="2500-12-31" class="input-default focus form-control validate" id="txtCadastroDe" name="txtCadastroDe" max="2500-12-31">
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3 col-12">
                    <div class="group-default form-group">
                      <label for="txtCadastroAte">Cadastro Até:</label>
                      <div class="relative">
                        <input type="date" max="2500-12-31" class="input-default focus form-control validate" id="txtCadastroAte" name="txtCadastroAte" max="2500-12-31">
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3 col-12">
                    <div class="group-default form-group">
                      <label for="txtConcluidoDe">Concluído De:</label>
                      <div class="relative">
                        <input type="date" max="2500-12-31" class="input-default focus form-control validate" id="txtConcluidoDe" name="txtConcluidoDe" max="2500-12-31">
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3 col-12">
                    <div class="group-default form-group">
                      <label for="txtConcluidoAte">Concluído Até:</label>
                      <div class="relative">
                        <input type="date" max="2500-12-31" class="input-default focus form-control validate" id="txtConcluidoAte" name="txtConcluidoAte" max="2500-12-31">
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-6 col-12 d-none">
                    <label data-error="wrong" data-success="right" for="txtUsuarioOrigem">Usuário Origem:</label>
                    <div class="input-group">
                      <!-- <input type="text" data-selecionado="false" class="input-default focus form-control" id="txtUsuarioOrigem" name="txtUsuarioOrigem" class="form-control" placeholder="Usuário Origem"> -->
                      <select class="js-example-programmatic js-states form-control" id="txtUsuarioOrigem" name="txtUsuarioOrigem" multiple="multiple"> </select>
                      <div class="input-group-append">
                        <button class="btn bg-danger" id="btn-UsuarioOrigem" name="btn-UsuarioOrigem" data-button="absolute" type="button"><i class="m-0 p-0 fas fa-search"></i></button>
                        <button class="btn bg-danger" id="btn-limpa-UsuarioOrigem" type="button"><i class="m-0 p-0 fas fa-trash"></i></button>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-6 col-12">
                    <label data-error="wrong" data-success="right" for="txtUsuarioDestino">Usuário Destino:</label>
                    <div class="input-group">
                      <!-- <input type="text" data-selecionado="false" class="input-default focus form-control" id="txtUsuarioDestino" name="txtUsuarioDestino" class="form-control" placeholder="Usuário Destino"> -->
                      <select class="js-example-programmatic js-states form-control" id="txtUsuarioDestino" name="txtUsuarioDestino" multiple="multiple"> </select>
                      <div class="input-group-append">
                        <button class="btn bg-danger" id="btn-UsuarioDestino" name="btn-UsuarioDestino" data-button="absolute" type="button"><i class="m-0 p-0 fas fa-search"></i></button>
                        <button class="btn bg-danger" id="btn-limpa-UsuarioDestino" type="button"><i class="m-0 p-0 fas fa-trash"></i></button>
                      </div>
                    </div>
                  </div>

                  <div class="col-lg-3 col-12">
                    <label class="textoBorda mt-3 pl-2">Origem</label>
                    <div class="row pl-2">
                      <div class="col-lg-6 col-6">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="cbEnviados"> <label for="cbEnviados">Enviados</label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="cbRecebidos"> <label for="cbRecebidos">Recebidos</label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3 col-12">
                    <label class="textoBorda mt-3 pl-2">Status</label>
                    <div class="row pl-2">
                      <div class="col-lg-6 col-6">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="cbConcluido"> <label for="cbConcluido">Concluído</label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="cbPendente"> <label for="cbPendente">Pendente</label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="modal-footer">
                      <!-- <button class="btn btn-primary btn-sisp" id="btnLimparFiltrosNotificacoes" style="background-color: #B22222; border-color: #B22222"><span class="fas fa-trash"></span> Limpar
                        Filtros</button>      -->
                      <button id="btnConsultarNotificacoes" class="btn btn-primary btn-sisp float-right" type="button">
                        <span class="fas fa-search"></span> Consultar
                      </button>
                    </div>
                  </div>
                </div>
                <div class="col-sm-12 table-responsive">
                  <table id="tabelaNotificacoes" class="table table-sm table-select table-hover" width="100%">
                    <thead>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <?php
    include_once('footer.php');
    ?>
  </div>

  <!-- jQuery -->
  <script src="plugins/jquery/jquery.min.js?versao=3.263.17.1"></script>
  <!-- jQuery UI 1.11.4 -->
  <script src="plugins/jquery-ui/jquery-ui.min.js?versao=3.263.17.1"></script>
  <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
  <script>
    $.widget.bridge('uibutton', $.ui.button)
  </script>

  <!-- Bootstrap 4 -->
  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js?versao=3.263.17.1"></script>
  <!-- Sparkline -->
  <script src="plugins/sparklines/sparkline.js?versao=3.263.17.1"></script>
  <script src="dist/js/sisplan.js?versao=3.263.17.1"></script>
  <script type="text/javascript" src="utils/funcoes.js?versao=3.263.17.1"></script>
  <script src="dist/js/adminlte.min.js?forcaLimpaCache=true&versao=3.263.17.1"></script>
  <script src="dist/js/jquery.dataTables.min.js?versao=3.263.17.1"></script>
  <script type="text/javascript" src="dist/js/loadingoverlay.min.js?versao=3.263.17.1"></script>
  <script type="text/javascript" src="dist/js/dataTables.bootstrap4.min.js?versao=3.263.17.1"></script>
  <script type="text/javascript" src="dist/js/sum().js?versao=3.263.17.1"></script>
  <script src="dist/js/dataTables.keyTable.js?versao=3.263.17.1"></script>
  <script src="utils/cookies.js?versao=3.263.17.1"></script>
  <script src="dist/js/requisicoes.js?versao=3.263.17.1"></script>
  <script type="text/javascript" src="plugins/jszip/jszip.min.js?versao=3.263.17.1"></script>
  <script type="text/javascript" src="plugins/pdfmake/pdfmake.min.js?versao=3.263.17.1"></script>
  <script type="text/javascript" src="plugins/pdfmake/vfs_fonts.js?versao=3.263.17.1"></script>
  <script type="text/javascript" src="plugins/datatables-buttons/js/dataTables.buttons.min.js?versao=3.263.17.1"></script>
  <script type="text/javascript" src="plugins/datatables-buttons/js/buttons.html5.min.js?versao=3.263.17.1"></script>
  <script src="dist/js/sql-formatter.min.js?versao=3.263.17.1"></script>
  <script src="plugins/select2/js/select2.full.min.js?versao=3.263.17.1"></script>
  <script src="dist/js/underscore.js?versao=3.263.17.1"></script>
  <script type="text/javascript" src="dist/js/apexcharts.js?versao=3.263.17.1"></script>
  <script type="text/javascript" src="plugins/syncfusion/js/fusioncharts.js"></script>
  <script type="text/javascript" src="plugins/syncfusion/js/fusioncharts.charts.js"></script>
  <script type="text/javascript" src="plugins/syncfusion/js/fusioncharts.widgets.js"></script>
  <script type="text/javascript" src="plugins/syncfusion/js/fusioncharts.maps.js"></script>
  <script type="text/javascript" src="plugins/syncfusion/js/fusioncharts.brazil.js"></script>
  <script type="text/javascript" src="plugins/syncfusion/js/fusioncharts.theme.fint.js"></script>
  <script type="text/javascript" src="plugins/syncfusion/js/sisplan_functions.js"></script>
  <script type="text/javascript" src="plugins/syncfusion/js/fusioncharts.theme.candy.js"></script>
  <script>
    function verificaDropdown() {
      const dropdownAtivo = $('#botao_notificacoes').parent().hasClass('show');

      if (dropdownAtivo) {
        $('#botao_notificacoes').trigger('click');
      }
    };
  </script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['corechart'],
      language: 'pt-BR'
    });
  </script>

  <script>
    function alteracaoLarguraPagina() {
      if ($(window).width() < 982 && $('#listaAbas li').length < 1) {
        $('#menuMobile').removeClass('d-none');
        $('#mostrarEsconderMenuDesktop').addClass('d-none');
      } else {
        $('#menuMobile').addClass('d-none');
        $('#mostrarEsconderMenuDesktop').removeClass('d-none');
      }
    }

    alteracaoLarguraPagina();

    $(window).resize(function() {
      alteracaoLarguraPagina();

    });

    $(function() {
      $('[data-toggle="tooltip"]').tooltip()
    })

    function removeBotaoFecharVendaDevolucao() {
      // código responsável por eliminar o fechar da venda e devolução 
      $('#listaAbas li').map((i, li) => {
        const nomeTela = $(`#listaAbas li:eq(${i}) a:eq(1)`).text();
        if (['Venda', 'Devolução'].includes(nomeTela)) {
          $(`#listaAbas li:eq(${i}) a:eq(0)`).addClass('d-none');
          $(`#listaAbas li:eq(${i})`).attr('title', 'Necessário sair pelo botão SAIR PDV');
        }
      });
    }

    function abrirEmNovaAbaIFrame(nomeAba, link, paramURL = '') {
      const telasAbertasStorage = sessionStorage.getItem('@telasAbertas') ? JSON.parse(sessionStorage.getItem('@telasAbertas')) : [];
      const telaVenda = link.indexOf('/venda/') != -1;
      if (telaVenda) {
        const telaVendaJaAberta = telasAbertasStorage.filter(tela => tela.link.indexOf("/venda/") != -1).length > 0;
        if (telaVendaJaAberta) {
          msgAlerta("Tela já aberta, verifique.");
          return;
        }
      }

      const telaJaEstaAberta = telasAbertasStorage.filter(tela => tela.link == link).length > 0;

      if (telaJaEstaAberta) {
        msgAlerta('Tela já aberta, verifique.');
        return;
      }

      $('.content-wrapper').IFrame('createTab', nomeAba, link + paramURL, '-' + link.substr(1).replaceAll('/', '-'), false);
      const telas = $('#listaAbas').children().length;
      $($(`#listaAbas>li:eq(${telas -1})>a`)[1]).click();

      removeBotaoFecharVendaDevolucao();
    }

    function fecharAba(idAba, nomeAba) {
      const element = $(`#tab--sisplan_web-${idAba}-create`).siblings('.btn-iframe-close')
      $('.content-wrapper').IFrame('removeActiveTab', 'only-this', element)
      const telasAbertas = JSON.parse(sessionStorage.getItem('@telasAbertas')).filter(tela => tela.titulo != nomeAba)
      sessionStorage.setItem('@telasAbertas', JSON.stringify(telasAbertas))
    }

    function mandarParaLogin() {
      window.location.href = BASE_URI + '/login';
    }

    function fechaAbaAberta(fechouTelaVenda = false) {
      if (fechouTelaVenda) {
        const telaFechada = document.querySelector('#listaAbas li.active > a[role="tab"]').text;
        const telasAbertas = JSON.parse(sessionStorage.getItem('@telasAbertas')).filter(tela => tela.titulo != telaFechada);
        sessionStorage.setItem('@telasAbertas', JSON.stringify(telasAbertas));
        $('.nav-item.active .btn-iframe-close').trigger('click');
        return;
      }
      $('.nav-item.active .btn-iframe-close').trigger('click');
    }

    function redirecionaAbaAberta(url, nomeTela, id) {
      const iframeJaExiste = parent.$(`#iframe-${id}`);
      if (iframeJaExiste.length > 0) {
        iframeJaExiste[0].contentWindow.location.href = url;
        return;
      }
      parent.abrirEmNovaAbaIFrame(nomeTela, url);
    }

    function fechaAbaVendaDevolucao(telaAberta, numeroVenda) {
      const telasAbertas = JSON.parse(sessionStorage.getItem('@telasAbertas')).filter(tela => tela.titulo != telaAberta);
      sessionStorage.setItem('@telasAbertas', JSON.stringify(telasAbertas));
      // Quando deixa venda pendente ele não estava atualizando o id da aba.
      // Por isso feito da forma da aba ativa.
      if (telaAberta === 'Devolução') {
        const seletor = BASE_URI == '' ? `#tab-${BASE_URI.replaceAll('/', '')}-${telaAberta === 'Devolução' ? 'devolucao' : telaAberta.toLowerCase()}-${numeroVenda}` : `#tab--${BASE_URI.replaceAll('/', '')}-${telaAberta === 'Devolução' ? 'devolucao' : telaAberta.toLowerCase()}-${numeroVenda}`;
        $($(seletor).parent()[0].children[0]).trigger('click')
      } else {
        $('.nav-item.active .btn-iframe-close').trigger('click')
      }
    }

    async function removerTelaCheia(fechouTelaVenda = false) {
      if (fechouTelaVenda) return
      parent.document.querySelector('body').classList.remove('iframe-mode-fullscreen');
      const iframes = $('.content-wrapper.iframe-mode iframe');
      iframes.each(function() {
        $(this).removeClass('adicionaHeightTotal');
      });
      await sleep(100);
    }

    async function adicionarTelaCheia() {
      parent.document.querySelector('body').classList.add('iframe-mode-fullscreen');
      const iframes = $('.content-wrapper.iframe-mode iframe');
      iframes.each(function() {
        $(this).addClass('adicionaHeightTotal');
      });
      await sleep(100);
    }

    $("#abrirTelaCheia").on("click", async function() {
      if ($(document.body).hasClass('iframe-mode-fullscreen')) {
        await removerTelaCheia();
        $('#abrirTelaCheia > i').removeClass('fa-compress').addClass('fa-expand');
        $('#rodape').attr('style', 'width:calc(100vw-250px)')
      } else {
        await adicionarTelaCheia();
        $('#abrirTelaCheia > i').removeClass('fa-expand').addClass('fa-compress');
        $('#rodape').attr('style', 'width:100vw; margin-left: 0px !important;')
      }
    });

    $("#abrirIA").on("click", async function() {
      const iaLiberada = await verificaIALiberadaCallback(
        async () => {
          openCustomModal()
          const token = await autenticarSIA();
          $("#customSiaIframe").prop('src', `https://ia-web.sisplansistemas.com.br?t=${token}`)
        }
      )
      if (!iaLiberada)
        msgAlerta("A IA não está liberada para sua empresa. Por favor entre em contato com o comercial da Sisplan Sistemas.")
    })

    $("#abrirIaNovaGuia").on('click', function() {
      window.open($("#customSiaIframe").prop('src'), '_blank')
    })

    function fechaAbaNaoSelecionada(tabId) {
      $($($(tabId).offsetParent()[0]).children()[0]).trigger('click')
    }

    function verificaTelaAberta(link) {
      const telasAbertasStorage = sessionStorage.getItem('@telasAbertas') ? JSON.parse(sessionStorage.getItem('@telasAbertas')) : [];
      const telaJaEstaAberta = telasAbertasStorage.filter(tela => tela.link == link).length > 0;

      return telaJaEstaAberta;
    }

    function verificaTelaAbertaComTitulo(titulo) {
      const telasAbertasStorage = sessionStorage.getItem('@telasAbertas') ? JSON.parse(sessionStorage.getItem('@telasAbertas')) : [];
      const telaJaEstaAberta = telasAbertasStorage.filter(tela => tela.titulo == titulo).length > 0;

      return telaJaEstaAberta;
    }


    function verificaTelaAbertaVenda(link) {
      const telasAbertasStorage = sessionStorage.getItem('@telasAbertas') ? JSON.parse(sessionStorage.getItem('@telasAbertas')) : [];
      const telaJaEstaAberta = telasAbertasStorage.filter(tela => tela.link.includes(link)).length > 0;
      return telaJaEstaAberta;
    }

    $(document).ready(async function() {
      var queryString = window.location.href;
      var parametros = queryString.split('/');

      ipInterno = '<?php echo IP_INTERNO; ?>';
      ipExterno = '<?php echo IP_EXTERNO; ?>';
      basicAuth = '<?php echo BASIC_AUTH; ?>';

      var arrDados = [];
      var arrGraficos = [];
      var arrGrupos = [];
      var contadorGrafico = 0;
      var ultimoInterval = 0;
      var ultimoPlay = 0;
      var listaIntervals = [];
      const filtros = [];
      var listaDashboards = [];
      var chartsToDestroy = [];

      await insereJavaScriptTraducoes()

      function preencherDataInput(inputSelector, parametro) {
        const $input = $(inputSelector);
        const dataAtual = new Date();

        switch (parametro) {
          case 0:
          case '':
            // Não fazer nada
            break;
          case 1:
            // Data atual
            $input.val(dataAtual.toISOString().slice(0, 10));
            break;
          case 2:
            // Primeiro dia do mês corrente
            $input.val(new Date(dataAtual.getFullYear(), dataAtual.getMonth(), 1).toISOString().slice(0, 10));
            break;
          case 3:
            // Último dia do mês corrente
            $input.val(new Date(dataAtual.getFullYear(), dataAtual.getMonth() + 1, 0).toISOString().slice(0, 10));
            break;
          case 4:
            // Primeiro dia do ano corrente
            $input.val(new Date(dataAtual.getFullYear(), 0, 1).toISOString().slice(0, 10));
            break;
          case 5:
            // Último dia do ano corrente
            $input.val(new Date(dataAtual.getFullYear(), 11, 31).toISOString().slice(0, 10));
            break;
          default:
            console.warn("Parâmetro inválido.");
        }
      }

      function expandirModal(idGrafico) {
        // Copie o conteúdo do card
        // const conteudoCard = $('#graf-' + idGrafico).parent().html();
        const objetoExpandir = window['grafico' + idGrafico + '_objeto'];

        var graficoChart = new FusionCharts({
          type: 'brazil',
          renderAt: document.querySelector('#modalFullscreen .modal-body'),
          width: '95%',
          height: '95%',
          dataFormat: 'json',
          dataSource: {
            colorrange: {
              "minvalue": "0",
              "startlabel": "Poucas vendas",
              "endlabel": "Muitas vendas",
              "code": "#e44a00",
              "gradient": "1",
              "minvalue": objetoExpandir.min,
              "maxValue": objetoExpandir.max,
              "color": [{
                "maxvalue": objetoExpandir.min,
                "displayvalue": "Araste para mostrar as maiores vendas",
                "code": "#6baa01"
              }, {
                "maxvalue": objetoExpandir.max,
                "code": "#f8bd19"
              }]
            },
            "chart": {
              "theme": $('html').hasClass('theme-light') ? "fint" : "candy",
              "canvasPadding": "30",
              //"caption": "",                                                                   
              //"subcaption": "",                                                                
              "showMarkerLabels": "0",
              "numberSuffix": "", //Changing connector hover color                               
              "connectorHoverColor": "#f8bd19", //Changing connector hover thickness             
              "connectorHoverThickness": "3", //Enabling entity hover effect                     
              //Enabling marker hover effect                                                     
              "showMarkerHoverEffect": "1", //Changing marker fill color on hover                
              "markerFillHoverColor": "#cccccc",
              "entityFillHoverColor": "#000",
              "entityFillHoverAlpha": "30",
              "showLabels": "1",
              "formatNumberScale": "10",
              "decimalSeparator": ",",
              "thousandSeparator": "."
            },

            "data": objetoExpandir.dados
          },
          "events": {
            "entityClick": function(evt, data) {
              if (data.value) {
                ShowMap(data.label, objetoExpandir.id, objetoExpandir.nome + ' - ' + data.label, objetoExpandir.min, objetoExpandir.max);
              }
            }
          }
        }).render();

        $("#modalFullscreen .modal-body").html('');
        $("#modalFullscreen").modal("show");
        // Coloque o conteúdo no modal
        $('#modalFullscreenLabel').html(objetoExpandir.nome);

        // Abra o modal
      }


      $('.btn-expandir').on('click', function() {
        expandirModal($(this).attr('data-id-grafico'));
      });



      $('#icone-play').on('click', function() {

        if (ultimoPlay != 0) {
          clearInterval(ultimoPlay);
        }

        if (ultimoInterval != 0) {
          clearInterval(ultimoInterval);
        }

        if ($(this).hasClass('fa-play')) {
          // verifica se tem graficos sem tempo
          for (let i = 0; i < listaDashboards.length; i++) {
            if (listaDashboards[i].MINUTOS == 0) {
              msgAlerta(`Gráfico ${listaDashboards[i].NOME} com minutos zerados, necessário alterar o cadastro em (Dashboard / Cadastro de Dashboard / alterar ${listaDashboards[i].NOME}).`);
              return;
            }
          }

          // if (){

          // }


          ultimoPlay = setInterval(() => {
            for (let i = 0; i < listaIntervals.length; i++) {
              if (listaIntervals[i].ativo) {
                if (listaIntervals.length - 1 == i) {
                  $(`#nav-tab > a:eq(0)`).trigger('click'); // clica no primeiro de novo
                } else {
                  $(`#nav-tab > a:eq(${i+1})`).trigger('click');
                }
              }
            }
          }, Number($('#txtTempoPlay').val() ?? 2) * 60000); // 2min

          const dashboardsLiberados = $('#nav-tab').children().length;
          $(this).addClass('fa-stop').removeClass('fa-play').attr('title', 'Rodar apenas o dashboard ativo');
          for (let i = 0; i < dashboardsLiberados; i++) {
            setTimeout(() => {
              $(`#nav-tab > a:eq(${i})`).click();
            }, i * 1500);
          }
        } else {
          $(this).addClass('fa-play').removeClass('fa-stop').attr('title', 'Rodar todos os dashboards (a cada x minutos)');
          for (let i = 0; i < listaIntervals.length; i++) {
            clearInterval(listaIntervals[i].id_interval);
          }
          listaIntervals = [];
          $(`#nav-tab > a:eq(0)`).trigger('click'); // clica no primeiro de novo
        }
      });

      $('#fecharTodasAbas').on('click', function() {
        $('#menu_cadastros, li, a').removeClass('active');
        if ($(window).width() < 982) {
          $('#menuMobile').removeClass('d-none');
          $('#mostrarEsconderMenuDesktop').addClass('d-none');
        }
      });

      $("#menuGeral, #tabelaSearch").on("click", "a[href^='/']", function() {
        $("#exibir_dashboard").addClass("d-none");
        if ($(window).width() < 982) {
          $('#menuMobile').addClass('d-none');
          $('#mostrarEsconderMenuDesktop').removeClass('d-none');
        }
        $("#exibir_iframe").removeClass("d-none");
      });

      // by sony
      $('#listaAbas').on("click", "li > :eq(0)", function() {
        if ($('#listaAbas > li').length == 1) {
          $("#exibir_dashboard").removeClass("d-none");
          if ($(window).width() < 982) {
            $('#menuMobile').removeClass('d-none');
            $('#mostrarEsconderMenuDesktop').addClass('d-none');
          }
          setTimeout(function() {
            $("#exibir_iframe").addClass("d-none");
            $('#menu_cadastros, li, a').removeClass('active');
          }, 50);
        }
      });

      $('#tabelaSearch > tr > td > a > p').on("click", function() {
        $("#exibir_dashboard").addClass("d-none");
        if ($(window).width() < 982) {
          $('#menuMobile').addClass('d-none');
          $('#mostrarEsconderMenuDesktop').removeClass('d-none');

        }
        $("#exibir_iframe").removeClass("d-none");
      });

      async function recuperaTelasFechadas() {
        const telas = sessionStorage.getItem('@telasAbertas') ? JSON.parse(sessionStorage.getItem('@telasAbertas')) : [];
        for (let i = 0; i < telas.length; i++) {
          const tela = telas[i];
          $('.content-wrapper').IFrame('createTab', tela.titulo, tela.link, '-' + tela.link.substr(1).replaceAll('/', '-'), false);
        }
        if (telas.length > 0) {
          $("#exibir_dashboard").addClass("d-none");
          if ($(window).width() < 982) {
            $('#menuMobile').addClass('d-none');
            $('#mostrarEsconderMenuDesktop').removeClass('d-none');
          }
          $("#exibir_iframe").removeClass("d-none");
          $(`#listaAbas>li:eq(${telas.length-1})>a`)[1].click()
          removeBotaoFecharVendaDevolucao();
          // await sleep(1000);
          // const conteudosCriados = $('.tab-pane.fade.active.show').toArray();
          // for (let i = 0; i < conteudosCriados.length-1; i++) {
          //   $(conteudosCriados[i]).removeClass('active').removeClass('show');
          // }
        }
      };

      async function criaBotaoVoltarGrupos() {
        const botaoVoltar = `<a id="btnMostrarGrupos" class="nav-link" href="#" role="button"><i class="fas fa-arrow-left"></i></a>`
        $($('#nav-tabContent').parent().parent()).prepend(botaoVoltar);
        $('#btnMostrarGrupos').off();
        $('#btnMostrarGrupos').on('click', async function() {
          $('#nav-tab').html('');
          $('#nav-tabContent').html('');
          $('#btnFiltros').addClass('d-none');
          $('#txtNome').html('');
          $('#conteudo').html('');
          await buscaGruposDash();
          $('#btnMostrarGrupos').remove();
        });
      }

      async function retornaImagemLogin() {
        try {
          $.LoadingOverlay('show');

          const response = await requisicao('GET', '/sisplan/funcoes/v1/imagemweb?', `EMPRESA=_001&USUARIO=0000`, null);

          const semanaDoAno = () => {
            const dia = new Date();
            const primeiroDiaAno = new Date(dia.getFullYear(), 0, 1);
            const ultimoDiaAno = (dia - primeiroDiaAno) / 86400000;
            return Math.ceil((ultimoDiaAno + primeiroDiaAno.getDay() + 1) / 7);
          };

          // bg vai alternar de acordo com a semana, entre par e impar
          const bgPadrao = `dist/img/bg-0${semanaDoAno() % 2 === 0 ? '1' : '2'}.jpg`;

          const aplicaBg = (imgURL) => {
            $(`#exibir_dashboard`).css('background-image', `url('${imgURL}')`);
          };

          if (response && response.status === 200) {
            const jsonStr = await response.json();
            const imgURL = jsonStr.mensagem || bgPadrao;
            $('#backdropOpacity').removeClass('d-none')
            $(`#exibir_dashboard`).css('background-image', `url('${imgURL}')`);
            aplicaBg(imgURL);
          } else {
            aplicaBg(bgPadrao);

            $('#backdropOpacity').removeClass('backdropOpacity')
            $('#backdropOpacity').addClass('d-none')
          }

        } catch (error) {
          console.error('Erro ao buscar imagem de login:', error);
          $(`#exibir_dashboard`).css('background-image', `url('dist/img/bg-01.jpg')`);
        } finally {
          $.LoadingOverlay('hide');
        }
      }

      async function buscaGruposDash() {
        try {
          $.LoadingOverlay('show');
          arrGrupos = [];
          const pesquisa = {
            tabela: 'GRUPO_DASH_WEB',
            camposSelect: ['ID', 'DESCRICAO']
          }
          const grupos = await retornaJsonPesquisaPadrao(JSON.stringify(pesquisa));
          if (grupos.length > 0) {
            const pesquisa2 = {
              tabela: 'DASH_WEB',
              camposSelect: ['ID'],
              where: [`ID_GRUPO IS NOT NULL`]
            }
            const dashsComGrupo = await retornaJsonPesquisaPadrao(JSON.stringify(pesquisa2));
            if (dashsComGrupo.length > 0) {
              $('#div-welcome').addClass('d-none');
              for (let i = 0; i < grupos.length; i++) {
                arrGrupos.push({
                  id: grupos[i].ID,
                  descricao: grupos[i].DESCRICAO
                });
                $('#nav-tab').append(`<button data-id-grupo="${grupos[i].ID}"class="btn-grupo-dash btn btn-danger btn-sisp mr-2 mb-2">${grupos[i].DESCRICAO}</button>`);
              }

              $('.btn-grupo-dash').off();
              $('.btn-grupo-dash').on('click', function() {
                criaBotaoVoltarGrupos();
                buscaDashboardsLiberados($(this).attr('data-id-grupo'));
              });


            }
          }
        } finally {
          $.LoadingOverlay('hide');
        }
      }

      async function buscaDashboardsLiberados(id_grupo = '') {
        const usuario = getCookie('cod_usuario');
        if (usuario === '') {
          msgErro('Usuário deve estar logado para continuar.');
          window.location.href = '<?php echo BASE_URI; ?>/';
        }
        const pesquisa = {
          tabela: 'DASH_ACESSO_WEB',
          camposSelect: ['DASH_ACESSO_WEB.ID_DASH', 'DASH_WEB.NOME', 'DASH_WEB.MINUTOS', "DASH_WEB.ID_GRUPO"],
          leftJoin: [{
            tabela: 'DASH_WEB',
            condicao: 'DASH_WEB.ID = DASH_ACESSO_WEB.ID_DASH'
          }],
          where: [`DASH_ACESSO_WEB.CODIGO = '${usuario}' AND DASH_ACESSO_WEB.CONSULTA = 'S'`],
          orderBy: ['DASH_WEB.ORDEM ASC']
        }

        if (id_grupo != '') {
          pesquisa.where = [`DASH_ACESSO_WEB.CODIGO = '${usuario}' AND DASH_ACESSO_WEB.CONSULTA = 'S' AND DASH_WEB.ID_GRUPO = ${id_grupo}`];
        }

        //adicionar where dos filtros
        listaDashboards = await retornaJsonPesquisaPadrao(JSON.stringify(pesquisa));
        if (listaDashboards.length === 0) {
          $('#nav-tab').html('');
          $('#nav-tabContent').html('');
          $('#div-welcome').removeClass('d-none');
          retornaImagemLogin();
        } else {
          $('#div-welcome').addClass('d-none');
          if (id_grupo != '') {
            $('#nav-tab').html('');
          }
        }

        listaDashboards.forEach((dashboard, index) => {
          const ativo = index === 0 ? 'active' : '';
          const texto = `<a class="nav-item nav-link ${ativo}" data-id-dash="${dashboard.ID_DASH}" id="nav-dash-${dashboard.ID_DASH}" data-toggle="tab" href="#tab-content" role="tab">${dashboard.NOME}</a>`
          $('#nav-tab').append(texto);
          // $('#nav-tabContent').append(dashboard.NOME);
        });
        $('a.nav-item.nav-link').on('click', async function() {
          for (let i = 0; i < chartsToDestroy.length; i++) {
            chartsToDestroy[i].destroy();
          }
          chartsToDestroy = [];
          const id = $(this).attr('data-id-dash');
          await carregaDashboardCompleto(id);
        });
        $($('a.nav-item.nav-link')[0]).trigger('click');
      }

      async function retornaEmpresasUsuario() {
        const dadosSelect = {
          orderBy: ['EMPRESA.EMP_PAT'],
          tabela: `ACESSO_EMPRESA`,
          leftJoin: [{
            "tabela": "EMPRESA",
            "condicao": "REPLACE(EMPRESA.EMP_PAT,'_','') = ACESSO_EMPRESA.EMPRESA"
          }],
          camposSelect: ['EMPRESA.EMP_ID', 'ACESSO_EMPRESA.EMPRESA', 'EMPRESA.EMP_NOME', 'EMPRESA.EMP_FANTASIA'],
          where: [`ACESSO_EMPRESA.USUARIO = '${getCookie('cod_usuario')}'`],
        };
        const retornoSelect = await retornaJsonPesquisaPadrao(JSON.stringify(dadosSelect));
        if (!retornoSelect) {
          return '';
        }
        return retornoSelect;
      }

      async function buscaFiltros(id_dashboard) {
        const url = `/sisplan/funcoes/v1/pesquisa?`;
        const pesquisa = {
          "tabela": "dash_filtros",
          "camposSelect": ["id", "nome", "tipo", "tabela", "campo", "valor_padrao", "obrigatorio", "varios", "label", "campo_desc", "utiliza_emp_id", "opcao_data"],
          "where": [`id_dash = ${id_dashboard}`],
          "orderBy": ['id']
        }
        try {
          try {
            const response = await requisicao('GET', url,
              `JSON=${JSON.stringify(pesquisa)}`,
              null);

            if (!response) {
              return;
            }
            const jsonStr = await response.json();
            if (response.status != 200) {
              msgErro(jsonStr['RESULT'][0].mensagem)
              return;
            }

            const dados = jsonStr['RESULT'][0];
            const filtrosList = [];
            const listaPesquisasDinamicas = [];
            while (filtros.length) {
              filtros.pop();
            }

            for (let i = 0; i < dados.length; i++) {
              const element = dados[i];
              const ehTexto = element.TIPO == 0;
              const ehData = element.TIPO == 1;
              const ehNumero = element.TIPO == 2;
              const defaultValue = element.VALOR_PADRAO != '' ? element.VALOR_PADRAO : '';
              const obrigatorio = element.OBRIGATORIO == 'S' ? 'required' : '';
              const utilizaEmpId = element.UTILIZA_EMP_ID == 'S';

              filtros.push({
                component: `txt-filtro-${element.NOME}`,
                label: element.LABEL,
                name: element.NOME,
                required: element.OBRIGATORIO == 'S',
                emp: element.UTILIZA_EMP_ID == 'S',
                data: ehData
              })

              // monta o input

              if (ehData) {
                const dataElement = `<div class="col-lg-12 col-md-12 col-sm-12">` +
                  `<label data-error="wrong" data-success="right" for="txt-filtro-${element.NOME}">${element.LABEL}</label>` +
                  `  <div class="input-group">` +
                  `    <input type="date" max="2500-12-31" ${obrigatorio} autocomplete="off" value="${defaultValue}" class="input-default focus form-control" id="txt-filtro-${element.NOME}">` +
                  `  </div>` +
                  ` </div>`;
                filtrosList.push(dataElement);
              } else if (ehTexto) {

                if (element.VARIOS == 'S') {
                  const textElement = `<div class="col-lg-12 col-md-12 col-sm-12">` +
                    `<label data-error="wrong" data-success="right" for="txt-filtro-${element.NOME}">${element.LABEL} </label>` +
                    `<div class="relative">` +
                    `   <div class="input-group">` +
                    `     <select ${obrigatorio} class="js-example-programmatic js-states form-control" id="txt-filtro-${element.NOME}" name="txt-filtro-${element.NOME}" multiple="multiple"></select>` +
                    `     <div class="input-group-append">` +
                    `       <button class="btn bg-danger" id="btn-filtro-${element.NOME}" name="btn-filtro-${element.NOME}" data-button="absolute" type="button"><i class="m-0 p-0 fas fa-search"></i></button>` +
                    `       <button class="btn bg-danger" id="btn-limpa-filtro-${element.NOME}" type="button"><i class="m-0 p-0 fas fa-trash"></i></button>` +
                    `     </div>` +
                    `    </div>` +
                    ` </div>` +
                    `</div>`;

                  listaPesquisasDinamicas.push(async () => {
                    const pesquisa = {
                      camposSelect: [`${element.CAMPO}`, `${element.CAMPO_DESC}`],
                      tabela: `${element.TABELA}`,
                      where: []
                    }

                    if (pesquisa.tabela.toUpperCase() == 'EMPRESA') {
                      const empresasUsuario = await retornaEmpresasUsuario();
                      const empresasFiltro = empresasUsuario != '' ? await formataListas(empresasUsuario.map(emp => emp.EMPRESA).toString()) : '';
                      if (empresasFiltro != '') {
                        pesquisa.where.push(` EMP_ID IN (SELECT EMP_ID FROM EMPRESA WHERE REPLACE(EMP_PAT, '_','') IN (${empresasFiltro}))`)
                      }
                    }

                    if (utilizaEmpId) {
                      pesquisa.where.push(` EMP_ID = ${getCookie('emp_id')}`);
                    }

                    $('#txt-filtro-' + element.NOME).pesquisa_variosServerside(1, `${JSON.stringify(pesquisa)}`, element.CAMPO, element.CAMPO_DESC);
                    $('#btn-filtro-' + element.NOME).pesquisa_serversideSel('#txt-filtro-' + element.NOME, `${JSON.stringify(pesquisa)}`, `Pesquisa ${pesquisa.tabela}`);
                    $('#btn-limpa-filtro-' + element.NOME).on('click', function() {
                      $('#txt-filtro-' + element.NOME).empty().trigger('change')
                      $('#txt-filtro-' + element.NOME).val('');
                      $('#txt-filtro-' + element.NOME).attr('data-chave', '');
                      $('#txt-filtro-' + element.NOME).attr('data-desc', '');
                    });

                    if (defaultValue != '') {
                      $('#txt-filtro-' + element.NOME).append(new Option(defaultValue, pegaChave(defaultValue), true, true));
                      $('#txt-filtro-' + element.NOME).trigger('change');
                    }
                  });

                  filtrosList.push(textElement);


                } else {
                  const textElement = `<div class="col-lg-12 col-md-12 col-sm-12"> ` +
                    `  <label data-error="wrong" data-success="right" for="txt-filtro-${element.NOME}">${element.LABEL}</label>` +
                    `  <div class="form-group input-group">` +
                    `    <input ${obrigatorio} type="text" class="input-default focus form-control ui-autocomplete-input" id="txt-filtro-${element.NOME}" name="txt-filtro-${element.NOME}" autocomplete="off">` +
                    `    <div class="input-group-append">` +
                    `      <button class="btn bg-danger" id="btn-filtro-${element.NOME}" name="btn-filtro-${element.NOME}" data-button="absolute" type="button"><i class="m-0 p-0 fas fa-search"></i></button>` +
                    `      <button class="btn bg-danger" id="btn-limpa-filtro-${element.NOME}" type="button"><i class="m-0 p-0 fas fa-trash"></i></button>` +
                    `    </div>` +
                    `  </div>` +
                    `</div>`;
                  listaPesquisasDinamicas.push(async () => {
                    const pesquisa = {
                      camposSelect: [`${element.CAMPO} CHAVE`, `${element.CAMPO_DESC} DESCRICAO`],
                      tabela: `${element.TABELA}`,
                      where: []
                    }

                    if (pesquisa.tabela.toUpperCase() == 'EMPRESA') {
                      const empresasUsuario = await retornaEmpresasUsuario();
                      const empresasFiltro = empresasUsuario != '' ? await formataListas(empresasUsuario.map(emp => emp.EMPRESA).toString()) : '';
                      if (empresasFiltro != '') {
                        pesquisa.where.push(` EMP_ID IN (SELECT EMP_ID FROM EMPRESA WHERE REPLACE(EMP_PAT, '_','') IN (${empresasFiltro}))`)
                      }
                    }

                    if (utilizaEmpId) {
                      pesquisa.where.push(` EMP_ID = ${getCookie('emp_id')}`);
                    }

                    $('#txt-filtro-' + element.NOME).autocompleta(2, `JSON=${JSON.stringify(pesquisa)}`);
                    $('#btn-filtro-' + element.NOME).pesquisa('#txt-filtro-' + element.NOME, 'CHAVE', 'DESCRICAO', `/sisplan/funcoes/v1/pesquisa?JSON=${JSON.stringify(pesquisa)}`, `Pesquisa de ${pesquisa.tabela}`, pesquisa.tabela.toUpperCase());
                    $('#btn-limpa-filtro-' + element.NOME).on('click', function() {
                      limpaValor('#txt-filtro-' + element.NOME);
                    });
                  });

                  filtrosList.push(textElement);
                }
              } else if (ehNumero) {
                const numberElement = `<div class="col-lg-12 col-md-12 col-sm-12">` +
                  `  <label data-error="wrong" data-success="right" for="txt-filtro-${element.NOME}">${element.LABEL}</label>` +
                  `  <div class="input-group">` +
                  `    <input ${obrigatorio} type="number" autocomplete="off" value="${defaultValue}" class="input-default focus form-control" id="txt-filtro-${element.NOME}">` +
                  `  </div>` +
                  `</div>`;
                filtrosList.push(numberElement);
              }
            }

            const nome = $('#nav-dash-' + id_dashboard).html();

            $('#modal-conteudos').html(`<div class="modal fade" id="modal-filtros-${id_dashboard}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> ` +
              `<div class="modal-dialog modal-lg">` +
              `  <div class="modal-content">` +
              `    <div class="modal-header">` +
              `      <h4 class="modal-title">Filtros ${nome}</h4>` +
              `      <button type="button" class="close" data-dismiss="modal" aria-label="Close">` +
              `        <span aria-hidden="true">&times;</span>` +
              `      </button>` +
              `    </div>` +
              `    <div class="modal-body">` +
              `      <div id="modal-filtros-${id_dashboard}-conteudo" class="row">` +
              `      </div>` +
              `    </div>` +
              `<div class="modal-footer">` +
              `<button id="btnConsultar" class='btn btn-primary btn-sisp' type='button'><span class="fas fa-search"></span> Consultar </button>` +
              `</div>` +
              `</div>` +
              `   </div>` +
              `  </div>` +
              ` </div>`);

            for (let i = 0; i < filtrosList.length; i++) {
              $(`#modal-filtros-${id_dashboard}-conteudo`).append(filtrosList[i]);
              if (dados[i].TIPO == 1) {
                preencherDataInput(`#txt-filtro-${dados[i].NOME}`, dados[i].OPCAO_DATA ?? 0);
              }

            }

            for (let i = 0; i < listaPesquisasDinamicas.length; i++) {
              await listaPesquisasDinamicas[i]();
            }


            if (filtrosList.length > 0) {
              $('#btnFiltros').removeClass('d-none');
            } else {
              $('#btnFiltros').addClass('d-none');
            }

            $('#btnFiltros').off();
            $('#btnFiltros').on('click', function() {
              $(`#modal-filtros-${id_dashboard}`).modal('show');
            });

            $('#btnConsultar').off('click');
            $('#btnConsultar').on('click', async function() {
              try {
                $('#conteudo').html(`<div class="col-sm-12">
                  <textarea id="txtSelect" class="d-none" rows="10"></textarea>
                  <div id="resultados" class="col-sm-12 table-responsive d-none">
                  </div>
                </div>`);
                await criaAviso('Carregando Dados');
                $('#btnConsultar').prop('disabled', true);
                if (await buscaDatasets(id_dashboard)) {
                  await buscaGraficos(id_dashboard);
                }
              } finally {
                $(`#modal-filtros-${id_dashboard}`).modal('hide');
                $('#btnConsultar').prop('disabled', false);
                await destroiAviso();
              }
            });
          } catch (error) {
            console.error(error);
            $('#btnConsultar').prop('disabled', false);
            msgErro('Não foi possível buscar os dados dos dashboards.');
          }
        } finally {
          $('#btnConsultar').prop('disabled', false);
        }
      }

      async function buscaDashboard(id_dashboard) {
        const manterSequenciaDash = $('#icone-play').hasClass('fa-stop');
        const _url = `/sisplan/funcoes/v1/pesquisa?`;
        try {
          try {
            var response = await requisicao('GET', _url,
              `JSON={ "tabela":"dash_web", "camposSelect":["nome", "minutos"], "where": ["id = '${id_dashboard}'"], "orderBy": ["ordem"]}`,
              null);

            if (!response) {
              return;
            }
            var jsonStr = await response.json();
            if (response.status != 200) {
              msgErro(jsonStr['RESULT'][0].mensagem)
              return;
            }
            $('#txtNome').html(jsonStr.RESULT[0][0].NOME);
            if (jsonStr.RESULT[0][0].MINUTOS > 0) {
              const segundos = jsonStr.RESULT[0][0].MINUTOS * 60000;
              if (ultimoInterval != 0) {
                clearInterval(ultimoInterval);
              }
              if ($('#icone-play').hasClass('fa-play') && ultimoInterval != 0) { // deve sempre abrir o ultimo
                listaIntervals = [];
              }
              if (listaIntervals.findIndex(col => col.id_dashboard == id_dashboard) == -1) {
                ultimoInterval = setInterval(() => {
                  $(`#nav-dash-${id_dashboard}`).trigger('click');
                }, segundos);
                listaIntervals.push({
                  id_interval: ultimoInterval,
                  id_dashboard
                });
              }
            }
          } catch (error) {
            console.error(error);
            msgErro('Não foi possível buscar os dados dos dashboards.');
          }
        } finally {

        }
      }
      async function buscaDatasets(id_dashboard) {
        const _url = `/sisplan/funcoes/v1/pesquisa?`;
        try {
          try {
            var response = await requisicao('GET', _url,
              `JSON={ "tabela":"dataset_web", "camposSelect":["id","nome","sql", "cor"], "where": ["id_dash = '${id_dashboard}'"] }&REPLACE_LINE_BREAK=true`,
              null);
            if (!response) {
              return;
            }
            var jsonStr = await response.json();
            if (response.status != 200) {
              msgErro(jsonStr['RESULT'][0].mensagem)
              return;
            }

            for (let i = 0; i < filtros.length; i++) {
              const filtro = filtros[i];
              if ((filtro.required) && ($('#' + filtro.component).val() == '')) {
                msgAlerta('Campo ' + filtro.label.replaceAll(':', '') + ' é obrigatório, verifique.');
                return;
              }
            }

            arrDados.splice(0, arrDados.length);
            for (let i = 0; i < jsonStr['RESULT'][0].length; i++) {
              const dataset = jsonStr['RESULT'][0][i];
              $('#txtSelect').val(dataset.SQL);
              const dados = {}
              const sqlReplaced = $('#txtSelect').val()
                .replaceAll('&#013;', '\r\n')
                .replaceAll('  ', ' ')
                .replaceAll(':EMP_ID', getCookie('emp_id'))
                .replaceAll(':EMP_PAT', getCookie('empresa'))
                .replaceAll(':COD_USUARIO', getCookie('cod_usuario'));

              let sqlReplaceByFilter = sqlReplaced;

              for (let x = 0; x < filtros.length; x++) {
                const filtro = filtros[x];
                if (filtro.data) {
                  if ($('#' + filtro.component).val() != '') {
                    sqlReplaceByFilter = sqlReplaceByFilter.replaceAll(':' + filtro.name, formataDataComPonto($('#' + filtro.component).val()));
                  } else {
                    sqlReplaceByFilter = sqlReplaceByFilter.replaceAll(':' + filtro.name, "''");
                  }
                } else if ($('#' + filtro.component).val() != '') {
                  if ($('#' + filtro.component).is('select')) {
                    sqlReplaceByFilter = sqlReplaceByFilter.replaceAll(':' + filtro.name, await formataListas($('#' + filtro.component).val().toString()));
                  } else {
                    sqlReplaceByFilter = sqlReplaceByFilter.replaceAll(':' + filtro.name, $('#' + filtro.component).val());
                  }
                } else {
                  sqlReplaceByFilter = sqlReplaceByFilter.replaceAll(':' + filtro.name, "''");
                }
              }

              dados.data = await rotinaValidarSQL(sqlReplaceByFilter),
                dados.id = dataset.ID,
                dados.nome = dataset.NOME,
                dados.cor = dataset.COR
              arrDados.push(dados);
            }
            return true;

          } catch (error) {
            console.error(error);
            msgErro('Não foi possível buscar os dados dos datasets.');
          }
        } finally {

        }
      }

      const formataDataComPonto = (dt) => {
        if (dt) {
          const [ano, mes, dia] = dt.split('-');
          return `${dia}.${mes}.${ano}`;
        }
        return '';
      }

      async function buscaGraficos(id_dashboard) {
        const _url = `/Sisplan/dashboard/v1/grafico?`;



        const formataDataFiltro = (data) => {
          if (!data) {
            return '';
          }
          const [ano, mes, dia] = data.split('-');
          const dataFormatada = `${dia}/${mes}/${ano}`;
          return dataFormatada;
        };


        try {
          try {
            var response = await requisicao('GET', _url, `ID_DASH=${id_dashboard}`, null, 60000);
            if (!response) {
              return;
            }
            var jsonStr = await response.json();
            if (response.status != 200) {
              msgErro(jsonStr['RESULT'][0].mensagem)
              return;
            }

            // arrGraficos.splice(0, arrGraficos.length);

            for (let i = 0; i < jsonStr.length; i++) {
              const grafico = jsonStr[i];
              grafico.DATASET = grafico.DATASET.replace('\r\n', '');
              const arrDataSets = grafico.DATASET.split(', ');
              grafico.DATASET_INFO = [];
              arrDataSets.forEach(element => {
                const nome_dataset = arrDados.find(dado => dado.id == element).nome;
                grafico.DATASET_INFO.push(nome_dataset);
              });

              if ((i == 0) && (filtros.length > 0)) { // primeiro gráfico
                // const htmlFiltros = `<h2>Filtros Utilizados</h2>`
                // $('#conteudo').append(htmlFiltros);
                var htmlFiltros = `<div class="col-12">`;
                htmlFiltros += `      <div class="card">`;
                htmlFiltros += `         <div class="card-header bg-info">`;
                htmlFiltros += `            <h4 class="card-title"> Filtros Utilizados </h4>`;
                htmlFiltros += `         </div>`;
                htmlFiltros += `         <div class="card-body">`;
                for (let y = 0; y < filtros.length; y++) {
                  const filtro = filtros[y];
                  if ($('#' + filtro.component).val() == '') {
                    continue;
                  }
                  const label = filtro.label;
                  const value = $('#' + filtro.component).attr('type') == 'date' ? formataDataFiltro($('#' + filtro.component).val()) : $('#' + filtro.component).val();
                  htmlFiltros += `<div class="d-flex col-12">` +
                    `<p class="mr-2 mb-0"> ${label}</p>` +
                    `<p class="mb-0"> ${value} </p>` +
                    `</div>`;
                }
                htmlFiltros += `</div>`; // card-body
                htmlFiltros += `</div>`; // card
                htmlFiltros += `</div>`; // div inicial
                $('#conteudo').append(htmlFiltros);
              }

              switch (grafico.TIPO) {
                case 0:
                  await criaCard(grafico);
                  break;
                case 1:
                  await criaGrafico(grafico);
                  break;
                case 2:
                  await criaGrafico(grafico);
                  break;
                case 3:
                  await criaGrafico(grafico);
                  break;
                case 4:
                  await criaGrafico(grafico);
                  break;
                case 5:
                  await criaGrafico(grafico);
                  break;
                case 6:
                  await criaGrafico(grafico);
                  break;
                case 7:
                  await criaGrafico(grafico);
                  break;
                default:
                  break;
              }
              arrGraficos.push(grafico);
            }

          } catch (error) {
            console.error(error);
            msgErro('Não foi possível buscar os dados dos gráficos.');
          }
        } finally {

        }
      }

      async function incrementaContador() {
        contadorGrafico++;
      }

      async function converteProporcaoEmTamanhoBootstrap(proporcao) {
        return parseInt(proporcao) * 2;
      }

      async function ajustaDadosDataSetMultiSerie(dados, totalDataSets) {
        function ordenaArray(array) {
          array.sort((a, b) => {
            if (a[2] > b[2]) {
              return 1;
            }
            if (a[2] < b[2]) {
              return -1;
            }
            return 0;
          })
        }

        const concatenacao = _.union(...dados);
        const arrConcatenado = concatenacao;
        ordenaArray(arrConcatenado);
        let arrNovoArray = [];
        for (let i = 0; i < arrConcatenado.length; i++) {
          const arrSeparado = arrConcatenado[i];
          const arrControleEixo = [];
          for (let y = 0; y < totalDataSets; y++) {
            const arrDadosAtual = dados[y];
            if (arrControleEixo.length == 0) {
              arrControleEixo.push(arrSeparado[0]);
            }
            const iPosicaoAtual = arrDadosAtual.findIndex(obj => {
              return obj[0] == arrSeparado[0];
            });
            if (iPosicaoAtual == -1) {
              arrControleEixo.push(0);
            } else {
              arrControleEixo.push(arrDadosAtual[iPosicaoAtual][1]);
            }
          }
          const iPosicaoNovoArray = arrNovoArray.findIndex(obj => {
            return obj[0] == arrSeparado[0];
          });

          if (iPosicaoNovoArray == -1) {
            arrNovoArray.push(arrControleEixo);
          }
        }
        arrNovoArray = _.groupBy(arrNovoArray, 0);
        arrNovoArray = _.map(arrNovoArray);
        return arrNovoArray;
      };

      async function utilizaGoogleCharts(dados, grafico) {
        const ordemDecrescente = grafico.TIPO_ORDENACAO == 0;
        const semOrdenacao = grafico.TIPO_ORDENACAO == -1;
        const tipoApresentacaoMonetario = grafico.TIPO_APRESENTACAO == 2;
        const tipoEhColuna = grafico.TIPO == 2;
        const tipoEhBarra = grafico.TIPO == 1;
        const tipoEhLinha = grafico.TIPO == 3;
        const tipoEhPizza = grafico.TIPO == 4;
        const formatoValor = tipoApresentacaoMonetario ? 'currency' : 'decimal';
        const tamCard = grafico.TAM_CARD != '' ? grafico.TAM_CARD.trim() : '250';
        google.charts.setOnLoadCallback(drawChart);

        async function drawChart() {
          const arrDadosDataSets = [];
          const data = new google.visualization.DataTable();
          for (let i = 0; i < dados.length; i++) {
            const regAgrupados = [];
            const dataset = dados[i]; // numero de datasets
            for (let y = 0; y < dataset.length; y++) {
              let totGrupo = 0;
              const registros = dataset[y]; // array de registros por dataset
              for (let z = 0; z < registros.length; z++) {
                totGrupo += registros[z][grafico.VALOR];
                if (z == registros.length - 1) {
                  regAgrupados.push([String(registros[z][grafico.EIXO]), totGrupo, registros[z][grafico.CAMPO_ORDENACAO]]);
                }
              }
            }
            arrDadosDataSets.push(regAgrupados);
          }

          if (arrDadosDataSets.length > 1) {
            const arrTeste = await ajustaDadosDataSetMultiSerie(arrDadosDataSets, grafico.DATASET_INFO.length);
            let novoArray = [];
            const arrDadosFinais = [];

            data.addColumn('string', grafico.EIXO);
            for (let i = 0; i < arrDadosDataSets.length; i++) {
              data.addColumn('number', grafico.DATASET_INFO[i]);
            }
            novoArray = arrTeste;

            for (let i = 0; i < novoArray.length; i++) {
              const dataNovoArray = novoArray[i];
              const arrDadosAtuais = [];
              for (let y = 0; y < dataNovoArray.length; y++) {
                const registro = dataNovoArray[y];
                for (let z = 0; z < registro.length; z++) {
                  if (!((y != 0) && (z == 0))) { //nao repetir a legenda do dataset...
                    const dadoReg = registro[z];
                    arrDadosAtuais.push(dadoReg);
                  }
                }
              }
              while (arrDadosAtuais.length - 1 < grafico.DATASET_INFO.length) {
                arrDadosAtuais.push(0);
              }
              arrDadosFinais.push(arrDadosAtuais);
            }
            data.addRows(arrDadosFinais);
          } else {
            data.addColumn('string', grafico.EIXO);
            data.addColumn('number', grafico.VALOR);
            if (tipoEhColuna || tipoEhBarra || tipoEhLinha || tipoEhPizza) {
              if (!semOrdenacao && ordemDecrescente) {
                arrDadosDataSets[0] = _.sortBy(arrDadosDataSets[0], 1).reverse();
              } else if (!semOrdenacao) {
                arrDadosDataSets[0] = _.sortBy(arrDadosDataSets[0], 1);
              }
            }

            if (grafico.MAX_REGISTROS > 0) {
              arrDadosDataSets[0].splice(grafico.MAX_REGISTROS, arrDadosDataSets[0].length);
            }
            arrDadosDataSets[0].map((dataset) => {
              dataset.splice(2, 1);
            });
            data.addRows(arrDadosDataSets[0]);
          }

          const view = new google.visualization.DataView(data);
          const options = {
            pieHole: grafico.TIPO == 5 ? 0.5 : 0,
            displayAnnotations: true,
            'backgroundColor': 'none',
            'width': '100%',
            'height': tamCard,
            'titleTextStyle': {
              color: '#FFF',
              fontSize: '15',
              fontName: '"Arial"'
            },
            'hAxis': {
              textStyle: {
                color: $('html').hasClass('theme-light') ? '#000000' : '#ffffff'
              },
              title: tipoEhColuna ? grafico.EIXO : grafico.VALOR,
              titleTextStyle: {
                color: '#FFF',
                fontSize: '15',
                fontName: '"Arial"'
              },
              color: 'red'
            },
            // legend: 'none',
            legend: {
              textStyle: {
                color: $('html').hasClass('theme-light') ? '#000000' : '#ffffff'
              }
            },
            'vAxis': {
              format: formatoValor,
              textStyle: {
                color: $('html').hasClass('theme-light') ? '#000000' : '#ffffff'
              },
              title: tipoEhColuna ? grafico.VALOR : grafico.EIXO,
              titleTextStyle: {
                color: '#FFF',
                fontSize: '15',
                fontName: '"Arial"'
              }
            },
            // colors: ['#1055A3'],
            annotations: {
              textStyle: {
                color: $('html').hasClass('theme-light') ? '#000000' : '#ffffff',
              }
            }
          };

          function retornaChart(tipoGrafico) {
            const tipoEhColuna = tipoGrafico == 2;
            const tipoEhBarra = tipoGrafico == 1;
            const tipoEhLinha = tipoGrafico == 3;
            const tipoEhPizza = tipoGrafico == 4;
            const tipoEhRosca = tipoGrafico == 5;
            if (tipoEhColuna) {
              return new google.visualization.ColumnChart(document.getElementById(`graf-${contadorGrafico}`));
            } else
            if (tipoEhBarra) {
              return new google.visualization.BarChart(document.getElementById(`graf-${contadorGrafico}`));
            } else
            if (tipoEhLinha) {
              return new google.visualization.LineChart(document.getElementById(`graf-${contadorGrafico}`));
            } else
            if (tipoEhPizza) {
              return new google.visualization.PieChart(document.getElementById(`graf-${contadorGrafico}`));
            } else
            if (tipoEhRosca) {
              return new google.visualization.PieChart(document.getElementById(`graf-${contadorGrafico}`));
            }
          }

          const chart = retornaChart(grafico.TIPO);
          chart.draw(view, options);
          $(window).resize(function() {
            chart.draw(view, options);
          });
        }
      }

      function retornaIdEstado(estado) {
        const lista = {
          "PR": "016",
          "SP": "025",
          "MG": "013",
          "ES": "008",
          "RJ": "019",
          "MS": "012",
          "SC": "024",
          "BA": "005",
          "RS": "021",
          "MT": "011",
          "GO": "009",
          "PA": "014",
          "RO": "022",
          "CE": "006",
          "PE": "017",
          "AC": "001",
          "MA": "010",
          "TO": "027",
          "DF": "007",
          "AM": "004",
          "AL": "002",
          "AP": "003",
          "PB": "015",
          "RR": "023",
          "PI": "018",
          "RN": "020",
          "SE": "026"
        }
        return lista[estado];
      }


      async function utilizaSyncFusionCharts(dados, grafico) {
        let minValue = 0;
        let maxValue = 0;
        const tamCard = grafico.TAM_CARD != '' ? grafico.TAM_CARD.trim() : '450';
        const listaDados = dados[0].map(
          dado => {
            return dado[0];
          });

        const dadosSeparados = {};

        listaDados.forEach(item => {
          const {
            CODIGO_ESTADO,
            CODIGO_CIDADE
          } = item;

          if (!dadosSeparados[CODIGO_ESTADO]) {
            dadosSeparados[CODIGO_ESTADO] = [];
          }

          dadosSeparados[CODIGO_ESTADO].push({
            sigla: CODIGO_ESTADO,
            id: CODIGO_CIDADE,
            value: item[grafico.VALOR]
          });
        });

        const listaEstadosCidade = [];
        const listaPorCidade = listaDados.reduce((agrupado, item) => {
          const cidadeExistente = agrupado.find((estado) => estado.sigla === item.CODIGO_ESTADO & estado.id === item.CODIGO_CIDADE);

          if (cidadeExistente) {
            cidadeExistente.value += item[grafico.VALOR];
          } else {
            agrupado.push({
              sigla: item.CODIGO_ESTADO,
              value: item[grafico.VALOR],
              id: item.CODIGO_CIDADE
            });
          }
          return agrupado;
        }, []);

        const listaPorEstado = listaDados.reduce((agrupado, item) => {
          const estadoExistente = agrupado.find((estado) => estado.sigla === item.CODIGO_ESTADO);

          if (estadoExistente) {
            estadoExistente.value += item[grafico.VALOR];
          } else {
            agrupado.push({
              sigla: item.CODIGO_ESTADO,
              value: item[grafico.VALOR],
              id: retornaIdEstado(item.CODIGO_ESTADO)
            });
          }

          return agrupado;
        }, []);

        listaPorEstado.map(result => {
          if (result.value > maxValue) {
            maxValue = result.value
          }
          return result;
        });

        for (let i = 0; i < Object.keys(dadosSeparados).length; i++) {
          const estado = Object.keys(dadosSeparados)[i];
          const cidades = dadosSeparados[estado];
          this['grafico' + grafico.ID + estado] = cidades;
          // console.log(estado, cidades);
        }

        // this['grafico'+ grafico.ID+'_objeto']= listaPorEstado;
        this['grafico' + grafico.ID + '_objeto'] = {
          id: grafico.ID,
          nome: grafico.NOME,
          min: minValue,
          max: maxValue,
          dados: listaPorEstado
        }

        var graficoChart = new FusionCharts({
          type: 'brazil',
          renderAt: document.getElementById(`graf-${contadorGrafico}`),
          width: '95%',
          height: tamCard == '210' ? '350' : tamCard,
          dataFormat: 'json',
          dataSource: {
            colorrange: {
              "minvalue": "0",
              "startlabel": "Poucas vendas",
              "endlabel": "Muitas vendas",
              "code": "#e44a00",
              "gradient": "1",
              "minvalue": minValue,
              "maxValue": maxValue,
              "color": [{
                "maxvalue": minValue,
                "displayvalue": "Araste para mostrar as maiores vendas",
                "code": "#6baa01"
              }, {
                "maxvalue": maxValue,
                "code": "#f8bd19"
              }]
            },
            "chart": {
              "theme": $('html').hasClass('theme-light') ? "fint" : "candy",
              "canvasPadding": "30",
              //"caption": "",                                                                   
              //"subcaption": "",                                                                
              "showMarkerLabels": "0",
              "numberSuffix": "", //Changing connector hover color                               
              "connectorHoverColor": "#f8bd19", //Changing connector hover thickness             
              "connectorHoverThickness": "3", //Enabling entity hover effect                     
              //Enabling marker hover effect                                                     
              "showMarkerHoverEffect": "1", //Changing marker fill color on hover                
              "markerFillHoverColor": "#cccccc",
              "entityFillHoverColor": "#000",
              "entityFillHoverAlpha": "30",
              "showLabels": "1",
              "formatNumberScale": "10",
              "decimalSeparator": ",",
              "thousandSeparator": "."
            },

            "data": listaPorEstado
          },
          "events": {
            "entityClick": function(evt, data) {
              if (data.value) {
                ShowMap(data.label, grafico.ID, grafico.NOME + ' - ' + data.label, minValue, maxValue);
              }
            }
          }
        }).render();
      }

      async function utilizaApexCharts(dados, grafico) {
        const ordemDecrescente = grafico.TIPO_ORDENACAO == 0;
        const semOrdenacao = grafico.TIPO_ORDENACAO == -1;
        const tipoApresentacaoMonetario = grafico.TIPO_APRESENTACAO == 2;
        const tipoEhBarra = grafico.TIPO == 1;
        const tipoEhColuna = grafico.TIPO == 2;
        const tipoEhLinha = grafico.TIPO == 3;
        const tipoEhPizza = grafico.TIPO == 4;
        const tipoEhRosca = grafico.TIPO == 5;
        const tamCard = grafico.TAM_CARD != '' ? grafico.TAM_CARD.trim() : '350';

        let tipoGrafico = '';
        if (tipoEhColuna) {
          tipoGrafico = 'bar'
        } else if (tipoEhBarra) {
          tipoGrafico = 'bar'
        } else if (tipoEhLinha) {
          tipoGrafico = 'line'
        } else if (tipoEhPizza) {
          tipoGrafico = 'pie'
        } else if (tipoEhRosca) {
          tipoGrafico = 'donut'
        }

        const formatoValor = tipoApresentacaoMonetario ? 'currency' : 'decimal';
        let categories = [];
        let series = [];
        // google.charts.setOnLoadCallback(drawChart);


        const arrDadosDataSets = [];
        const data = new google.visualization.DataTable();
        for (let i = 0; i < dados.length; i++) {
          const regAgrupados = [];
          const dataset = dados[i]; // numero de datasets
          for (let y = 0; y < dataset.length; y++) {
            let totGrupo = 0;
            const registros = dataset[y]; // array de registros por dataset
            for (let z = 0; z < registros.length; z++) {
              totGrupo += registros[z][grafico.VALOR];
              if (z == registros.length - 1) {
                regAgrupados.push([String(registros[z][grafico.EIXO]), totGrupo, registros[z][grafico.CAMPO_ORDENACAO]]);
              }
            }
          }
          arrDadosDataSets.push(regAgrupados);
        }


        for (let i = 0; i < arrDadosDataSets.length; i++) {
          series.push({
            name: grafico.DATASET_INFO[i],
            data: []
          });
        }


        if (arrDadosDataSets.length > 1) {
          const arrTeste = await ajustaDadosDataSetMultiSerie(arrDadosDataSets, grafico.DATASET_INFO.length);
          let novoArray = [];
          const arrDadosFinais = [];

          // data.addColumn('string', grafico.EIXO);

          novoArray = arrTeste;

          for (let i = 0; i < novoArray.length; i++) {
            const dataNovoArray = novoArray[i];
            const arrDadosAtuais = [];
            for (let y = 0; y < dataNovoArray.length; y++) {
              const registro = dataNovoArray[y];
              for (let z = 0; z < registro.length; z++) {
                if (!((y != 0) && (z == 0))) { //nao repetir a legenda do dataset...
                  const dadoReg = registro[z];
                  arrDadosAtuais.push(dadoReg);
                }
              }
            }
            while (arrDadosAtuais.length - 1 < grafico.DATASET_INFO.length) {
              arrDadosAtuais.push(0);
            }
            arrDadosFinais.push(arrDadosAtuais);
          }
          for (let i = 0; i < arrDadosFinais.length; i++) {
            categories.push(arrDadosFinais[i][0]);

            for (let y = 1; y < arrDadosFinais[i].length; y++) {
              series[y - 1].data.push(parseFloat(arrDadosFinais[i][y]).toFixed(2));
            }
          }
        } else {
          // data.addColumn('string', grafico.EIXO);
          // data.addColumn('number', grafico.VALOR);
          if (tipoEhColuna || tipoEhBarra || tipoEhLinha) {
            if (!semOrdenacao && ordemDecrescente) {
              arrDadosDataSets[0] = _.sortBy(arrDadosDataSets[0], 1).reverse();
            } else if (!semOrdenacao) {
              arrDadosDataSets[0] = _.sortBy(arrDadosDataSets[0], 1);
            }
          }

          if (grafico.MAX_REGISTROS > 0) {
            arrDadosDataSets[0].splice(grafico.MAX_REGISTROS, arrDadosDataSets[0].length);
          }
          arrDadosDataSets[0].map((dataset) => {
            dataset.splice(2, 1);
          });
          // data.addRows(arrDadosDataSets[0]);
          for (let i = 0; i < arrDadosDataSets[0].length; i++) {
            categories.push(arrDadosDataSets[0][i][0]);
            series[0].data.push(parseFloat(arrDadosDataSets[0][i][1]).toFixed(2));
          }
        }

        let colors = [];

        dados.map(item => {
          if (item.cor != '') {
            colors.push(item.cor);
          }
        });

        if (colors.length == 0) {
          colors = ["#940000", "#00478f"];
          if (grafico.DATASET.split(',').length > 1) {
            const cor1 = arrDados.findIndex(gf => gf.id == Number(grafico.DATASET.split(',')[0].trim()));
            const cor2 = arrDados.findIndex(gf => gf.id == Number(grafico.DATASET.split(',')[1].trim()));

            if ((cor1 != -1) && (arrDados[cor1].cor != '')) {
              colors[0] = arrDados[cor1].cor
            };
            if ((cor2 != -1) && (arrDados[cor2].cor != '')) {
              colors[1] = arrDados[cor2].cor
            };
          } else {
            const corGrafico = arrDados.findIndex(gf => gf.id == Number(grafico.DATASET.trim()));
            if ((corGrafico != -1) && arrDados[corGrafico].cor != '') {
              colors[0] = arrDados[corGrafico].cor;
            }
          }
        }

        const deveMostrarLabel = ((arrDadosDataSets.map(dataset => dataset.length).filter(data => data > 30).length == 0) || (tipoEhLinha));
        let options = '';
        if ((tipoEhPizza) || (tipoEhRosca)) {
          options = {
            series: series[0].data.map(serie => Number(serie)),
            chart: {
              type: tipoGrafico,
              width: '100%'
            },
            labels: categories,
            plotOptions: {
              pie: {
                size: '100%'
              }
            }

            // responsive: [{
            //   breakpoint: 480,
            //   options: {
            //     chart: {
            //       width: 400
            //     },
            //     legend: {
            //       position: 'bottom'
            //     }
            //   }
            // }]
          };

        } else {
          options = {
            series: series,
            colors: colors,
            stroke: {
              width: tipoEhColuna || tipoEhBarra ? 2 : 5
            },
            fill: {
              type: 'gradient',
              gradient: {
                shade: 'dark',
                type: 'vertical',
                shadeIntensity: tipoEhColuna || tipoEhBarra ? 0.5 : 0,
                inverseColors: false,
                opacityFrom: 1,
                opacityTo: $('html').hasClass('theme-light') ? 1 : 0.8,
                stops: [0, 100]
              }
            },
            grid: {
              show: true,
              strokeDashArray: 0,
              borderColor: '#cfcfcf60',
            },
            chart: {
              type: tipoGrafico,
              height: tamCard == '210' ? '350' : tamCard,
              zoom: {
                enabled: true,
                type: 'x',
                autoScaleYaxis: false,
                zoomedArea: {
                  fill: {
                    color: '#90CAF9',
                    opacity: 0.4
                  },
                  stroke: {
                    color: '#0D47A1',
                    opacity: 0.4,
                    width: 1
                  }
                }
              },
              animations: {
                enabled: true,
                easing: 'easeinout',
                speed: 1200,
                animateGradually: {
                  enabled: true,
                  delay: 150
                },
                dynamicAnimation: {
                  enabled: true,
                  speed: 350
                }
              },
            },
            plotOptions: {
              bar: {
                horizontal: !tipoEhColuna,
                borderRadius: 4,
                dataLabels: {
                  orientation: tipoEhColuna ? 'vertical' : 'horizontal',
                  position: 'center' // bottom/center/top
                }
              }
            },
            dataLabels: {
              enabled: deveMostrarLabel,
              // dropShadow: {
              //   enabled: true
              // },
              style: {
                fontSize: '12px',
                fontFamily: 'Helvetica, Arial, sans-serif',
                colors: [tipoEhColuna || tipoEhBarra ? '#fff' : '#000000']
              },
              formatter: function(val) {
                const tipoApresentacaoDecimal = grafico.TIPO_APRESENTACAO == 1;
                const tipoApresentacaoMonetario = grafico.TIPO_APRESENTACAO == 2;
                if (tipoApresentacaoDecimal) {
                  return new Intl.NumberFormat('pt-BR').format(val);
                } else if (tipoApresentacaoMonetario) {
                  return new Intl.NumberFormat('pt-BR').format(val);
                  // return new Intl.NumberFormat('pt-BR', {
                  //   style: 'currency',
                  //   currency: 'BRL'
                  // }).format(val);
                } else {
                  return val;
                }
              },
            },
            xaxis: {
              categories: categories,
              tickPlacement: 'between'
            },
            tooltip: {
              y: {
                formatter: function(val) {
                  const tipoApresentacaoDecimal = grafico.TIPO_APRESENTACAO == 1;
                  const tipoApresentacaoMonetario = grafico.TIPO_APRESENTACAO == 2;
                  if (tipoApresentacaoDecimal) {
                    return new Intl.NumberFormat('pt-BR').format(val);
                  } else if (tipoApresentacaoMonetario) {
                    return new Intl.NumberFormat('pt-BR', {
                      style: 'currency',
                      currency: 'BRL'
                    }).format(val);
                  } else {
                    return val;
                  }
                },
              }
            },
            yaxis: {
              labels: {
                formatter: function(value) {
                  return value;
                }
              },
            },
          };

          if (grafico.VALOR_FIXO_META ?? 0 > 0) {
            options.annotations = {
              yaxis: [{
                y: grafico.VALOR_FIXO_META,
                borderColor: '#7d7d7d',
                strokeDashArray: 6,
                label: {
                  text: grafico.VALOR_FIXO_META.toLocaleString('pt-BR', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                  }),
                  textAnchor: 'end',
                  position: 'right',
                  offsetX: 0,
                  offsetY: 0,
                  borderColor: 'transparent',
                  style: {
                    background: 'transparent',
                    color: '#fff',
                    fontSize: '12px',
                    fontWeight: 600,
                    padding: {
                      left: 6,
                      right: 6,
                      top: 3,
                      bottom: 3
                    }
                  }
                }
              }]
            }

            options.tooltip = {
              shared: true,
              intersect: false,
              custom: function({
                series,
                dataPointIndex,
                w
              }) {
                const categoria = categories[dataPointIndex];

                const cores = colors;
                const nomesSeries = series.map(s => s.name);

                const rows = nomesSeries.map((nome, index) => {
                  const valor = series[index][dataPointIndex].toLocaleString('pt-BR', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                  });//series[index][dataPointIndex];
                  const nomeCerto = grafico.DATASET_INFO[index];

                  return `
                    <div class="tt-row">
                      <div class="tt-left">
                        <span class="dot" style="background:${cores[index]}"></span>
                        <span>${nomeCerto}</span>
                      </div>
                      <span class="value">${valor ?? '-'}</span>
                    </div>
                  `;
                }).join('');

                return `
                <div class="custom-tooltip">
                  <div class="tt-title">${categoria}</div>

                  ${rows}

                  <div class="tt-row">
                    <div class="tt-left">
                      <span class="meta-dot"></span>
                      <span>Meta</span>
                    </div>
                    <span class="value">${grafico.VALOR_FIXO_META.toLocaleString('pt-BR', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                  })}</span>
                  </div>
                </div>
              `;
              }
            }

          }
        }

        // const idUnico = gerarGuid();
        $(`#graf-${contadorGrafico}`).html('');

        var chart = new ApexCharts(document.getElementById(`graf-${contadorGrafico}`), options);
        chart.render();
        setTimeout(() => {
          chartsToDestroy.push(chart);
        }, 1000);
      }

      async function criaGrafico(grafico) {
        const TOTAL_GRAFICO_NAO_UTILIZADO = 0;
        const dadosGraf = await montaDadosGrafico(grafico);
        const tam = await converteProporcaoEmTamanhoBootstrap(grafico.PROPORCAO);
        await incrementaContador();
        await insereGraficoNoPainel(TOTAL_GRAFICO_NAO_UTILIZADO, grafico, tam);
        if ([4, 5].includes(grafico.TIPO)) {
          await utilizaGoogleCharts(dadosGraf, grafico);
        } else if (grafico.TIPO == 7) {
          await utilizaSyncFusionCharts(dadosGraf, grafico);
        } else if (grafico.TIPO != 6) {
          // await utilizaGoogleCharts(dadosGraf, grafico);
          await utilizaApexCharts(dadosGraf, grafico);
        } else {
          await criaGrid(dadosGraf, grafico);
        }
      }


      async function criaGrid(dados, grafico) {
        const ordemDecrescente = grafico.TIPO_ORDENACAO == 0;
        const semOrdenacao = grafico.TIPO_ORDENACAO == -1;
        const tipoApresentacaoInteiro = grafico.TIPO_APRESENTACAO == 0;
        const tipoApresentacaoDecimal = grafico.TIPO_APRESENTACAO == 1;
        const tipoApresentacaoMonetario = grafico.TIPO_APRESENTACAO == 2;
        const formatoValor = tipoApresentacaoMonetario ? 'currency' : 'decimal';
        const local = $(`#graf-${contadorGrafico}`);
        const keys = grafico.EIXO.replaceAll(' ', '').split(',')
        const dataSetCols = [];
        const tamFonte = grafico.TAM_FONTE != '' ? grafico.TAM_FONTE.trim() + 'px' : '15px';
        const tamCard = grafico.TAM_CARD != '' ? grafico.TAM_CARD.trim() + 'px' : '210px';

        for (var k in keys) {
          dataSetCols.push({
            'title': keys[k].toUpperCase(),
            'data': keys[k]
          });
        }
        local.html(`<div style="font-size: ${tamFonte}; text-align: center" class="table-responsive p-2"><table width="100%" style="width: 100%" class="table table-sm" id="tabela-${contadorGrafico}"><thead></thead><tbody></tbody></table></div>`)
        criaDataTablePadrao(`#tabela-${contadorGrafico}`, false, false, false, false, true, true, tamCard, dados[0][0], dataSetCols, []);
        $(`#tabela-${contadorGrafico}`).DataTable().columns.adjust().draw(false);

      }

      async function somaRegistros(dados, grafico) {
        let totGrupo = 0;
        for (let i = 0; i < dados.length; i++) {
          const grupos = dados[i];
          for (let y = 0; y < grupos.length; y++) {
            const registro = grupos[y];
            totGrupo += registro[grafico.VALOR];
          }
        }
        return totGrupo;
      }

      async function mediaRegistros(dados, grafico) {
        let totGrupo = 0;
        for (let i = 0; i < dados.length; i++) {
          const grupos = dados[i];
          for (let y = 0; y < grupos.length; y++) {
            const registro = grupos[y];
            totGrupo += registro[grafico.VALOR];
          }
        }
        return totGrupo / dados.length;
      }

      async function maximoRegistros(dados, grafico) {
        let totGrupo = 0;
        for (let i = 0; i < dados.length; i++) {
          const grupos = dados[i];
          for (let y = 0; y < grupos.length; y++) {
            const registro = grupos[y];
            if (totGrupo < registro[grafico.VALOR]) {
              totGrupo = registro[grafico.VALOR];
            }
          }
        }
        return totGrupo;
      }

      async function minimoRegistros(dados, grafico) {
        let totGrupo = 0;
        for (let i = 0; i < dados.length; i++) {
          const grupos = dados[i];
          for (let y = 0; y < grupos.length; y++) {
            const registro = grupos[y];
            if (totGrupo == 0 || totGrupo > registro[grafico.VALOR]) {
              totGrupo = registro[grafico.VALOR];
            }
          }
        }
        return totGrupo;
      }

      async function contaRegistros(grafico) {
        const indice = parseInt(grafico.DATASET.split(', ')[0]);
        return arrDados.find(dado => dado.id == indice).data.length;
      }

      async function retornaHtmlCard(total, grafico, tam) {
        const tipoApresentacaoInteiro = grafico.TIPO_APRESENTACAO == 0;
        const tipoApresentacaoDecimal = grafico.TIPO_APRESENTACAO == 1;
        const tipoApresentacaoMonetario = grafico.TIPO_APRESENTACAO == 2;
        const tamCard = grafico.TAM_CARD != '' ? grafico.TAM_CARD.trim() : '350';

        let valorFormatado;
        if (tipoApresentacaoInteiro) {
          valorFormatado = parseInt(total)
        } else if (tipoApresentacaoDecimal) {
          valorFormatado = total.toLocaleString('pt-BR')
        } else if (tipoApresentacaoMonetario) {
          valorFormatado = 'R$ ' + total.toLocaleString('pt-BR')
        } else {
          valorFormatado = total;
        }

        const textoValor = (grafico.TEXTO_VALOR != '' && grafico.TEXTO_VALOR != '<p><br></p>') ? grafico.TEXTO_VALOR.replace('#VALOR', valorFormatado) : valorFormatado;

        let background = '';

        const corGradiente = grafico.GRADIENTE != '' ? grafico.GRADIENTE : '';
        if (corGradiente) {
          background = `linear-gradient(90deg, ${grafico.GRADIENTE.split(' ')[0]} 0%, ${grafico.GRADIENTE.split(' ')[1]} 100%);`;
        } else {
          background = grafico.COR;
        }


        const html = `<div class="col-lg-${tam}" title="${grafico.HINT}" col-12 animate__animated animate__fadeIn" id="card-${contadorGrafico}" style="color: var(--white) !important;">
                        <div class="small-box ${(background) ? '' : 'bg-info'}" ${background ? `style="background: ${background} ${tamCard != '350' ? ';min-height: '+tamCard+'px;display: flex; flex-direction: column' : ''}"` : `${tamCard != '350' ? 'min-height: '+tamCard+'px;display: flex; flex-direction: column' : ''}`}>
                          <div class="inner" style="flex: 1">
                            <h3>${textoValor}</h3>
                            <p>${grafico.NOME}</p>
                          </div>
                          <div class="icon">
                            <i class="${grafico.ICONE}"></i>
                          </div>
                          <a href="" id="info-${contadorGrafico}" class="small-box-footer">Mais Informações 
                            <i class="fas fa-arrow-circle-right"></i>
                          </a>
                        </div>
                      </div>`;
        return html;
      }

      async function retornaHtmlGraficoBarraEColuna(total, grafico, tam) {
        const telaToda = [4, 5, 6].includes(grafico.TIPO) ? 'height: 96%' : '';
        const styleGraficoMapa = grafico.TIPO == '7' ? `display: flex; justify-content: center;` : '';
        const btnExpandir = [7].includes(grafico.TIPO) ? `<button type="button" class="btn btn-tool btn-expandir" data-id-grafico="${grafico.ID}">
                                  <i class="fas fa-expand-arrows-alt"></i>
                                </button>` : '';
        const html = `<div class="col-lg-${tam} col-12 animate__animated animate__fadeIn">
                            <div class="card" style="${telaToda}">
                              <div class="card-header bg-info">
                                <h3 class="card-title">${grafico.NOME}</h3>

                                <div class="card-tools">
                                ${btnExpandir}
                                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                  </button>
                                </div>
                              </div>
                              <div class="card-body">
                                <div id="graf-${contadorGrafico}" style="${styleGraficoMapa}">
                                </div>
                              </div>
                            </div>
                          </div> `;
        return html;
      }

      async function MostraModalInfo(grafico, dados) {
        if (!dados || dados.length === 0) {
          return;
        }
        var keys = Object.keys(dados[0]);
        let dataSetCols = [];
        for (var k in keys) {
          dataSetCols.push({
            'title': keys[k],
            'data': keys[k]
          });
        }
        const htmlTable =
          `<table width="100%" style="width:100%" id="table-info-card" class="table table-sm table-condensed table-select table-hover"></table>`
        $('#modal-info-table').html(htmlTable);
        $('#modal-info-title').html(grafico.NOME);
        $('#table-info-card').DataTable({
          paging: true,
          filter: false,
          info: true,
          order: true,
          destroy: true,
          autowidth: true,
          dom: 'Bfrtip',
          buttons: [{
              "extend": 'excel',
              "text": 'Exportar Excel',
              "className": 'btn btn-primary btn-sm btn-sisp',
              "title": `Dashboard - ${grafico.NOME}`
            },
            {
              alignment: "center",
              "extend": 'pdf',
              "text": 'Exportar PDF',
              "className": 'btn btn-secondary btn-sm btn-sisp',
              customize: function(doc) {
                doc.styles.tableBodyEven.alignment = 'center';
                doc.styles.tableBodyOdd.alignment = 'center';
                doc.content[1].table.widths =
                  Array(doc.content[1].table.body[0].length + 1).join('*').split('');
              },
              "title": `Dashboard - ${grafico.NOME}`
            }
          ],
          "data": dados,
          "columns": dataSetCols
        });

        $('#modal-info').modal('show');
        $('#table-info-card').DataTable().columns.adjust().draw(false);

      }

      async function insereGraficoNoPainel(total, grafico, tam) {
        const [graficoTipoCard, graficoTipoBarra, graficoTipoColuna] = [grafico.TIPO == 0, grafico.TIPO == 1,
          grafico.TIPO == 2
        ];
        const html = graficoTipoCard ? await retornaHtmlCard(total, grafico, tam) :
          await retornaHtmlGraficoBarraEColuna(total, grafico, tam);
        $('.btn-expandir').off();
        $('.btn-expandir').on('click', function() {
          expandirModal($(this).attr('data-id-grafico'));
        });
        $('#conteudo').append(html);
        if (graficoTipoCard) {
          $(`#info-${contadorGrafico}`).on('click', async function() {
            window.event.preventDefault();
            const id = parseInt($(this).attr('id').split('-')[1]);
            const grafico = arrGraficos[id - 1];
            const dados = arrDados.find(dado => dado.id == grafico.DATASET.split(', ')[0]);
            await MostraModalInfo(grafico, dados.data);
            return;
          });
        }
      }

      async function criaCard(grafico) {
        const [tipoValorSoma, tipoValorMedia, tipoValorMaximo, tipoValorMinimo, tipoValorContagem,
          tipoValorContagemDistinta
        ] = [grafico.TIPO_VALOR == 0, grafico.TIPO_VALOR == 1, grafico.TIPO_VALOR == 2, grafico.TIPO_VALOR ==
          3, grafico.TIPO_VALOR == 4, grafico.TIPO_VALOR == 5
        ];
        const dadosGraf = await montaDadosGrafico(grafico);
        await incrementaContador();
        const tam = await converteProporcaoEmTamanhoBootstrap(grafico.PROPORCAO);
        let total = 0;
        if (tipoValorSoma) {
          total = await somaRegistros(dadosGraf[0], grafico);
        } else
        if (tipoValorContagem || tipoValorContagemDistinta) {
          total = await contaRegistros(grafico);
        } else
        if (tipoValorMedia) {
          total = await mediaRegistros(dadosGraf[0], grafico);
        } else
        if (tipoValorMaximo) {
          total = await maximoRegistros(dadosGraf[0], grafico);
        } else
        if (tipoValorMinimo) {
          total = await minimoRegistros(dadosGraf[0], grafico);
        }
        await insereGraficoNoPainel(total, grafico, tam);
      }

      async function rotinaValidarSQL(sql) {
        const _url = `/sisplan/funcoes/v1/EditorSQL?`;
        try {
          try {
            var response = await requisicao('POST', _url, '',
              `JSON=${encodeURIComponent(sql)}`, null);

            if (!response) {
              return;
            }

            var jsonStr = await response.json();
            if (response.status === 400) {
              msgErro(jsonStr.mensagem);
              return;
            } else
            if (response.status === 202) {
              return [];
            }

            return jsonStr;
          } catch (error) {
            console.error(error);
            msgErro('Erro ao validar sql.');
          }
        } finally {}
      }

      async function criaAviso(sMensagem) {
        if ($('#card-carregando').hasClass('d-none')) {
          await $('#card-carregando').removeClass('d-none');
        }
        await $('#card-carregando h5').html(sMensagem);

      }

      async function destroiAviso() {
        await $('#card-carregando').addClass('d-none');
        await $('#card-carregando h5').html('');
      }

      async function montaDadosGrafico(grafico) {
        const tipoEhCard = grafico.tipo == '0';
        const {
          TIPO: tipo,
          EIXO: eixo,
          VALOR: valor,
          CAMPO_ORDENACAO: ordenacao
        } = grafico;
        const arrDataSets = grafico.DATASET.split(', ');
        let arrRetorno = [];
        arrDataSets.forEach(dataset => {
          const arrayDados = arrDados.find(dado => dado.id == dataset).data;
          let dadosNovos = [];
          dadosNovos = _.sortBy(arrayDados, eixo);
          if (tipoEhCard) {
            dadosNovos = _.groupBy(dadosNovos, ''); //agrupa pelo indice do EIXO
          } else {
            dadosNovos = _.groupBy(dadosNovos, eixo); //agrupa pelo indice do EIXO
          }
          dadosNovos = _.map(dadosNovos); //mapea o objeto como array
          dadosNovos.cor = arrDados.find(dado => dado.id == dataset).cor;
          arrRetorno.push(dadosNovos);
        });
        return arrRetorno;
      }

      // mostrar dashboardas liberados para o usuário
      // auto clicar no primeiro
      // no clique fazer o carregamento dos gráficos/datasets

      async function carregaDashboardCompleto(id_dashboard) {
        try {
          $('#conteudo').html(`<div class="col-sm-12">
              <textarea id="txtSelect" class="d-none" rows="10"></textarea>
              <div id="resultados" class="col-sm-12 table-responsive d-none">
              </div>
            </div>`);
          await buscaDashboard(id_dashboard);
          await buscaFiltros(id_dashboard);
          const todosFiltrosPreenchidos = filtros.filter((filtro) => {
            if ($('#' + filtro.component).val() == '') {
              return true;
            } else {
              return false;
            }
          }).length == 0;
          if ((filtros.length == 0) || (todosFiltrosPreenchidos)) {
            await criaAviso('Carregando Dados');
            await buscaDatasets(id_dashboard);
            await buscaGraficos(id_dashboard);
          }
          listaIntervals = listaIntervals.map(interval => {
            if (interval.id_dashboard == id_dashboard) {
              return {
                ...interval,
                ativo: true
              }
            } else {
              return {
                ...interval,
                ativo: false
              }
            }
          });

        } finally {
          await destroiAviso();
        }
      }

      await buscaGruposDash();
      if (arrGrupos.length == 0) {
        await buscaDashboardsLiberados();
      }
      recuperaTelasFechadas();

      function atualizaPaginaIframe(panel, teste) {
        const src = $($(".content-wrapper.iframe-mode iframe").parent(`#${panel}`)).children().attr("src");
        $($(".content-wrapper.iframe-mode iframe").parent(`#${panel}`)).children().attr("src", src);
      }

      function criaEventoAtualizaPaginaIframe(panel) {
        const observer = new MutationObserver(function(mutationsList) {
          mutationsList.forEach(function(mutation) {
            if (mutation.attributeName === 'class' && mutation.target.id == panel) {
              if (mutation.target.classList.contains('active') && mutation.target.classList.contains('show')) {
                atualizaPaginaIframe(panel, mutation.target.id);
              }
            }
          });
        });

        observer.observe(document.querySelector('.content-wrapper.iframe-mode').querySelector('.tab-content'), {
          attributes: true,
          subtree: true
        });
      }

      criaEventoAtualizaPaginaIframe("panel--sisplan_web-loja");
      criaEventoAtualizaPaginaIframe("panel--loja");
      criaEventoAtualizaPaginaIframe("panel--sisplan_web-nfce");
      criaEventoAtualizaPaginaIframe("panel--nfce");
      criaEventoAtualizaPaginaIframe("panel--sisplan_web-relminuta");
      criaEventoAtualizaPaginaIframe("panel--relminuta");



    });
  </script>
</body>

</html>