<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teste de Liberação de Veículos</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
        .container { max-width: 800px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; }
        .veiculo { border: 1px solid #ddd; margin: 10px 0; padding: 15px; border-radius: 5px; }
        .veiculo.ativo { background: #e8f5e8; border-color: #4CAF50; }
        .veiculo.em_uso { background: #fff3cd; border-color: #ffc107; }
        .veiculo.travado { background: #f8d7da; border-color: #dc3545; }
        button { padding: 8px 15px; margin: 5px; border: none; border-radius: 4px; cursor: pointer; }
        .btn-liberar { background: #28a745; color: white; }
        .btn-ocupar { background: #ffc107; color: black; }
        .btn-refresh { background: #007bff; color: white; }
        .log { background: #f8f9fa; border: 1px solid #e9ecef; padding: 10px; margin: 10px 0; border-radius: 4px; max-height: 300px; overflow-y: auto; }
        .success { color: #28a745; }
        .error { color: #dc3545; }
        .info { color: #007bff; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚗 Teste de Liberação de Veículos</h1>
        
        <div style="margin-bottom: 20px;">
            <button class="btn-refresh" onclick="carregarVeiculos()">🔄 Recarregar Lista</button>
            <button class="btn-liberar" onclick="liberarTodos()">🚗 Liberar Todos</button>
            <button onclick="limparLog()">🧹 Limpar Log</button>
        </div>
        
        <div id="veiculos">
            <p>Carregando veículos...</p>
        </div>
        
        <div id="log" class="log">
            <strong>📋 Log de Operações:</strong><br>
        </div>
    </div>

    <script>
        const API_BASE = 'https://sistemas.pinheiroempresas.com.br/controlefrota/backend-php';
        
        async function carregarVeiculos() {
            try {
                log('🔄 Carregando lista de veículos...', 'info');
                
                const response = await fetch(`${API_BASE}/api-simples-v2.php?acao=gestao-veiculos`, {
                    method: 'GET'
                });
                
                const result = await response.json();
                
                if (result.success) {
                    exibirVeiculos(result.data);
                    log(`✅ ${result.data.length} veículo(s) carregado(s)`, 'success');
                } else {
                    log(`❌ Erro ao carregar veículos: ${result.message}`, 'error');
                }
                
            } catch (error) {
                log(`💥 Erro na requisição: ${error.message}`, 'error');
            }
        }
        
        function exibirVeiculos(veiculos) {
            const container = document.getElementById('veiculos');
            
            if (veiculos.length === 0) {
                container.innerHTML = '<p>Nenhum veículo encontrado.</p>';
                return;
            }
            
            let html = '<h3>📋 Lista de Veículos:</h3>';
            
            veiculos.forEach(veiculo => {
                const status = veiculo.status || 'null';
                const statusClass = getStatusClass(status);
                const statusText = getStatusText(status);
                
                html += `
                    <div class="veiculo ${statusClass}">
                        <strong>${veiculo.modelo}</strong> - ${veiculo.placa}
                        <br>
                        <small>ID: ${veiculo.id} | Status: <span style="font-weight: bold;">${statusText}</span></small>
                        <br>
                        <button class="btn-liberar" onclick="liberarVeiculo(${veiculo.id}, '${veiculo.modelo}', '${veiculo.placa}')">🚗 Liberar</button>
                        <button class="btn-ocupar" onclick="ocuparVeiculo(${veiculo.id}, '${veiculo.modelo}', '${veiculo.placa}')">🔒 Marcar em Uso</button>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }
        
        function getStatusClass(status) {
            switch(status) {
                case 'ativo':
                case 'disponivel':
                    return 'ativo';
                case 'em_uso':
                case 'ocupado':
                    return 'em_uso';
                case '0':
                case 'null':
                case null:
                    return 'travado';
                default:
                    return '';
            }
        }
        
        function getStatusText(status) {
            switch(status) {
                case 'ativo': return '🟢 ATIVO';
                case 'disponivel': return '🟢 DISPONÍVEL';
                case 'em_uso': return '🟡 EM USO';
                case 'ocupado': return '🟡 OCUPADO';
                case '0': return '🔴 TRAVADO (0)';
                case 'null':
                case null: return '🔴 TRAVADO (NULL)';
                default: return `❓ ${status}`;
            }
        }
        
        async function liberarVeiculo(id, modelo, placa) {
            try {
                log(`🚗 Liberando veículo: ${modelo} (${placa})...`, 'info');
                
                const response = await fetch(`${API_BASE}/api-simples-v2.php?acao=gestao-veiculos`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: id,
                        status: 'ativo'
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    log(`✅ Veículo liberado: ${modelo} (${placa}) - ${result.message}`, 'success');
                    carregarVeiculos(); // Recarregar lista
                } else {
                    log(`❌ Erro ao liberar ${modelo}: ${result.message}`, 'error');
                }
                
            } catch (error) {
                log(`💥 Erro ao liberar ${modelo}: ${error.message}`, 'error');
            }
        }
        
        async function ocuparVeiculo(id, modelo, placa) {
            try {
                log(`🔒 Marcando veículo como em uso: ${modelo} (${placa})...`, 'info');
                
                const response = await fetch(`${API_BASE}/api-simples-v2.php?acao=gestao-veiculos`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: id,
                        status: 'em_uso'
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    log(`✅ Veículo marcado em uso: ${modelo} (${placa}) - ${result.message}`, 'success');
                    carregarVeiculos(); // Recarregar lista
                } else {
                    log(`❌ Erro ao marcar ${modelo}: ${result.message}`, 'error');
                }
                
            } catch (error) {
                log(`💥 Erro ao marcar ${modelo}: ${error.message}`, 'error');
            }
        }
        
        async function liberarTodos() {
            if (!confirm('Tem certeza que deseja liberar TODOS os veículos?')) {
                return;
            }
            
            try {
                log('🚗 Liberando todos os veículos...', 'info');
                
                // Primeiro, buscar todos os veículos
                const response = await fetch(`${API_BASE}/api-simples-v2.php?acao=gestao-veiculos`, {
                    method: 'GET'
                });
                
                const result = await response.json();
                
                if (result.success) {
                    const veiculos = result.data;
                    let liberados = 0;
                    let erros = 0;
                    
                    for (const veiculo of veiculos) {
                        try {
                            const libResponse = await fetch(`${API_BASE}/api-simples-v2.php?acao=gestao-veiculos`, {
                                method: 'PUT',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify({
                                    id: veiculo.id,
                                    status: 'ativo'
                                })
                            });
                            
                            const libResult = await libResponse.json();
                            
                            if (libResult.success) {
                                liberados++;
                            } else {
                                erros++;
                                log(`❌ Erro ao liberar ${veiculo.modelo}: ${libResult.message}`, 'error');
                            }
                            
                        } catch (error) {
                            erros++;
                            log(`💥 Erro ao liberar ${veiculo.modelo}: ${error.message}`, 'error');
                        }
                        
                        // Pequena pausa entre requisições
                        await new Promise(resolve => setTimeout(resolve, 100));
                    }
                    
                    log(`✅ Liberação em lote concluída: ${liberados} liberados, ${erros} erros`, 'success');
                    carregarVeiculos(); // Recarregar lista
                    
                } else {
                    log(`❌ Erro ao buscar veículos para liberação: ${result.message}`, 'error');
                }
                
            } catch (error) {
                log(`💥 Erro na liberação em lote: ${error.message}`, 'error');
            }
        }
        
        function log(message, type = '') {
            const logDiv = document.getElementById('log');
            const timestamp = new Date().toLocaleTimeString('pt-BR');
            const className = type ? ` class="${type}"` : '';
            
            logDiv.innerHTML += `<div${className}>[${timestamp}] ${message}</div>`;
            logDiv.scrollTop = logDiv.scrollHeight;
        }
        
        function limparLog() {
            document.getElementById('log').innerHTML = '<strong>📋 Log de Operações:</strong><br>';
        }
        
        // Carregar veículos automaticamente ao abrir a página
        window.onload = function() {
            carregarVeiculos();
        };
    </script>
</body>
</html> 
