<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editar Operación</title>
    <link rel="stylesheet" href="/styles.css"> <!-- Link to your CSS file -->
</head>
<body>
    <div class="editar-operacion-container">
        <h1>Editar Operación</h1>
        <form action="/operaciones/editar/<%= transaccion.id %>" method="POST">
            <div class="form-group">
                <label for="date">Fecha:</label>
                <input type="date" id="date" name="date" value="<%= transaccion.date %>" required>
            </div>
            <div class="form-group">
                <label for="description">Descripción:</label>
                <input type="text" id="description" name="description" value="<%= transaccion.description %>" required>
            </div>
            <div class="form-group">
                <label for="cantidad">Cantidad:</label>
                <input type="number" id="cantidad" name="cantidad" value="<%= transaccion.cantidad %>" required>
            </div>
            <div class="form-group">
                <label for="sucursal">Sucursal:</label>
                <input type="text" id="sucursal" name="sucursal" value="<%= transaccion.sucursal %>" required>
            </div>
            <div class="form-group">
                <label for="tipo">Tipo:</label>
                <select id="tipo" name="tipo" required>
                    <option value="ingreso" <%= transaccion.tipo === 'ingreso' ? 'selected' : '' %>>Ingreso</option>
                    <option value="gasto" <%= transaccion.tipo === 'gasto' ? 'selected' : '' %>>Gasto</option>
                </select>
            </div>
            <button type="submit">Actualizar Operación</button>
            <button type="button" onclick="eliminarOperacion(<%= transaccion.id %>)">Eliminar Operación</button>
        </form>
        <script>
            function eliminarOperacion(id) {
                if (confirm('¿Estás seguro de que deseas eliminar esta operación?')) {
                    fetch(`/operaciones/eliminar/${id}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(response => {
                        if (response.ok) {
                            window.location.href = '/operaciones'; // Redirigir a la lista de operaciones
                        } else {
                            alert('Error al eliminar la operación');
                        }
                    }).catch(error => {
                        console.error('Error:', error);
                    });
                }
            }
        </script>
        <p><a href="/operaciones">Volver a la lista de operaciones</ p>
    </div>

    <footer>
        <p>&copy; 2024 Jorge Melgarejo</p>
    </footer>
</body>
</html>