<head>
    <meta charset="UTF-8">
    <title>Consulta de Stock</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input { width: 100%; padding: 8px; box-sizing: border-box; }
        .results { margin-top: 20px; }
        .results p { margin: 5px 0; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Consulta de Stock</h1>
        <form id="stockForm">
            <div class="form-group">
                <label for="codigo">Código del artículo:</label>
                <input type="text" id="codigo" name="codigo" required>
            </div>
            <button type="submit">Consultar</button>
        </form>
        <div class="results" id="results"></div>
    </div>

    <script>
        document.getElementById('stockForm').addEventListener('submit', function(event) {
            event.preventDefault();
            consultarStock();
        });

        async function consultarStock() {
            const codigo = document.getElementById('codigo').value;
            console.log('Consultando código:', codigo); // Agrega esto para ver el código
            try {
                const response = await fetch('consulta.php?codigo=' + codigo + '&ajax=true');
                console.log('Estado de respuesta:', response.status); // Agrega esto para ver el estado HTTP
                if (!response.ok) {
                    throw new Error('Respuesta no OK');
                }
                const data = await response.json();
                console.log('Datos JSON:', data); // Agrega esto para ver los datos JSON
                mostrarResultados(data);
            } catch (error) {
                console.error('Error al consultar el stock:', error);
                mostrarResultados({error: 'Hubo un problema al procesar la solicitud.'});
            }
        }

        function mostrarResultados(data) {
            const resultsDiv = document.getElementById('results');
            if (data.error) {
                resultsDiv.innerHTML = `<p><strong>Error:</strong> ${data.error}</p>`;
            } else {
                resultsDiv.innerHTML = `
                    <p><strong>Código Alternativo:</strong> ${data.codigo}</p>
                    <p><strong>Descripción:</strong> ${data.descripcion}</p>
                    <p><strong>Stock:</strong> ${data.stock}</p>
                `;
            }
        }
    </script>
</body>
