autocompra/subir_ticket.html

120 lines
3.2 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Subir Ticket</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 2rem auto;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 10px;
}
label, input, select, button {
display: block;
width: 100%;
margin-bottom: 1rem;
}
.producto {
border-top: 1px solid #ccc;
padding-top: 1rem;
}
</style>
</head>
<body>
<h1>Subir Ticket</h1>
<form id="ticketForm">
<label>Fecha:
<input type="date" name="fecha" required>
</label>
<label>Total (€):
<input type="number" step="0.01" name="total" required>
</label>
<label>Método de pago:
<select name="metodo_pago" required>
<option value="Tarjeta">Tarjeta</option>
<option value="Efectivo">Efectivo</option>
</select>
</label>
<h2>Productos</h2>
<div id="productosContainer"></div>
<button type="button" onclick="agregarProducto()">+ Añadir producto</button>
<button type="submit">Enviar ticket</button>
</form>
<script>
function agregarProducto() {
const container = document.getElementById("productosContainer");
const index = container.children.length;
const div = document.createElement("div");
div.className = "producto";
div.innerHTML = `
<label>Nombre:
<input type="text" name="producto_nombre_${index}" required>
</label>
<label>Cantidad:
<input type="number" step="1" name="producto_cantidad_${index}" required>
</label>
<label>Precio unitario (€):
<input type="number" step="0.01" name="producto_unitario_${index}" required>
</label>
<label>Precio total (€):
<input type="number" step="0.01" name="producto_total_${index}" required>
</label>
`;
container.appendChild(div);
}
document.getElementById("ticketForm").addEventListener("submit", function(e) {
e.preventDefault();
const form = new FormData(e.target);
const productos = [];
let index = 0;
while (form.has(`producto_nombre_${index}`)) {
productos.push({
nombre: form.get(`producto_nombre_${index}`),
cantidad: parseInt(form.get(`producto_cantidad_${index}`)),
precio_unitario: parseFloat(form.get(`producto_unitario_${index}`)),
precio_total: parseFloat(form.get(`producto_total_${index}`))
});
index++;
}
const data = {
fecha: form.get("fecha"),
total: parseFloat(form.get("total")),
metodo_pago: form.get("metodo_pago"),
productos: productos
};
fetch("subir_ticket.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
})
.then(res => res.json())
.then(res => {
alert("Ticket subido con éxito");
location.reload();
})
.catch(err => {
alert("Error al subir el ticket");
console.error(err);
});
});
// Añadir un primer producto al cargar la página
agregarProducto();
</script>
</body>
</html>