<?php
require '../conexao/conexao.php';
require '../conexao/acesso.php';
require '../configuacoes.php';
// require '../configuracao/consulta_banco_dados.php';
require_once '../querys/query-logs.php';
require '../configuracao/filtros.php';
require '../conexao/logs.php';

// Registrar log de consulta
if (isset($_SESSION['CodUsuario']) && isset($_SESSION['NomeUsuario'])) {
    registrarLogConsulta('Logs', $_SESSION['CodUsuario'], $_SESSION['NomeUsuario']);
}

$filtrosSistema = new Filtros();
$queryLogs = new QueryLogs($connectionmysql);

// Buscar módulos
$modulos = $queryLogs->getModulos();

$pageTitle = "Relatório de Logs";

// Configurações de paginação
$records_per_page = $_GET['per_page'] ?? 50;
$current_page = $_GET['page'] ?? 1;
$start_from = ($current_page - 1) * $records_per_page;

// Validar valores
if (!in_array($records_per_page, [10, 25, 50, 100])) {
    $records_per_page = 50;
}
if ($current_page < 1) {
    $current_page = 1;
}

// Filtros
$filtros = array();

// Preenche SEMPRE antes
if (!empty($_GET['usuario'])) {
    $filtros['id_usuario'] = $_GET['usuario'];
    $filtros['usuario']    = $_GET['usuario'];
} else {
    $filtros['id_usuario'] = null;
    $filtros['usuario']    = '';
}

if (isset($_GET['form_submitted']) && $_GET['form_submitted'] == '1') {
    if (!empty($_GET['tipo_log'])) {
        $filtros['id_tipo_log'] = $_GET['tipo_log'];
    }

    if (!empty($_GET['modulo'])) {
        // Se for um array (múltiplos módulos selecionados)
        if (is_array($_GET['modulo'])) {
            $filtros['modulo'] = array_filter($_GET['modulo']); // Remove valores vazios
        } else {
            // Se for uma string com vírgulas, converter para array
            if (is_string($_GET['modulo']) && strpos($_GET['modulo'], ',') !== false) {
                $filtros['modulo'] = array_map('trim', explode(',', $_GET['modulo']));
            } else {
                $filtros['modulo'] = [$_GET['modulo']];
            }
        }
    }




    if (!empty($_GET['data_inicial'])) {
        $filtros['data_inicial'] = $_GET['data_inicial'] . ' 00:00:00';
    }

    if (!empty($_GET['data_final'])) {
        $filtros['data_final'] = $_GET['data_final'] . ' 23:59:59';
    }
}

// Buscar logs
$logs = buscarLogs($filtros);
$total_logs = contarLogs($filtros);

// Calcular total de páginas
$total_pages = ceil($total_logs / $records_per_page);

// Buscar tipos de log para o filtro
$tipos_log = buscarTiposLog();

// Buscar usuários para o filtro
$sql_usuarios = "SELECT DISTINCT id_usuario, nome_usuario FROM logs ORDER BY nome_usuario";
$result_usuarios = mysqli_query($connectionmysql, $sql_usuarios);
$usuarios = array();
if ($result_usuarios) {
    while ($row = mysqli_fetch_assoc($result_usuarios)) {
        $usuarios[] = $row;
    }
}

$modulo = $_GET['modulos'] ?? null;
$modulo = $modulo ? implode(',', array_map(function ($item) {
    return "'" . addslashes(trim($item)) . "'";
}, explode(',', $modulo))) : 'NULL';

// Função para construir URL de paginação
function buildPaginationUrl($page)
{
    $params = $_GET;
    $params['page'] = $page;
    return '?' . http_build_query($params);
}
?>
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="utf-8" />
    <title><?= $pageTitle ?> - Manda Receita</title>

    <?php include('../geral/header.php'); ?>
</head>

