<?php
require '../../conexao/conexao.php';
//require '../sessao.php';
require '../../configuacoes.php';
require '../../configuracao/filtros.php';
require '../../configuracao/consulta_banco_dados.php';
require '../../conexao/acesso.php';
require 'consulta_bd.php';
require '../../logs/gera-log.php';

gerarLog(
    1, // tipo de log (acesso)
    $basePath, // módulo
    $_SESSION['CodUsuario'],
    $_SESSION['NomeUsuario']
);

$consulta_bb = new ConsultaBancoDeDados();

$filtros = new Filtros();

$etapa = $_GET['etapa'] ?? null;

$etapas = $consulta_bb->get_etapaFirebird();

$preferancias = new Preferancias();

$tabela = isset($_GET['tabela']) ? $_GET['tabela'] : 'geral';
if ($tabela == 'metricas') {
    $metrica = $preferancias->getMetasVisitadores();
} elseif ($tabela == 'percentual_desconto') {
    $percentual_desconto = $preferancias->get_percentual_desconto();
}

?>

<!DOCTYPE html>
<html lang="pt-br">

<?php
$pageTitle = "Preferências"; // Definir o título da página aqui
include('../header.php');
include('../menu.php');
?>

<head>
    <link rel="icon" href="\KPI\pages/configuracoes/logo-sm.png">
    <link rel="shortcut icon" href="\KPI\pages/configuracoes/logo-sm.png">
</head>

