<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🧪 Teste das APIs de GPS</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
        .container { max-width: 1000px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        h1 { color: #333; text-align: center; }
        .teste-box { background: #e8f5e8; border: 2px solid #4CAF50; border-radius: 8px; padding: 15px; margin: 15px 0; }
        .erro-box { background: #ffe8e8; border: 2px solid #f44336; border-radius: 8px; padding: 15px; margin: 15px 0; }
        .info-box { background: #e3f2fd; border: 2px solid #2196F3; border-radius: 8px; padding: 15px; margin: 15px 0; }
        .warn-box { background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; padding: 15px; margin: 15px 0; }
        button { background: #2196F3; color: white; padding: 12px 24px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; margin: 5px; }
        button:hover { background: #1976D2; }
        .btn-success { background: #4CAF50; }
        .btn-warning { background: #FF9800; }
        .btn-danger { background: #f44336; }
        pre { background: #f8f9fa; padding: 15px; border-radius: 5px; overflow-x: auto; border: 1px solid #ddd; max-height: 300px; }
        table { width: 100%; border-collapse: collapse; margin: 10px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background: #f2f2f2; }
        .loading { display: none; text-align: center; padding: 20px; }
        .status { padding: 5px 10px; border-radius: 15px; font-weight: bold; color: white; }
        .status-success { background: #4CAF50; }
        .status-error { background: #f44336; }
        .status-warn { background: #FF9800; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧪 Teste das APIs de Rastreamento GPS</h1>
        
        <div class="info-box">
            <h3>🎯 Objetivo</h3>
            <p>Testar se as APIs de GPS estão funcionando e salvando dados no banco corretamente.</p>
        </div>
        
        <div style="text-align: center; margin: 20px 0;">
            <button onclick="testarTodasAPIs()" class="btn-success">🚀 Testar Todas as APIs</button>
            <button onclick="testarAPIOriginal()" class="btn-warning">📍 Testar API Original</button>
            <button onclick="testarAPIV2()" class="btn-warning">🔥 Testar API v2</button>
            <button onclick="verificarTabelas()" class="btn-success">📊 Verificar Tabelas</button>
            <button onclick="limparLogs()" class="btn-danger">🗑️ Limpar Logs</button>
        </div>
        
        <div id="resultados"></div>
        
        <div class="loading" id="loading">
            <h3>🔄 Testando APIs...</h3>
            <p>Aguarde enquanto testamos as APIs de GPS...</p>
        </div>
    </div>

    <script>
        async function testarTodasAPIs() {
            mostrarLoading(true);
            const resultadosDiv = document.getElementById('resultados');
            resultadosDiv.innerHTML = '<h2>🧪 Resultados dos Testes</h2>';
            
            await testarAPIOriginal(false);
            await testarAPIV2(false);
            await verificarTabelas(false);
            
            mostrarLoading(false);
        }
        
        async function testarAPIOriginal(mostrarLoading = true) {
            if (mostrarLoading) {
                mostrarCarregamento(true);
            }
            
            const resultadosDiv = document.getElementById('resultados');
            
            try {
                // Dados de teste
                const dadosTeste = {
                    viagem_id: 79,
                    latitude: -23.550520,
                    longitude: -46.633308,
                    velocidade: 25.5,
                    precisao: 10.0,
                    altitude: 760.0,
                    batteryLevel: 85
                };
                
                console.log('🌐 Testando API Original:', dadosTeste);
                
                const response = await fetch('receber-localizacao.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(dadosTeste)
                });
                
                const text = await response.text();
                console.log('📡 Resposta API Original:', text);
                
                let resultadoHTML = `
                    <div class="${response.ok ? 'teste-box' : 'erro-box'}">
                        <h3>📍 Teste API Original (receber-localizacao.php)</h3>
                        <p><strong>Status:</strong> <span class="status ${response.ok ? 'status-success' : 'status-error'}">${response.status} ${response.statusText}</span></p>
                `;
                
                if (text.trim().startsWith('{')) {
                    const dados = JSON.parse(text);
                    resultadoHTML += `
                        <p><strong>Resposta JSON:</strong></p>
                        <pre>${JSON.stringify(dados, null, 2)}</pre>
                    `;
                    
                    if (dados.sucesso) {
                        resultadoHTML += `<p style="color: green;"><strong>✅ SUCESSO: GPS salvo na API original!</strong></p>`;
                    } else {
                        resultadoHTML += `<p style="color: red;"><strong>❌ ERRO: ${dados.erro}</strong></p>`;
                    }
                } else {
                    resultadoHTML += `
                        <p style="color: red;"><strong>❌ Resposta não é JSON válido</strong></p>
                        <pre>${text.substring(0, 500)}${text.length > 500 ? '...' : ''}</pre>
                    `;
                }
                
                resultadoHTML += '</div>';
                resultadosDiv.innerHTML += resultadoHTML;
                
            } catch (error) {
                resultadosDiv.innerHTML += `
                    <div class="erro-box">
                        <h3>📍 Teste API Original</h3>
                        <p style="color: red;"><strong>❌ Erro:</strong> ${error.message}</p>
                    </div>
                `;
            }
            
            if (mostrarLoading) {
                mostrarCarregamento(false);
            }
        }
        
        async function testarAPIV2(mostrarLoading = true) {
            if (mostrarLoading) {
                mostrarCarregamento(true);
            }
            
            const resultadosDiv = document.getElementById('resultados');
            
            try {
                // Dados de teste diferentes
                const dadosTeste = {
                    viagem_id: 79,
                    latitude: -23.551234,
                    longitude: -46.634567,
                    velocidade: 30.2,
                    precisao: 8.5,
                    altitude: 765.0,
                    batteryLevel: 90
                };
                
                console.log('🔥 Testando API v2:', dadosTeste);
                
                const response = await fetch('receber-localizacao-v2.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(dadosTeste)
                });
                
                const text = await response.text();
                console.log('📡 Resposta API v2:', text);
                
                let resultadoHTML = `
                    <div class="${response.ok ? 'teste-box' : 'erro-box'}">
                        <h3>🔥 Teste API v2 (receber-localizacao-v2.php)</h3>
                        <p><strong>Status:</strong> <span class="status ${response.ok ? 'status-success' : 'status-error'}">${response.status} ${response.statusText}</span></p>
                `;
                
                if (text.trim().startsWith('{')) {
                    const dados = JSON.parse(text);
                    resultadoHTML += `
                        <p><strong>Resposta JSON:</strong></p>
                        <pre>${JSON.stringify(dados, null, 2)}</pre>
                    `;
                    
                    if (dados.sucesso) {
                        resultadoHTML += `<p style="color: green;"><strong>✅ SUCESSO: GPS salvo na API v2!</strong></p>`;
                        if (dados.total_pontos) {
                            resultadoHTML += `<p><strong>📊 Total de pontos para viagem 79:</strong> ${dados.total_pontos}</p>`;
                        }
                    } else {
                        resultadoHTML += `<p style="color: red;"><strong>❌ ERRO: ${dados.erro}</strong></p>`;
                    }
                } else {
                    resultadoHTML += `
                        <p style="color: red;"><strong>❌ Resposta não é JSON válido</strong></p>
                        <pre>${text.substring(0, 500)}${text.length > 500 ? '...' : ''}</pre>
                    `;
                }
                
                resultadoHTML += '</div>';
                resultadosDiv.innerHTML += resultadoHTML;
                
            } catch (error) {
                resultadosDiv.innerHTML += `
                    <div class="erro-box">
                        <h3>🔥 Teste API v2</h3>
                        <p style="color: red;"><strong>❌ Erro:</strong> ${error.message}</p>
                    </div>
                `;
            }
            
            if (mostrarLoading) {
                mostrarCarregamento(false);
            }
        }
        
        async function verificarTabelas(mostrarLoading = true) {
            if (mostrarLoading) {
                mostrarCarregamento(true);
            }
            
            const resultadosDiv = document.getElementById('resultados');
            
            try {
                const response = await fetch('diagnostico-gps-completo.php');
                const html = await response.text();
                
                resultadosDiv.innerHTML += `
                    <div class="info-box">
                        <h3>📊 Verificação das Tabelas</h3>
                        <details>
                            <summary>🔍 Ver diagnóstico completo (clique para expandir)</summary>
                            <div style="max-height: 400px; overflow-y: auto; margin-top: 10px;">
                                ${html}
                            </div>
                        </details>
                    </div>
                `;
                
            } catch (error) {
                resultadosDiv.innerHTML += `
                    <div class="erro-box">
                        <h3>📊 Verificação das Tabelas</h3>
                        <p style="color: red;"><strong>❌ Erro:</strong> ${error.message}</p>
                    </div>
                `;
            }
            
            if (mostrarLoading) {
                mostrarCarregamento(false);
            }
        }
        
        async function limparLogs() {
            if (!confirm('🗑️ Limpar todos os logs de rastreamento?\n\nIsso não afetará os dados do banco, apenas os arquivos de log.')) {
                return;
            }
            
            try {
                // Aqui você pode implementar uma API para limpar logs
                alert('✅ Logs limpos! (Funcionalidade não implementada ainda)');
            } catch (error) {
                alert('❌ Erro ao limpar logs: ' + error.message);
            }
        }
        
        function mostrarCarregamento(mostrar) {
            document.getElementById('loading').style.display = mostrar ? 'block' : 'none';
        }
        
        // Executar teste automático ao carregar
        window.addEventListener('load', function() {
            console.log('🧪 Página de teste carregada');
            
            // Auto-executar verificação das tabelas
            setTimeout(() => {
                verificarTabelas();
            }, 1000);
        });
    </script>
</body>
</html> 