<style>
    .dataTables_length,
    .dataTables_filter {
        margin-bottom: 0 !important;
    }

    .dataTables_info {
        padding-top: 10px;
    }

    .dataTables_paginate {
        padding-top: 10px;
    }
</style>

<style>
    div.dataTables_wrapper div.dataTables_length {
        padding-top: 10px;
    }
</style>

<style>
    /* Garante alinhamento bonito e espaçamento */
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        margin: 0 !important;
        padding: 0 !important;
    }

    div.dataTables_wrapper .text-center {
        text-align: center !important;
    }

    div.dataTables_wrapper .text-end {
        text-align: right !important;
    }
</style>

<body>

    <!-- Navigation Bar-->
    <?php
    include('../geral/menu.php');
    ?>
    <!-- End Navigation Bar-->

    <!-- ============================================================== -->
    <!-- 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">
                        <h3 class="page-title"><?= $pageTitle ?></h3>
                    </div>

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

                    <div class="col-12">
                        <form method="get" action="index.php" id="indexForm" onsubmit="return validarFormulario()">
                            <div class="form-row mb-3">
                                <div class="form-group col-6 col-md-4 col-lg-2">
                                    <label>Data Inicial</label>
                                    <input type="date" id="data_inicial" name="data_inicial" class="form-control"
                                        value="<?= $_GET['data_inicial'] ?? date('Y-m-d') ?>" required>
                                </div>
                                <div class="form-group col-6 col-md-4 col-lg-2">
                                    <label>Data Final</label>
                                    <input type="date" id="data_final" name="data_final" class="form-control"
                                        value="<?= $_GET['data_final'] ?? date('Y-m-d') ?>" required>
                                </div>
                                <div class="form-group col-6 col-md-4 col-lg-2">
                                    <label>Tipo de Ação</label>
                                    <select class="form-control" name="tipo_log" id="tipo_log">
                                        <option value="">Todos</option>
                                        <?php foreach ($tipos_log as $tipo): ?>
                                            <option value="<?php echo $tipo['id']; ?>"
                                                <?php echo (isset($_GET['tipo_log']) && $_GET['tipo_log'] == $tipo['id']) ? 'selected' : ''; ?>>
                                                <?php echo htmlspecialchars($tipo['nome']); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>

                                <?php
                                echo $filtrosSistema->filtroCheckBox('modulos', $modulos);
                                ?>

                                <div class="form-group col-3">
                                    <label>Usuário</label>
                                    <select name="usuario" class="form-control">
                                        <option value="">Todos</option>
                                        <?php foreach ($usuarios as $usuario): ?>
                                            <option value="<?= $usuario['id_usuario'] ?>" <?= ($filtros['usuario'] == $usuario['id_usuario']) ? 'selected' : '' ?>>
                                                <?= $usuario['nome_usuario'] ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <input type="hidden" name="form_submitted" value="1" />

                            <div class="col-12 text-right" style="margin-top: -55px;">
                                <a href="geral_acessados.php" class="btn btn-primary mr-2">
                                    <i class="mdi mdi-poll"></i> Mais acessados
                                </a>
                                <a href="index.php" class="btn btn-warning mr-2"><i class="mdi mdi-plus"></i> Limpar</a>
                                <button type="submit" class="btn btn-primary"><i class="mdi mdi-magnify"></i> Pesquisar</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-12">
                    <?php if (isset($_GET['form_submitted']) && $_GET['form_submitted'] == '1') { ?>
                        <div style="display: flex; justify-content: space-between; align-items: center;" class="mb-2">
                            <h6>Lista de Logs</h6>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap">
                                    <thead>
                                        <tr>
                                            <th>ID / Nome Usuário</th>
                                            <th>Tipo de Ação</th>
                                            <th>Módulo</th>
                                            <th>Data/Hora</th>
                                            <th>Detalhes</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php
                                        if (empty($logs)): ?>
                                            <tr>
                                                <td colspan="4" class="text-center">Nenhum registro encontrado para os filtros selecionados.</td>
                                            </tr>
                                            <?php else:
                                            foreach ($logs as $log): ?>
                                                <tr>
                                                    <td><?= htmlspecialchars($log['id_usuario'] . ' / ' . $log['nome_usuario']) ?></td>
                                                    <td>
                                                        <?php
                                                        $badge_class = '';
                                                        switch ($log['id_tipo_log']) {
                                                            case 1: // Acesso
                                                                $badge_class = 'badge bg-success'; // verde - Acesso
                                                                break;
                                                            case 2: // Criação
                                                                $badge_class = 'badge-info'; // azul - Adicionado
                                                                break;
                                                            case 3: // Atualização
                                                                $badge_class = 'badge-warning'; // laranja - Alterado
                                                                break;
                                                            case 4: // Exclusão
                                                                $badge_class = 'badge-danger'; // vermelho - Excluído
                                                                break;
                                                            default:
                                                                $badge_class = 'badge-secondary'; // cinza - outros tipos
                                                                break;
                                                        }
                                                        ?>
                                                        <?php
                                                        $text_class = '';
                                                        switch ($log['id_tipo_log']) {
                                                            case 1: // Acesso
                                                                $text_class = 'text-success'; // verde - Acesso
                                                                break;
                                                            case 2: // Criação
                                                                $text_class = 'text-info'; // azul - Adicionado
                                                                break;
                                                            case 3: // Atualização
                                                                $text_class = 'text-warning'; // laranja - Alterado
                                                                break;
                                                            case 4: // Exclusão
                                                                $text_class = 'text-danger'; // vermelho - Excluído
                                                                break;
                                                            default:
                                                                $text_class = 'text-secondary'; // cinza - outros tipos
                                                                break;
                                                        }
                                                        ?>
                                                        <span class="<?php echo $text_class; ?>">
                                                            <?php echo htmlspecialchars($log['tipo_log_nome']); ?>
                                                        </span>
                                                    </td>
                                                    <td><?= htmlspecialchars($log['id_modulo'] . ' - ' . $log['descricao_modulo']); ?></td>
                                                    <td><?= date('d/m/Y H:i:s', strtotime($log['data_criacao'])) ?></td>
                                                    <td>
                                                        <?php if (!empty($log['detalhes_alteracao'])): ?>
                                                            <button class="btn btn-sm btn-link btn-detalhes p-0"
                                                                data-log='<?= json_encode(array_merge($log, ['modulo' => $log['id_modulo'] . ' - ' . $log['descricao_modulo']]), JSON_HEX_APOS | JSON_HEX_QUOT) ?>'
                                                                title="Clique para ver detalhes">
                                                                <i class="mdi mdi-information text-success"></i>
                                                                <small class="text-muted">Ver detalhes</small>
                                                            </button>
                                                        <?php else: ?>
                                                            <span class="text-muted">-</span>
                                                        <?php endif; ?>
                                                    </td>

                                                </tr>
                                        <?php endforeach;
                                        endif; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    <?php } ?>

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

    <!-- Modal para exibir detalhes dos logs -->
    <div class="modal fade" id="modalDetalhesLog" tabindex="-1" role="dialog" aria-labelledby="modalDetalhesLogLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalDetalhesLogLabel">
                        <i class="mdi mdi-information text-primary"></i>
                        Detalhes do Log
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <div class="modal-body">
                    <div id="conteudoDetalhesLog">
                        <!-- Conteúdo será preenchido via JavaScript -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- end wrapper -->

    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->
    <!-- Footer Start -->
    <?php
    include('../geral/footer.php');
    ?>
    <!-- end Footer -->

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

    <!-- Vendor js -->
    <script src="../../assets/js/vendor.min.js"></script>

    <!-- knob plugin -->
    <script src="../../assets/libs/jquery-knob/jquery.knob.min.js"></script>
    <!-- App js-->
    <script src="../../assets/js/app.min.js"></script>

    <script src="../geral/javascript.js"></script>
    <script src="../../assets/js/funcoes.js"></script>

    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.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://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="../../assets/css/resetedatatable.css">
    <link rel="stylesheet" href="../../assets/libs/select2/css/select2.min.css">
    <script src="../../assets/libs/select2/js/select2.min.js"></script>

    <script>
        $('#datatable-buttons').on('click', '.btn-detalhes', function() {
            const log = $(this).data('log');
            mostrarDetalhes(log);
        });
    </script>


    <script>
        const dataInicial = document.getElementById("data_inicial");
        const dataFinal = document.getElementById("data_final");

        function validarDatas() {
            if (dataInicial.value && dataFinal.value && dataInicial.value > dataFinal.value) {
                alert("A data inicial não pode ser maior que a data final.");
                dataFinal.value = ""; // limpa a data final inválida
            }
        }

        dataInicial.addEventListener("change", validarDatas);
        dataFinal.addEventListener("change", validarDatas);
    </script>

    <script>
        $(document).ready(function() {
            initDropdownFilter('modulos', false);
            var table = $('#datatable-buttons').DataTable({
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/pt-BR.json"
                },
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "Todos"]
                ],
                buttons: [
                    'excelHtml5',
                    'csvHtml5'
                ],
                dom: '<"d-flex justify-content-between align-items-center mb-2"Bf>t<"d-flex justify-content-between align-items-center w-100 mt-2"l<"text-center"i><"text-end"p>>',
                order: [
                    [0, 'asc']
                ],
                columnDefs: [{
                    targets: 0,
                    orderable: true
                }],
            });
        });
    </script>

    <script>
        // Função para gerar resumo visual das alterações
        function gerarResumoVisual(detalhes) {
            if (!detalhes || detalhes === 'Nenhuma alteração detectada') {
                return '<div class="text-muted"><i class="mdi mdi-check-circle text-success"></i> Nenhuma alteração detectada</div>';
            }

            let linhas = detalhes.split('\n');
            let html = '';

            linhas.forEach((linha, index) => {
                if (linha.trim() && linha.includes(':')) {
                    // Padrão para logs novos (inteligentes): "- campo [TIPO]: 'valor1' → 'valor2'"
                    let matchNovo = linha.match(/^- (.+?) \[(.+?)\]: '(.+?)' → '(.+?)'$/);

                    // Padrão para logs antigos: "- campo: 'valor1' → 'valor2'"
                    let matchAntigo = linha.match(/^- (.+?): '(.+?)' → '(.+?)'$/);

                    let campo, tipo, valorAntes, valorDepois;

                    if (matchNovo) {
                        campo = matchNovo[1];
                        tipo = matchNovo[2];
                        valorAntes = matchNovo[3];
                        valorDepois = matchNovo[4];
                    } else if (matchAntigo) {
                        campo = matchAntigo[1];
                        valorAntes = matchAntigo[2];
                        valorDepois = matchAntigo[3];

                        // Determinar tipo baseado nos valores
                        if (valorAntes === '' && valorDepois !== '') {
                            tipo = 'ADICIONADO';
                        } else if (valorAntes !== '' && valorDepois === '') {
                            tipo = 'REMOVIDO';
                        } else {
                            tipo = 'ALTERADO';
                        }
                    } else {
                        // Fallback mais robusto
                        let partes = linha.split(':');
                        if (partes.length >= 2) {
                            campo = partes[0].replace(/^- /, '').trim();
                            let resto = partes.slice(1).join(':').trim();

                            // Tentar extrair valores com setas
                            let valores = resto.match(/'([^']*)' → '([^']*)'/);
                            if (valores) {
                                valorAntes = valores[1];
                                valorDepois = valores[2];

                                // Determinar tipo baseado nos valores
                                if (valorAntes === '' && valorDepois !== '') {
                                    tipo = 'ADICIONADO';
                                } else if (valorAntes !== '' && valorDepois === '') {
                                    tipo = 'REMOVIDO';
                                } else {
                                    tipo = 'ALTERADO';
                                }
                            }
                        }
                    }

                    if (campo && tipo && valorAntes !== undefined && valorDepois !== undefined) {
                        // Validações adicionais para evitar "undefined"
                        campo = campo || 'Campo desconhecido';
                        tipo = tipo || 'ALTERADO';
                        valorAntes = valorAntes === undefined ? '' : String(valorAntes);
                        valorDepois = valorDepois === undefined ? '' : String(valorDepois);

                        let icone = '';
                        let cor = '';
                        let texto = '';

                        switch (tipo) {
                            case 'REMOVIDO':
                                icone = 'mdi-minus-circle';
                                cor = 'danger';
                                texto = 'Removido';
                                break;
                            case 'ADICIONADO':
                                icone = 'mdi-plus-circle';
                                cor = 'success';
                                texto = 'Adicionado';
                                break;
                            case 'ALTERADO':
                                icone = 'mdi-pencil';
                                cor = 'info';
                                texto = 'Alterado';
                                break;
                            default:
                                icone = 'mdi-pencil';
                                cor = 'info';
                                texto = 'Alterado';
                        }

                        let valorDepoisExibido = valorDepois === '' ?
                            '<span class="text-danger font-italic">[REMOVIDO]</span>' :
                            `<span class="text-dark">"${valorDepois}"</span>`;

                        html += `
                            <div class="resumo-alteracao d-flex align-items-center">
                                <i class="mdi ${icone} text-${cor} mr-2"></i>
                                <div class="flex-grow-1">
                                    <strong>${campo}</strong>
                                    <span class="badge badge-sm badge-${cor} ml-2">${texto}</span>
                                </div>
                                <div class="text-right">
                                    <small class="text-muted">"${valorAntes}"</small>
                                    <i class="mdi mdi-arrow-right mx-1 text-muted"></i>
                                    ${valorDepoisExibido}
                                </div>
                            </div>
                        `;
                    } else {
                        // Se não conseguiu processar, pular esta linha
                        // Não mostrar erro para o usuário
                    }
                }
            });

            return html || '<div class="text-muted">Nenhuma alteração detectada</div>';
        }

        // Função para mostrar detalhes do log
        function mostrarDetalhes(log) {
            let conteudo = `
                <div class="row">
                    <div class="col-md-6">
                        <h6><i class="mdi mdi-information text-primary"></i> Informações Básicas</h6>
                        <table class="table table-sm">
                            <tr>
                                <td><strong>ID:</strong></td>
                                <td>${log.id}</td>
                            </tr>
                            <tr>
                                <td><strong>Tipo:</strong></td>
                                <td>${(() => {
                                    let tipoNome = log.tipo_log_nome || '';
                                    let tipoId = log.id_tipo_log || 0;
                                    let badgeClass = 'badge-secondary'; // padrão cinza
                                    
                                    // Mapear por ID do tipo de log (mais confiável)
                                    let textClass = 'text-secondary'; // padrão cinza
                                    switch(parseInt(tipoId)) {
                                        case 2: // Criação
                                            textClass = 'text-info'; // azul - Adicionado
                                            break;
                                        case 3: // Atualização  
                                            textClass = 'text-warning'; // laranja - Alterado
                                            break;
                                        case 4: // Exclusão
                                            textClass = 'text-danger'; // vermelho - Excluído
                                            break;
                                        default:
                                            // Fallback: tentar por nome se ID não corresponder
                                            let tipoNomeLower = tipoNome.toLowerCase();
                                            if (tipoNomeLower.includes('exclusão') || tipoNomeLower.includes('excluído') || tipoNomeLower.includes('remov') || tipoNomeLower.includes('delet')) {
                                                textClass = 'text-danger'; // vermelho
                                            } else if (tipoNomeLower.includes('criação') || tipoNomeLower.includes('criado') || tipoNomeLower.includes('adição') || tipoNomeLower.includes('adicionado') || tipoNomeLower.includes('adicionar') || tipoNomeLower.includes('inserção') || tipoNomeLower.includes('inserido')) {
                                                textClass = 'text-info'; // azul
                                            } else if (tipoNomeLower.includes('atualização') || tipoNomeLower.includes('atualizado') || tipoNomeLower.includes('alteração') || tipoNomeLower.includes('alterado') || tipoNomeLower.includes('edição') || tipoNomeLower.includes('editado') || tipoNomeLower.includes('modificação') || tipoNomeLower.includes('modificado')) {
                                                textClass = 'badge-warning'; // laranja
                                            }
                                            break;
                                    }

                                    return `<span class="${textClass}">${tipoNome}</span>`;
                                })()}
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Módulo:</strong></td>
                            <td>${log.modulo}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <h6><i class="mdi mdi-information-outline text-primary"></i> Informações do Registro</h6>
                    <table class="table table-sm">
                        <tr>
                            <td><strong>Usuário:</strong></td>
                            <td>${log.nome_usuario}</td>
                        </tr>
                        <tr>
                            <td><strong>Data/Hora:</strong></td>
                            <td>${new Date(log.data_criacao).toLocaleString('pt-BR')}</td>
                        </tr>
                        ${log.id_registro ? `
                        <tr>
                            <td><strong>ID do Registro:</strong></td>
                            <td>${log.id_registro}</td>
                        </tr>
                        ` : ''}
                    </table>
                </div>
            </div>
            `;
            //                         </div>
            //                     </div>
            //                 </div>

            // Adicionar seção de dados antes e depois se disponível
            if (log.dados_antes || log.dados_depois) {
                let dadosAntes = log.dados_antes ? JSON.parse(log.dados_antes) : {};
                let dadosDepois = log.dados_depois ? JSON.parse(log.dados_depois) : {};
                
                // Verificar se é um log de atualização de metas
                let isMetaUpdate = log.id_tipo_log == 3 && (log.modulo && log.modulo.includes('73'));

                // Gerar HTML com destaque visual para alterações
                let htmlAntes = '';
                let htmlDepois = '';

                // Para logs de atualização de metas, usar formato JSON estruturado
                if (isMetaUpdate) {
                    htmlAntes = `<div class="log-field-value"><pre style="margin: 0; font-size: 0.85em; background: #f8f9fa; padding: 10px; border-radius: 4px; border: 1px solid #e9ecef;">${JSON.stringify(dadosAntes, null, 2)}</pre></div>`;
                    htmlDepois = `<div class="log-field-value"><pre style="margin: 0; font-size: 0.85em; background: #f8f9fa; padding: 10px; border-radius: 4px; border: 1px solid #e9ecef;">${JSON.stringify(dadosDepois, null, 2)}</pre></div>`;
                } else {
                    // Processar dados antes - estilo neutro
                    for (let campo in dadosAntes) {
                        let valor = dadosAntes[campo];

                        // Tratar valores complexos (arrays, objetos)
                        let valorExibido = '';
                        if (valor === '' || valor === null) {
                            valorExibido = '<span class="text-muted font-italic">[VAZIO]</span>';
                        } else if (typeof valor === 'object') {
                            // Se for um objeto/array, tentar formatar de forma legível
                            if (Array.isArray(valor)) {
                                valorExibido = `<div class="log-field-value"><pre style="margin: 0; font-size: 0.85em;">${JSON.stringify(valor, null, 2)}</pre></div>`;
                            } else {
                                // Tratamento especial para metas (exclusão e atualização)
                                if (campo === 'metas_excluidas' || campo.includes('Meta ID')) {
                                    let htmlMetas = '<div class="log-field-value">';
                                    for (let metaId in valor) {
                                        let meta = valor[metaId];
                                        htmlMetas += `<div class="border-left border-info pl-3 mb-2" style="border-left-width: 3px !important;">`;
                                        htmlMetas += `<strong class="text-info">${metaId}</strong><br>`;
                                        for (let prop in meta) {
                                            htmlMetas += `<small class="text-muted">${prop}:</small> <span class="font-weight-bold">${meta[prop]}</span><br>`;
                                        }
                                        htmlMetas += `</div>`;
                                    }
                                    htmlMetas += '</div>';
                                    valorExibido = htmlMetas;
                                } else {
                                    // Para outros objetos, usar formato JSON estruturado
                                    valorExibido = `<div class="log-field-value"><pre style="margin: 0; font-size: 0.85em; background: #f8f9fa; padding: 10px; border-radius: 4px; border: 1px solid #e9ecef;">${JSON.stringify(valor, null, 2)}</pre></div>`;
                                }
                            }
                        } else {
                            valorExibido = `<span class="log-field-value">"${valor}"</span>`;
                        }

        htmlAntes += `
                            <div class="log-field-neutral">
                                <span class="log-field-name">${campo}:</span>
                                ${valorExibido}
                            </div>
                        `;
        }
        }

        // Processar dados depois
        if (!isMetaUpdate) {
            for (let campo in dadosDepois) {
                let valor = dadosDepois[campo];
                let classe = '';
                let icone = '';
                let tipoAlteracao = '';

                if (dadosAntes[campo] !== undefined) {
                    if (valor !== dadosAntes[campo]) {
                        if (dadosAntes[campo] === '' || dadosAntes[campo] === null) {
                            classe = 'log-field-added';
                            icone = '<i class="mdi mdi-plus-circle log-icon text-success"></i>';
                            tipoAlteracao = 'ADICIONADO';
                        } else if (valor === '' || valor === null) {
                            classe = 'log-field-removed';
                            icone = '<i class="mdi mdi-minus-circle log-icon text-danger"></i>';
                            tipoAlteracao = 'REMOVIDO';
                        } else {
                            classe = 'log-field-changed';
                            icone = '<i class="mdi mdi-pencil log-icon text-info"></i>';
                            tipoAlteracao = 'ALTERADO';
                        }
                    }
                }

                // Tratar valores complexos (arrays, objetos)
                let valorExibido = '';
                if (valor === '' || valor === null) {
                    valorExibido = '<span class="text-danger font-italic">[REMOVIDO]</span>';
                } else if (typeof valor === 'object') {
                    // Se for um objeto/array, tentar formatar de forma legível
                    if (Array.isArray(valor)) {
                        valorExibido = `<div class="log-field-value"><pre style="margin: 0; font-size: 0.85em;">${JSON.stringify(valor, null, 2)}</pre></div>`;
                    } else {
                        // Tratamento especial para metas (exclusão e atualização)
                        if (campo === 'metas_excluidas' || campo.includes('Meta ID')) {
                            let htmlMetas = '<div class="log-field-value">';
                            for (let metaId in valor) {
                                let meta = valor[metaId];
                                htmlMetas += `<div class="border-left border-info pl-3 mb-2" style="border-left-width: 3px !important;">`;
                                htmlMetas += `<strong class="text-info">${metaId}</strong><br>`;
                                for (let prop in meta) {
                                    htmlMetas += `<small class="text-muted">${prop}:</small> <span class="font-weight-bold">${meta[prop]}</span><br>`;
                                }
                                htmlMetas += `</div>`;
                            }
                            htmlMetas += '</div>';
                            valorExibido = htmlMetas;
                        } else {
                            // Para outros objetos, usar formato JSON estruturado
                            valorExibido = `<div class="log-field-value"><pre style="margin: 0; font-size: 0.85em; background: #f8f9fa; padding: 10px; border-radius: 4px; border: 1px solid #e9ecef;">${JSON.stringify(valor, null, 2)}</pre></div>`;
                        }
                    }
                } else {
                    valorExibido = `<span class="log-field-value">"${valor}"</span>`;
                }

                let badgeTipo = '';

                if (tipoAlteracao) {
                    if (tipoAlteracao === 'REMOVIDO') {
                        badgeTipo = `<span class="text-danger ml-2">REMOVIDO</span>`;
                    } else if (tipoAlteracao === 'ADICIONADO') {
                        badgeTipo = `<span class="text-info ml-2">ADICIONADO</span>`; // azul
                    } else if (tipoAlteracao === 'ALTERADO') {
                        badgeTipo = `<span class="text-warning ml-2">ALTERADO</span>`; // laranja
                    } else {
                        badgeTipo = `<span class="text-secondary ml-2">${tipoAlteracao}</span>`;
                    }
                }


                htmlDepois += `
                            <div class="${classe}">
                                ${icone}
                                <span class="log-field-name">${campo}:</span>
                                ${valorExibido}
                                ${badgeTipo}
                            </div>
                        `;
            }
        }

        conteudo += `
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <h6><i class="mdi mdi-arrow-left text-warning"></i> Dados Antes</h6>
                            <div class="bg-light p-3 rounded" style="max-height: 300px; overflow-y: auto;">
                                ${htmlAntes || '<div class="text-muted">Nenhum dado anterior</div>'}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6><i class="mdi mdi-arrow-right text-success"></i> Dados Depois</h6>
                            <div class="bg-light p-3 rounded" style="max-height: 300px; overflow-y: auto;">
                                ${htmlDepois || '<div class="text-muted">Nenhum dado posterior</div>'}
                            </div>
                        </div>
                    </div>
                    
                `;
        }

        document.getElementById('conteudoDetalhesLog').innerHTML = conteudo;
        
        // Bootstrap 5 - usar API JavaScript nativa
        var modalDetalhes = new bootstrap.Modal(document.getElementById('modalDetalhesLog'));
        modalDetalhes.show();
        }

        // Função para mudar resultados por página
        function changePerPage() {
            const perPage = document.getElementById('per_page').value;
            const url = new URL(window.location);
            url.searchParams.set('per_page', perPage);
            url.searchParams.set('page', '1'); // Reset para primeira página
            window.location.href = url.toString();
        }

        // Função para limpar o formulário de filtros
        function limparFormulario() {
            // Limpar campo de tipo de log
            $('#tipo_log').val('');

            // Limpar campo de módulo (Selectize)
            var moduloSelectize = $('#modulo')[0].selectize;
            if (moduloSelectize) {
                moduloSelectize.clear();
            } else {
                $('#modulo').val('');
            }

            // Limpar campo de usuário
            $('#usuario').val('');

            // Limpar campo de data início
            $('#data_inicio').val('');

            // Limpar campo de data fim
            $('#data_fim').val('');

            // Limpar campo de pesquisa na tabela
            $('#pesquisaTabela').val('');

            // Mostrar todas as linhas da tabela (caso tenha dados)
            $('#tabelaLogs tbody tr').show();

            // Redirecionar para a página inicial sem parâmetros
            window.location.href = 'index.php';
        }

        // Inicialização da tabela
        $(document).ready(function() {
            // Select2 com múltipla seleção
            $('#modulo').select2({
                placeholder: 'Selecione os módulos...',
                allowClear: true,
                width: '100%'
            });

            // Pesquisa na tabela
            $('#pesquisaTabela').on('keyup', function() {
                const value = $(this).val().toLowerCase();
                $('#tabelaLogs tbody tr').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
            });

            // Adicionar tooltips
            $('[title]').tooltip();
        });
    </script>

    <style>
        .drop {
            margin-top: -8px;
            /* ou o valor que preferir */
        }
    </style>
</body>

</html>