<?php
// teste_form_api.php
session_start();
$_SESSION['usuario_id'] = 100;
$_SESSION['tenant_id'] = 17;
?>
<!DOCTYPE html>
<html>
<head>
    <title>Teste API de Chamadas</title>
    <style>
        body { font-family: Arial; padding: 20px; }
        .success { color: green; }
        .error { color: red; }
        pre { background: #f4f4f4; padding: 10px; }
    </style>
</head>
<body>
    <h2>📞 Teste Manual da API de Chamadas</h2>
    
    <form id="testForm">
        <h3>Dados da Chamada:</h3>
        <p>
            <label>Número Destino:</label><br>
            <input type="text" name="numero_destino" value="+5511888888888" size="30">
        </p>
        <p>
            <label>Duração (segundos):</label><br>
            <input type="number" name="duracao" value="45">
        </p>
        <p>
            <label>Status:</label><br>
            <select name="status">
                <option value="realizada">Realizada</option>
                <option value="nao_atendida">Não Atendida</option>
                <option value="ocupado">Ocupado</option>
            </select>
        </p>
        <p>
            <label>Cliente ID (opcional):</label><br>
            <input type="number" name="cliente_id" value="">
        </p>
        <p>
            <button type="submit">Registrar Chamada</button>
        </p>
    </form>
    
    <div id="resultado"></div>
    
    <script>
    document.getElementById('testForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const formData = new FormData(e.target);
        const dados = {
            numero_destino: formData.get('numero_destino'),
            duracao: parseInt(formData.get('duracao')),
            status: formData.get('status')
        };
        
        const clienteId = formData.get('cliente_id');
        if (clienteId) {
            dados.cliente_id = parseInt(clienteId);
        }
        
        document.getElementById('resultado').innerHTML = 'Enviando...';
        
        try {
            const response = await fetch('api_webphone.php?acao=registrar-chamada', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(dados)
            });
            
            const text = await response.text();
            document.getElementById('resultado').innerHTML = '<pre>' + text + '</pre>';
            
        } catch (error) {
            document.getElementById('resultado').innerHTML = '<p class="error">Erro: ' + error + '</p>';
        }
    });
    </script>
    
    <hr>
    
    <h3>Verificar Últimas Chamadas:</h3>
    <button onclick="verificarChamadas()">Atualizar</button>
    <div id="chamadas"></div>
    
    <script>
    async function verificarChamadas() {
        try {
            const response = await fetch('api_webphone.php?acao=historico&limite=10');
            const data = await response.json();
            
            if (data.success) {
                let html = '<table border="1" cellpadding="5">';
                html += '<tr><th>ID</th><th>Data</th><th>Origem</th><th>Destino</th><th>Duração</th><th>Custo</th></tr>';
                
                data.chamadas.forEach(chamada => {
                    html += `<tr>
                        <td>${chamada.id}</td>
                        <td>${chamada.data_hora_inicio}</td>
                        <td>${chamada.numero_origem}</td>
                        <td>${chamada.numero_destino}</td>
                        <td>${chamada.duracao}s</td>
                        <td>R$ ${parseFloat(chamada.custo).toFixed(2)}</td>
                    </tr>`;
                });
                
                html += '</table>';
                document.getElementById('chamadas').innerHTML = html;
            } else {
                document.getElementById('chamadas').innerHTML = '<p class="error">Erro: ' + data.error + '</p>';
            }
        } catch (error) {
            document.getElementById('chamadas').innerHTML = '<p class="error">Erro: ' + error + '</p>';
        }
    }
    
    // Carregar chamadas ao abrir a página
    verificarChamadas();
    </script>
</body>
</html>