<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba de Envío - Sistema Buque</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-weight: 600;
        }
        
        input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        
        input[type="number"]:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        
        button {
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #667eea;
            color: white;
        }
        
        .btn-primary:hover {
            background: #5568d3;
        }
        
        .btn-auto {
            background: #4CAF50;
            color: white;
        }
        
        .btn-auto:hover {
            background: #45a049;
        }
        
        .btn-stop {
            background: #f44336;
            color: white;
        }
        
        .btn-stop:hover {
            background: #da190b;
        }
        
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 5px;
            display: none;
        }
        
        .result.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .result.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .result pre {
            margin-top: 10px;
            background: rgba(0,0,0,0.05);
            padding: 10px;
            border-radius: 3px;
            overflow-x: auto;
        }
        
        .info {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            border-left: 4px solid #2196F3;
        }
        
        .info h3 {
            margin-bottom: 10px;
            color: #1976D2;
        }
        
        .info code {
            background: rgba(0,0,0,0.05);
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧪 Prueba de Envío de Datos</h1>
        
        <div style="margin-bottom: 15px;">
            <a href="dashboard.php" style="display: inline-block; padding: 8px 16px; background: #667eea; color: white; text-decoration: none; border-radius: 5px; font-weight: 600; margin-right: 10px;">📈 Dashboard</a>
            <a href="ver_datos.php" style="display: inline-block; padding: 8px 16px; background: #4CAF50; color: white; text-decoration: none; border-radius: 5px; font-weight: 600;">📋 Ver Datos</a>
        </div>
        
        <div class="info">
            <h3>📋 Información</h3>
            <p>Este formulario simula el envío de datos desde el equipo industrial del buque.</p>
            <p><strong>Formato:</strong> <code>temperatura,humedad,presion,api_key[,fecha_hora]</code></p>
            <p><strong>Fecha/Hora:</strong> Se envía automáticamente la fecha y hora actual de Argentina</p>
            <p><strong>Endpoint:</strong> <code id="endpoint-url">Cargando...</code></p>
        </div>
        
        <form id="testForm">
            <div class="form-group">
                <label for="temperatura">🌡️ Temperatura (°C)</label>
                <input type="number" id="temperatura" name="temperatura" step="0.1" value="23.5" min="-50" max="100" required>
            </div>
            
            <div class="form-group">
                <label for="humedad">💧 Humedad (%)</label>
                <input type="number" id="humedad" name="humedad" step="0.1" value="60" min="0" max="100" required>
            </div>
            
            <div class="form-group">
                <label for="presion">📊 Presión (hPa)</label>
                <input type="number" id="presion" name="presion" step="0.1" value="1012" min="800" max="1200" required>
            </div>
            
            <div class="form-group">
                <label for="api_key">🔑 API KEY</label>
                <input type="text" id="api_key" name="api_key" value="BUQUE2024_SECRET_KEY_XYZ789" required>
            </div>
            
            <div class="button-group">
                <button type="submit" class="btn-primary">📤 Enviar Datos</button>
                <button type="button" class="btn-auto" id="btnAuto">▶️ Auto-Envío (5s)</button>
                <button type="button" class="btn-stop" id="btnStop" style="display:none;">⏹️ Detener</button>
            </div>
        </form>
        
        <div class="result" id="result"></div>
    </div>
    
    <script>
        // Detectar URL base
        const baseUrl = window.location.origin + window.location.pathname.replace('test_envio.php', '');
        const apiUrl = baseUrl + 'api/buque.php';
        document.getElementById('endpoint-url').textContent = apiUrl;
        
        let autoInterval = null;
        
        // Obtener fecha y hora actual en formato Argentina (Y-m-d H:i:s)
        // Argentina está en UTC-3 (America/Argentina/Buenos_Aires)
        function obtenerFechaHoraArgentina() {
            const now = new Date();
            // Calcular offset de Argentina (UTC-3 = -180 minutos)
            const offsetArgentina = -3 * 60; // -180 minutos
            const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
            const fechaArgentina = new Date(utc + (offsetArgentina * 60000));
            
            const year = fechaArgentina.getFullYear();
            const month = String(fechaArgentina.getMonth() + 1).padStart(2, '0');
            const day = String(fechaArgentina.getDate()).padStart(2, '0');
            const hours = String(fechaArgentina.getHours()).padStart(2, '0');
            const minutes = String(fechaArgentina.getMinutes()).padStart(2, '0');
            const seconds = String(fechaArgentina.getSeconds()).padStart(2, '0');
            
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }
        
        // Generar valores aleatorios realistas
        function generarValoresAleatorios() {
            const temp = (Math.random() * 10 + 20).toFixed(1); // 20-30°C
            const hum = (Math.random() * 20 + 50).toFixed(1);  // 50-70%
            const pres = (Math.random() * 20 + 1000).toFixed(1); // 1000-1020 hPa
            return { temp, hum, pres };
        }
        
        // Enviar datos
        async function enviarDatos(temp, hum, pres, apiKey) {
            // Incluir fecha y hora de Argentina
            const fechaHora = obtenerFechaHoraArgentina();
            const data = `${temp},${hum},${pres},${apiKey},${fechaHora}`;
            
            try {
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'text/plain'
                    },
                    body: data
                });
                
                const result = await response.json();
                mostrarResultado(true, result, data);
            } catch (error) {
                mostrarResultado(false, { message: error.message }, data);
            }
        }
        
        // Mostrar resultado
        function mostrarResultado(success, data, sentData) {
            const resultDiv = document.getElementById('result');
            resultDiv.className = 'result ' + (success ? 'success' : 'error');
            resultDiv.style.display = 'block';
            
            resultDiv.innerHTML = `
                <strong>${success ? '✅ Éxito' : '❌ Error'}</strong>
                <pre>${JSON.stringify(data, null, 2)}</pre>
                <p><strong>Datos enviados:</strong> <code>${sentData}</code></p>
            `;
            
            // Scroll al resultado
            resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
        
        // Manejar envío manual
        document.getElementById('testForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const temp = document.getElementById('temperatura').value;
            const hum = document.getElementById('humedad').value;
            const pres = document.getElementById('presion').value;
            const apiKey = document.getElementById('api_key').value;
            
            await enviarDatos(temp, hum, pres, apiKey);
        });
        
        // Auto-envío
        document.getElementById('btnAuto').addEventListener('click', () => {
            const btnAuto = document.getElementById('btnAuto');
            const btnStop = document.getElementById('btnStop');
            
            btnAuto.style.display = 'none';
            btnStop.style.display = 'inline-block';
            
            // Enviar inmediatamente
            const apiKey = document.getElementById('api_key').value;
            const valores = generarValoresAleatorios();
            document.getElementById('temperatura').value = valores.temp;
            document.getElementById('humedad').value = valores.hum;
            document.getElementById('presion').value = valores.pres;
            enviarDatos(valores.temp, valores.hum, valores.pres, apiKey);
            
            // Configurar intervalo
            autoInterval = setInterval(() => {
                const valores = generarValoresAleatorios();
                document.getElementById('temperatura').value = valores.temp;
                document.getElementById('humedad').value = valores.hum;
                document.getElementById('presion').value = valores.pres;
                enviarDatos(valores.temp, valores.hum, valores.pres, apiKey);
            }, 5000); // Cada 5 segundos
        });
        
        // Detener auto-envío
        document.getElementById('btnStop').addEventListener('click', () => {
            if (autoInterval) {
                clearInterval(autoInterval);
                autoInterval = null;
            }
            
            document.getElementById('btnAuto').style.display = 'inline-block';
            document.getElementById('btnStop').style.display = 'none';
        });
    </script>
</body>
</html>