<body>

    <style>
        #addModuloButton {
            background-color: #1351b4;
            color: white;
            border: none;
            margin-left: 18px;
            margin-top: 30px;
            border-radius: 3px;
            width: 37px;
            height: 37px;
            font-size: large;
        }
    </style>

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <div class="wrapper candidato">
        <div class="container-fluid">

            <div class="card-box mt-3">
                <div class="row">

                    <div class="col-6 text-left">
                        <h4 class="page-title">Escolha como sera sua Gestão</h4>
                    </div>


                    <div class="col-12">
                        <hr>
                    </div>
                </div>

                <nav class="mb-4">
                    <ul class=" nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link nvl <?php echo ($tabela == 'geral') ? 'active' : ''; ?>" id="geral-tab" data-toggle="tab" href="#geral" role="tab" aria-controls="geral" aria-selected="<?php echo ($tabela == 'geral') ? 'true' : 'false'; ?>" onclick="updateURL('geral')">Geral</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo ($tabela == 'percentual_desconto') ? 'active' : ''; ?>" id="percentual_desconto-tab" data-toggle="tab" href="#percentual_desconto" role="tab" aria-controls="percentual_desconto" aria-selected="<?php echo ($tabela == 'percentual_desconto') ? 'true' : 'false'; ?>" onclick="updateURL('percentual_desconto')">% Descontos</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link nvl  <?php echo ($tabela == 'metricas') ? 'active' : ''; ?>" id="metricas-tab" data-toggle="tab" href="#metricas" role="tab" aria-controls="metricas" aria-selected="<?php echo ($tabela == 'metricas') ? 'true' : 'false'; ?>" onclick="updateURL('metricas')">Metrícas Quantidade Formula</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link nvl <?php if (isset($_GET['tabela']) and $_GET['tabela'] == 'processos') {
                                                        echo 'active';
                                                    } ?>" id="processos-tab" data-toggle="tab" href="#processos" role="tab" aria-controls="processos" aria-selected="<?php echo ($tabela == 'processos') ? 'true' : 'false'; ?>" onclick="updateURL('processos')">Processos</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link nvl <?php echo ($tabela == 'bancos') ? 'active' : ''; ?>" id="bancos-tab" data-toggle="tab" href="#bancos" role="tab" aria-controls="bancos" aria-selected="<?php echo ($tabela == 'bancos') ? 'true' : 'false'; ?>" onclick="updateURL('bancos')">Bancos</a>
                        </li>

                    </ul>
                </nav>

                <div class="tab-content" id="myTabContent">
                    <?php if ($tabela == 'geral') { ?>
                        <div class="tab-pane fade show active" id="geral" role="tabpanel" aria-labelledby="geral-tab">
                            <div style="display: flex; justify-content: space-between; align-items: center; " class="mb-3">
                                <h6>Tabela de Preferências de Metas</h6>
                            </div>
                            <table id="datatable-geral" class="table table-striped table-bordered dt-responsive nowrap">
                                <thead>
                                    <tr class="text-center">
                                        <th>Nome</th>
                                        <th>Preferência</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Adicione aqui os dados específicos para a aba Geral -->
                                    <?php $resultmeta = $preferancias->get_index_geral();
                                    // Exemplo de dados para a aba Geral
                                    if ($resultmeta) {
                                        foreach ($resultmeta as $row) {
                                            $id = $row['id_configuracoes']; ?>
                                            <tr class="text-center">
                                                <?php if ($row['tipo_meta'] == 'Periodo') { ?>
                                                    <td><b><?php echo 'Período'; ?></b></td>
                                                <?php } elseif ($row['tipo_meta'] == 'Operacao') { ?>
                                                    <td><b><?php echo 'Operação'; ?></b></td>
                                                <?php } else { ?>
                                                    <td><b><?php echo htmlspecialchars($row['tipo_meta']); ?></b></td>
                                                <?php } ?>
                                                <td class="col-6">
                                                    <div class="text-center bt">
                                                        <ul class="text-center nav nav-tabs" id="toggle-nav-<?php echo $id; ?>">
                                                            <li class="nav-item">
                                                                <?php if ($row['tipo_meta'] == 'Periodo') { ?>
                                                                    <a href="#" class="nav-link <?php echo $row['valor1'] == 'Mês' ? 'active' : ''; ?>" data-status="Mês" onclick="toggleMeta(<?php echo $id; ?>, 'Mês'); return false;">Mês</a>
                                                                <?php } ?>
                                                            </li>
                                                            <li class="nav-item ">
                                                                <?php if ($row['tipo_meta'] == 'Periodo') { ?>
                                                                    <a href="#" class="nav-link <?php echo $row['valor1'] == 'Quinzena' ? 'active' : ''; ?>" data-status="Quinzena" onclick="toggleMeta(<?php echo $id; ?>, 'Quinzena'); return false;">Quinzena</a>
                                                                <?php  } ?>
                                                            </li>
                                                            <li class="nav-item ">
                                                                <?php if ($row['tipo_meta'] == 'Periodo') { ?>
                                                                    <a href="#" class="nav-link nvl <?php echo $row['valor1'] == 'Semana' ? 'active' : ''; ?>" data-status="Semana" onclick="toggleMeta(<?php echo $id; ?>, 'Semana'); return false;">Semana</a>
                                                                <?php  } ?>
                                                            </li>
                                                            <li class="nav-item">
                                                                <?php if ($row['tipo_meta'] == 'Operação') { ?>
                                                                    <a href="#" class="nav-link <?php echo $row['valor1'] == '1' ? 'active' : ''; ?>" data-status="1" onclick="toggleMeta(<?php echo $id; ?>, '1'); return false;">
                                                                        Entrada
                                                                    </a>
                                                                <?php } ?>
                                                            </li>
                                                            <li class="nav-item ">
                                                                <?php if ($row['tipo_meta'] == 'Operação') { ?>
                                                                    <a href="#" class="nav-link <?php echo $row['valor1'] == '2' ? 'active' : ''; ?>" data-status="2" onclick="toggleMeta(<?php echo $id; ?>, '2'); return false;">
                                                                        Saida
                                                                    </a>
                                                                <?php  } ?>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                    <?php }
                                    } ?>
                                </tbody>
                            </table>
                        </div>
                    <?php } elseif ($tabela == 'percentual_desconto') { ?>
                        <div class="tab-pane fade show active" id="percentual_desconto" role="tabpanel" aria-labelledby="percentual_desconto-tab">
                            <!-- Tabela para a aba Métricas -->
                            <div style="display: flex; justify-content: space-between; align-items: center;" class="mb-3">
                                <h6>Tabela percentual máximo de desconto por segmento</h6>
                            </div>
                            <form id="form-percentual_desconto" method="POST" action="salvar_desconto.php">
                                <table id="datatable-percentual_desconto" class="table table-striped table-bordered dt-responsive nowrap">
                                    <thead>
                                        <tr class="text-center">
                                            <th>Tipo</th>
                                            <th>Percentual Máximo de Desconto</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="text-center">
                                            <td> Manipulado</td>
                                            <td>
                                                <input type="text" name="manipulado" class="form-control time" value="<?= htmlspecialchars(isset($percentual_desconto[0]['valor1']) ? $percentual_desconto[0]['valor1'] : 0); ?>">
                                            </td>
                                        </tr>

                                        <tr class="text-center">
                                            <td>Varejo</td>
                                            <td>
                                                <input type="text" name="varejo" class="form-control time" value="<?= htmlspecialchars(isset($percentual_desconto[0]['valor2']) ? $percentual_desconto[0]['valor2'] : 0); ?>">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div style="text-align: right;">
                                    <button type="submit" class="btn btn-primary"><i class="mdi mdi-magnify"></i> Salvar</button>
                                </div>
                            </form>
                        </div>
                    <?php } elseif ($tabela == 'metricas') { ?>
                        <div class="tab-pane fade show active" id="metricas" role="tabpanel" aria-labelledby="metricas-tab">
                            <!-- Tabela para a aba Métricas -->
                            <div style="display: flex; justify-content: space-between; align-items: center;" class="mb-3">
                                <h6>Tabela de Quantidade de Fórmula</h6>
                            </div>
                            <form id="form-metricas" method="POST" action="salvar_metricas.php">
                                <table id="datatable-metricas" class="table table-striped table-bordered dt-responsive nowrap">
                                    <thead>
                                        <tr class="text-center">
                                            <th>Valor</th>
                                            <th>Metas</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="text-center">
                                            <td>Negativo: Menor que</td>
                                            <td>
                                                <input type="text" name="negativo[]" class="form-control money" id="input-negativo-<?= $index; ?>" value="<?= htmlspecialchars(isset($metrica[0]['valor1']) ? $metrica[0]['valor1'] : 0); ?>">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">Médio:</td>
                                            <td>
                                                <?= 'Entre ' . htmlspecialchars(isset($metrica[0]['valor1']) ? $metrica[0]['valor1'] : 0); ?> é <?= htmlspecialchars(isset($metrica[0]['valor2']) ? $metrica[0]['valor2'] : 0); ?>
                                            </td>
                                        </tr>
                                        <tr class="text-center">
                                            <td>Positivo: Maior que</td>
                                            <td>
                                                <input type="text" name="positivo[]" class="form-control money" id="input-positivo-<?= $index; ?>" value="<?= htmlspecialchars(isset($metrica[0]['valor2']) ? $metrica[0]['valor2'] : 0); ?>">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div style="text-align: right;">
                                    <button type="submit" class="btn btn-primary"><i class="mdi mdi-magnify"></i> Salvar</button>
                                </div>
                            </form>
                        </div>
                    <?php } elseif ($tabela == 'processos') { ?>
                        <div class="tab-pane active" id="processos" role="tabpanel">
                            <!-- Conteúdo da aba de Definição de Processos -->
                            <div style="display: flex; justify-content: space-between; align-items: center;" class="mb-3">
                                <h6>Tabela de Preferências (Soma de processos Lead-Time)</h6>
                            </div>

                            <?php
                            // Conexão com MySQL para buscar os processos salvos
                            $mysqli = new mysqli($servername, $username, $password, "kpi");

                            if ($mysqli->connect_error) {
                                die("Falha na conexão: " . $mysqli->connect_error);
                            }

                            // Buscar processos salvos
                            $query = "SELECT id_processo, nome_processo FROM define_processos ORDER BY nome_processo";
                            $result = $mysqli->query($query);

                            $processosSalvos = array();
                            if ($result) {
                                while ($row = $result->fetch_assoc()) {
                                    $processosSalvos[] = $row;
                                }
                                $result->free();
                            }
                            $mysqli->close();
                            ?>

                            <style>
                                #acessoDropdown {
                                    max-height: 200px;
                                    /* Define a altura máxima do dropdown */
                                    overflow-y: auto;
                                    /* Adiciona a barra de rolagem vertical */
                                    white-space: nowrap;
                                    /* Impede a quebra de linha nos itens */
                                    text-overflow: ellipsis;
                                    /* Adiciona "..." se o texto for muito longo */
                                    overflow-x: hidden;
                                    /* Esconde a rolagem horizontal */
                                }

                                #acessoDropdown .dropdown-item {
                                    word-wrap: break-word;
                                    /* Quebra palavras muito grandes */
                                    white-space: nowrap;
                                    /* Garante que texto muito grande não quebre linhas */
                                    text-overflow: ellipsis;
                                    /* Adiciona o efeito de "..." */
                                    overflow: hidden;
                                    /* Esconde o conteúdo que ultrapassar o limite */
                                }
                            </style>

                            <form id="form-processos">
                                <div class="form-row-mb-3">


                                    <div class="d-flex">
                                        <div class="form-group col-md-3">
                                            <label for="acesso" class="form-label">Processos</label>
                                            <div class="input-group">
                                                <input type="text" id="acesso" name="acessoText" class="form-control" placeholder="Digite para filtrar Acessos" autocomplete="off">
                                            </div>
                                            <div id="acessoDropdown" class="dropdown-menu" style="width: 100%;">
                                                <?php
                                                if (!empty($etapas)) {
                                                    foreach ($etapas as $itens) {
                                                        $id_processo = htmlspecialchars($itens['CODIGO_ETAPA']);
                                                        $nomeProcesso = $itens['NOME_ETAPA'];
                                                        echo '<a class="dropdown-item" href="#" data-modulo="' . htmlspecialchars($nomeProcesso) . '" data-id_modulo="' . $id_processo . '">' . $id_processo . ' - ' . utf8_decode($nomeProcesso) . '</a>';
                                                    }
                                                }
                                                ?>
                                            </div>
                                        </div>

                                        <div class="input-group-append">
                                            <button type="button" id="addModuloButton">+</button>
                                        </div>




                                    </div>


                                    <table class="table" id="modulosTable">
                                        <thead>
                                            <tr>
                                                <th>Código</th>
                                                <th>Processo</th>
                                                <th>Ações</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php
                                            if (!empty($processosSalvos)) {
                                                foreach ($processosSalvos as $processo) {
                                                    echo '<tr data-id="' . htmlspecialchars($processo['id_processo']) . '">';
                                                    echo '<td>' . htmlspecialchars($processo['id_processo']) . '</td>';
                                                    echo '<td>' . htmlspecialchars($processo['nome_processo']) . '</td>';
                                                    echo '<td><button type="button" class="remove-modulo-button btn btn-danger btn-sm" data-id-processo="' . htmlspecialchars($processo['id_processo']) . '"><i class="fas fa-trash"></i></button></td>';
                                                    echo '</tr>';
                                                }
                                            }
                                            ?>
                                        </tbody>
                                    </table>

                                    <div class="text-right mb-2">
                                        <button type="button" id="submitButton" class="btn btn-primary">Salvar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    <?php } elseif ($tabela == 'bancos') {
                        include('../bancos/index.php');
                    } ?>
                </div>
            </div>
        </div>
    </div>




    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->

    <?php
    include('../footer.php');
    include('../../geral/mensagens_modais.php');
    ?>

    <!-- Vendor js -->
    <script src="../../../assets/js/vendor.min.js"></script>
    <!-- App js-->
    <script src="../../../assets/js/app.min.js"></script>
    <script src="../../geral/javascript.js"></script>
    <!-- Mask,dt_table -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
    <script src="../../assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/kpi/assets/js/modais.js"></script>
    <script src="/kpi/assets/js/modal-helper.js"></script>

    <script>
        $(document).ready(function() {
            $(".time").mask("0.000.00", {
                reverse: true
            });
        });
        document.addEventListener('DOMContentLoaded', function() {


            // Verifica se há uma aba na URL ao carregar a página
            const urlParams = new URLSearchParams(window.location.search);
            const activeTab = urlParams.get('tabela') || 'geral';

            // Configurar o dropdown para filtro
            function setupDropdown(filterId, dropdownId) {
                const filterInput = document.getElementById(filterId);
                const dropdown = document.getElementById(dropdownId);

                filterInput.addEventListener('focus', function() {
                    dropdown.style.display = 'block';
                });

                filterInput.addEventListener('input', function() {
                    const filterValue = this.value.toLowerCase();
                    const items = dropdown.querySelectorAll('.dropdown-item');

                    items.forEach(function(item) {
                        const match = item.textContent.toLowerCase().includes(filterValue);
                        item.style.display = match ? 'block' : 'none';
                    });

                    dropdown.style.display = filterValue ? 'block' : 'none';
                });

                dropdown.addEventListener('click', function(e) {
                    if (e.target.classList.contains('dropdown-item')) {
                        const selectedModulo = e.target.getAttribute('data-modulo');
                        const selectedIdModulo = e.target.getAttribute('data-id_modulo');

                        filterInput.value = e.target.textContent;
                        filterInput.setAttribute('data-id_modulo', selectedIdModulo);
                        filterInput.setAttribute('data-modulo', selectedModulo);
                        dropdown.style.display = 'none';
                    }
                });

                // Fechar dropdown quando clicar fora
                document.addEventListener('click', function(e) {
                    if (!filterInput.contains(e.target) && !dropdown.contains(e.target)) {
                        dropdown.style.display = 'none';
                    }
                });
            }



            // Adicionar um módulo à tabela
            function addModuloToTable(modulo, idModulo) {
                const tableBody = document.querySelector('#modulosTable tbody');
                const row = document.createElement('tr');

                row.innerHTML = `
                    <td>${idModulo}</td>
                    <td>${modulo}</td>
                    <td>
                        <button type="button" class="remove-processo-button btn btn-danger btn-sm" data-id-processo="${idModulo}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                `;

                tableBody.appendChild(row);

                // Adicionar evento ao botão de remoção
                row.querySelector('.remove-processo-button').addEventListener('click', function(e) {
                    e.preventDefault();
                    askRemoveProcess(this);
                });
            }

            // Verificar se o processo já existe na tabela
            function processoExisteNaTabela(id_processo) {
                const tableBody = document.querySelector('#modulosTable tbody');
                const rows = tableBody.querySelectorAll('tr');

                for (const row of rows) {
                    // Só verifica linhas visíveis
                    if (row.style.display !== 'none') {
                        const rowId = row.querySelector('td:first-child').textContent.trim();
                        if (rowId === id_processo) {
                            return true;
                        }
                    }
                }
                return false;
            }

            // Configurar dropdown
            setupDropdown('acesso', 'acessoDropdown');

            // Botão para adicionar módulo
            const addModuloButton = document.getElementById('addModuloButton');
            addModuloButton.addEventListener('click', function() {
                const filterInput = document.getElementById('acesso');
                const modulo = filterInput.value.trim();
                const idModulo = filterInput.getAttribute('data-id_modulo');

                if (!modulo || !idModulo) {
                    showModal('exampleModal', 'Erro', 'Por favor, selecione um processo válido.');
                    return;
                }

                if (processoExisteNaTabela(idModulo)) {
                    showModal('exampleModal', 'Erro', 'Este processo já foi adicionado à lista. Não é possível adicionar o mesmo processo mais de uma vez.');
                } else {
                    addModuloToTable(modulo, idModulo);
                    filterInput.value = '';
                    filterInput.removeAttribute('data-id_modulo');
                    filterInput.removeAttribute('data-modulo');
                }
            });

            function attachExistingRemoveListeners() {
                document.querySelectorAll('.remove-modulo-button').forEach(button => {
                    if (!button.dataset.listenerAttached) {
                        button.addEventListener('click', function(e) {
                            e.preventDefault();
                            askRemoveProcess(this);
                        });
                        button.dataset.listenerAttached = 'true';
                    }
                });
            }

            attachExistingRemoveListeners();

            window.askRemoveProcess = function(button) {
                const row = button.closest('tr');
                const idProcesso = button.dataset.idProcesso || button.getAttribute('data-id-processo');

                ModalHelper.openConfirmationModal({
                    title: 'Confirmar exclusão',
                    message: `Deseja realmente excluir o processo? Esta ação não pode ser desfeita.`,
                    confirmText: 'Sim, excluir',
                    cancelText: 'Cancelar',
                    onConfirm() {
                        ModalHelper.showToast('Processo excluido', '#10b981');
                        if (row) row.style.display = 'none';
                        fetch('excluir_processo.php', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                id_processo: idProcesso
                            })
                        });
                    },
                    onCancel() {
                        ModalHelper.showToast('Exclusão cancelada', '#f97316');
                    }
                });
            }

            // Submeter formulário via AJAX
            const submitButton = document.getElementById('submitButton');
            submitButton.addEventListener('click', function() {
                const tableBody = document.querySelector('#modulosTable tbody');
                const visibleRows = Array.from(tableBody.querySelectorAll('tr')).filter(row => row.style.display !== 'none');

                if (!visibleRows.length) {
                    showModal('exampleModal', 'Erro', 'Adicione ao menos um processo antes de salvar.');
                    return;
                }

                const modulos = visibleRows.map(row => ({
                    id_modulo: row.cells[0].textContent.trim(),
                    nome_modulo: row.cells[1].textContent.trim()
                }));

                // Enviar dados via AJAX
                fetch('salvar_processos.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            action: 'salvarProcessos',
                            processos: modulos
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Erro na resposta do servidor');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            showModal('exampleModal', 'Sucesso', data.message || 'Os processos foram salvos com sucesso!');
                            tableBody.querySelectorAll('tr[style="display: none;"]').forEach(row => row.remove());
                        } else {
                            showModal('exampleModal', 'Erro', data.message || 'Erro ao salvar os processos.');
                        }
                    })
                    .catch(error => {
                        console.error('Erro:', error);
                        showModal('exampleModal', 'Erro', 'Erro na comunicação com o servidor. Por favor, tente novamente.');
                    });
            });

            function showModal(modalId, title, message) {
                const modalElement = document.getElementById(modalId);
                const modal = new bootstrap.Modal(modalElement);
                modalElement.querySelector('.modal-title').textContent = title;
                modalElement.querySelector('.modal-body p').textContent = message;
                modal.show();
            }
        });


        $(document).ready(function() {
            $(".money").mask("0.000.000.000", {
                reverse: true
            });
        });

        document.addEventListener("DOMContentLoaded", function() {
            // Remove status and message parameters from URL
            const url = new URL(window.location);
            url.searchParams.delete('status');
            url.searchParams.delete('message');
            window.history.replaceState({}, document.title, url);
        });

        function toggleMeta(id, newStatus) {
            // Remove a classe 'active' de todos os links dentro do mesmo grupo
            document.querySelectorAll('#toggle-nav-' + id + ' .nav-link').forEach(link => link.classList.remove('active'));

            // Adiciona a classe 'active' ao link com o atributo correspondente
            const selectedLink = document.querySelector('#toggle-nav-' + id + ' .nav-link[data-status="' + newStatus + '"]');
            if (selectedLink) {
                selectedLink.classList.add('active');
            }

            //console.log(id, newStatus);

            // Chama o PHP para atualizar o status no banco de dados
            fetch('status.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: id,
                        status: newStatus
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        console.log("Status atualizado com sucesso");
                    } else {
                        console.error("Erro ao atualizar status:", data.message);
                    }
                })
                .catch(error => console.error('Erro:', error));
        }


        function updateURL(value) {
            // Atualiza a URL sem recarregar a página
            const url = new URL(window.location.href);
            url.searchParams.set('tabela', value);
            window.history.pushState({}, '', url);

            // Atualiza a aba ativa dinamicamente
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });

            const activeTab = document.querySelector(`[aria-controls="${value}"]`);

            if (activeTab) {
                activeTab.classList.add('active');
            }

            // Opcional: Se você realmente precisa recarregar a página para aplicar filtros ou conteúdo:
            location.reload();
        }
    </script>

    <script>
        function showModal(title, message) {
            const modal = new bootstrap.Modal(document.getElementById('exampleModal'));
            const modalTitle = document.querySelector('.modal-title');
            const modalBody = document.querySelector('.modal-body p');

            modalTitle.textContent = title;
            modalBody.textContent = message;

            modal.show();
        }

        // Função para validar o formulário de métricas
        function validarFormularioMetricas() {
            // Obtendo os valores dos campos
            const negativos = document.querySelectorAll('input[name="negativo[]"]');
            //const medios = document.querySelectorAll('input[name="medio[]"]');
            const positivos = document.querySelectorAll('input[name="positivo[]"]');

            let erros = [];

            function limparFormatoNumero(valor) {
                return parseInt(valor.replace(/\./g, ''), 10); // Remove pontos e converte para inteiro
            }
            // Validação para cada conjunto de valores (negativo, médio e positivo)
            negativos.forEach((campo, index) => {
                let valorNegativo = limparFormatoNumero(campo.value.trim());
                //let valorMedio = parseFloat(medios[index].value.trim());
                let valorPositivo = limparFormatoNumero(positivos[index].value.trim());

                // Validação do valor negativo
                if (isNaN(valorNegativo) || valorNegativo <= 0) {
                    erros.push(`Valor Negativo inválido  não pode ser menor que 1.`);
                }

                // Validação do valor médio
                // if (valorMedio <= valorNegativo) {
                //     erros.push(`O valor Médio  não pode ser menor ou igual ao valor Negativo.`);
                // }

                // Validação do valor positivo
                if (valorPositivo <= valorNegativo) {
                    erros.push(`O valor Positivo  não pode ser menor ou igual ao valor Negativo.`);
                }
            });

            // Se houver erros, mostra-los no modal
            if (erros.length > 0) {
                let mensagemErro = erros.join("\n");
                showModal('Erro de Validação', mensagemErro);
                return false; // Impede o envio do formulário
            }

            // Se não houver erros, o formulário pode ser submetido
            return true;
        }

        // Adicionando o evento de validação ao enviar o formulário
        document.getElementById('form-metricas').addEventListener('submit', function(e) {
            if (!validarFormularioMetricas()) {
                e.preventDefault(); // Impede o envio do formulário se houver erro
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            // Manipulador para o botão de remoção
        });
    </script>
    <style>
        .bt {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.4rem;

            padding: 0.6rem 1rem;
            border-radius: 999px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .bt .nav {
            display: inline-flex;
            gap: 0.3rem;
        }

        .bt .nav-link {
            border: none !important;
            border-radius: 999px;
            padding: 0.35rem 1.3rem;
            background-color: #d7d7d7;
            color: #6b6b6b;
            font-weight: 500;
            font-size: 0.95rem;
            transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
            box-shadow: none;
        }

        .bt .nav-link.active {
            background: linear-gradient(135deg, #0075ff, #1a7dff);
            color: #fff;
            box-shadow: 0 6px 15px rgba(10, 58, 162, 0.35);
            transform: translateY(-1px);
        }

        .bt .nav-link:hover:not(.active) {
            background-color: #cfcfcf;
            transform: translateY(-1px);
        }
    </style>

    <style>
        .is-invalido {
            box-shadow: 0 0 5px red !important;
        }
    </style>
</body>